/* ==========================================================================
   "Not shared hosting" — the infrastructure card row
   (/services/web-design-and-development, section #tk-webinfra)

   Every rule is scoped under #tk-webinfra, for two reasons:

   1. This file is queued through @stack('page_css'), which the layout emits
      BEFORE its own stylesheets. A bare `.gd svg { height: 104px }` would
      lose an order tie to the page's own `svg` sizing rules — the same rules
      that previously stretched an icon to 1656px tall. An id in the selector
      settles it outright.
   2. The supplied class names (gc, rk, gl, nd, tick, arc, hub, ndl) are
      short and generic. Scoped, none of them can reach anything else.

   Each card's accent is one custom property, --gc, set inline from the
   partial. The eyebrow, the SVG strokes, the glow behind the card and the
   figure's suffix all read it, so a card is recoloured by changing --gc
   alone. Card 1 carries the site blue in place of the mock's green.

   --panel and --up are defined here: the supplied CSS referenced them but
   nothing in this site did.

   Motion:
     - card 1: the three rack LEDs pulse in sequence (--d staggers them)
     - cards 2 and 3: the arc draws and the needle sweeps once the card is
       on screen (.is-in, added by the partial's observer), so it reads as a
       measurement being taken rather than one already finished
     - card 4: the globe's two meridians sweep continuously
   All of it stands still under prefers-reduced-motion, in its end state.
   ========================================================================== */

#tk-webinfra {
    --panel: #0e1116;
    --up: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 28px rgba(0, 0, 0, .5);

    padding: 72px 0;
    background: #08090b;
}

/* ---- head ---------------------------------------------------------------- */
#tk-webinfra .gd-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 8px 16px 8px 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    color: rgba(255, 255, 255, .72);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

#tk-webinfra .gd-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color, #0073FC);
    color: #fff;
}

#tk-webinfra .gd-badge-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

#tk-webinfra .gd-title {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

#tk-webinfra .gd-rule {
    display: block;
    width: min(360px, 100%);
    height: 1px;
    margin: 14px 0 18px;
    background: linear-gradient(90deg, var(--primary-color, #0073FC), transparent);
}

#tk-webinfra .gd-lead {
    max-width: 780px;
    margin: 0 0 38px;
    color: rgba(255, 255, 255, .62);
    font-size: 15.5px;
    line-height: 1.75;
}

/* ---- the row ------------------------------------------------------------- */
#tk-webinfra .gd-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 991.98px) {
    #tk-webinfra .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    #tk-webinfra .gd-grid { grid-template-columns: 1fr; }
}

/* ---- the card ------------------------------------------------------------ */
#tk-webinfra .gc {
    position: relative;
    background:
        radial-gradient(120% 90% at 50% -10%,
            color-mix(in srgb, var(--gc, #0073FC) 13%, transparent), transparent 62%),
        var(--panel);
    box-shadow: var(--up);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 20px;
    padding: 28px 20px 24px;
    text-align: center;
    overflow: hidden;
}

#tk-webinfra .gc-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 18px;
    color: var(--gc, #0073FC);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;
}

#tk-webinfra .gc-eyebrow svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    display: block;
}

/* The art well. Fixed at the SVGs' own viewBox size, so SVG units are CSS
   pixels 1:1 (which the needle's placement depends on) and all four cards
   line up on the same baseline. */
#tk-webinfra .gd {
    position: relative;
    width: 150px;
    height: 104px;
    margin: 0 auto 14px;
}

#tk-webinfra .gd svg {
    display: block;
    width: 150px;
    height: 104px;
    max-width: none;
    overflow: visible;
}

#tk-webinfra .gc-figure {
    margin: 0 0 6px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
}

#tk-webinfra .gc-figure small {
    margin-left: 2px;
    color: var(--gc, #0073FC);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

#tk-webinfra .gc-name {
    margin: 0 0 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

#tk-webinfra .gc-text {
    margin: 0;
    color: rgba(255, 255, 255, .55);
    font-size: 13px;
    line-height: 1.6;
}

/* ==========================================================================
   Card 1 — server racks
   ========================================================================== */
#tk-webinfra .rk rect {
    fill: rgba(255, 255, 255, .035);
    stroke: color-mix(in srgb, var(--gc, #0073FC) 38%, transparent);
    stroke-width: 1.2;
}

#tk-webinfra .rk .vent {
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 2;
    stroke-linecap: round;
}

#tk-webinfra .rk .led {
    fill: var(--gc, #0073FC);
    animation: tk-gd-led 1.5s var(--d, 0s) infinite;
}

@keyframes tk-gd-led {
    0%, 100% { opacity: .22; }
    45%      { opacity: 1; }
}

/* ==========================================================================
   Cards 2 and 3 — the gauge

   The arc is a semicircle of radius 62, so its length is pi * 62, near
   enough 195. --val (0 to 1) drives how much of it is drawn AND where the
   needle lands, so the two cannot drift apart.
   ========================================================================== */
#tk-webinfra .tick {
    stroke: rgba(255, 255, 255, .2);
    stroke-width: 2;
    stroke-linecap: round;
}

#tk-webinfra .trk {
    fill: none;
    stroke: rgba(255, 255, 255, .07);
    stroke-width: 9;
    stroke-linecap: round;
}

#tk-webinfra .arc {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 195;
    stroke-dashoffset: 195;
}

#tk-webinfra .hub {
    fill: var(--gc, #0073FC);
    stroke: var(--panel, #0e1116);
    stroke-width: 2;
}

/* The needle pivots on the hub. The well is exactly 150x104 against a
   0 0 150 104 viewBox, so the hub's 75,82 is literally left 75px / top 82px.
   The half-height nudge puts the pivot on the needle's centreline rather
   than its top edge.

   On the rotation: with the origin at the needle's left end, 180deg points
   at the left end of the dial and 360deg at the right end, so the sweep is
   180deg + val * 180deg and it travels over the top, not under. */
#tk-webinfra .ndl {
    position: absolute;
    left: 75px;
    top: 82px;
    margin-top: -1.25px;
    width: 48px;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gc, #0073FC));
    transform-origin: 0 50%;
    transform: rotate(180deg);
}

#tk-webinfra .gc.is-in .arc {
    stroke-dashoffset: calc(195 - 195 * var(--val, .75));
    transition: stroke-dashoffset 1.5s cubic-bezier(.22, .8, .3, 1);
}

#tk-webinfra .gc.is-in .ndl {
    transform: rotate(calc(180deg + var(--val, .75) * 180deg));
    transition: transform 1.5s cubic-bezier(.22, .8, .3, 1);
}

/* ==========================================================================
   Card 4 — the globe
   ========================================================================== */
#tk-webinfra .gl-o {
    fill: color-mix(in srgb, var(--gc, #0073FC) 9%, transparent);
    stroke: color-mix(in srgb, var(--gc, #0073FC) 45%, transparent);
    stroke-width: 1.3;
}

#tk-webinfra .gl-m {
    fill: none;
    stroke: color-mix(in srgb, var(--gc, #0073FC) 28%, transparent);
    stroke-width: 1.1;
}

/* The two sweeping meridians. Squeezing rx down to nothing and back out
   reads as the globe turning, and leaves the outline still rather than
   rotating a circle in place, which would look like nothing at all. */
#tk-webinfra .gl-sp {
    fill: none;
    stroke: color-mix(in srgb, var(--gc, #0073FC) 70%, transparent);
    stroke-width: 1.2;
    animation: tk-gd-meridian 7s linear infinite;
}

#tk-webinfra .gl-s2 {
    animation-delay: -3.5s;
}

@keyframes tk-gd-meridian {
    0%   { rx: 34; opacity: .22; }
    25%  { rx: 2;  opacity: 1; }
    50%  { rx: 34; opacity: .22; }
    75%  { rx: 2;  opacity: 1; }
    100% { rx: 34; opacity: .22; }
}

#tk-webinfra .nd {
    fill: var(--gc, #0073FC);
    animation: tk-gd-node 2.6s infinite;
}

#tk-webinfra .n1 { animation-delay: 0s; }
#tk-webinfra .n2 { animation-delay: .65s; }
#tk-webinfra .n3 { animation-delay: 1.3s; }
#tk-webinfra .n4 { animation-delay: 1.95s; }

@keyframes tk-gd-node {
    0%, 100% { opacity: .3; }
    40%      { opacity: 1; }
}

/* ==========================================================================
   Light theme
   ========================================================================== */
html[data-tk-theme="light"] #tk-webinfra {
    --panel: #ffffff;
    --up: 0 2px 10px rgba(15, 23, 42, .08);

    background: #edf1f4;
}

html[data-tk-theme="light"] #tk-webinfra .gd-badge {
    border-color: rgba(15, 23, 42, .12);
    background: #fff;
    color: #475162;
}

html[data-tk-theme="light"] #tk-webinfra .gd-title,
html[data-tk-theme="light"] #tk-webinfra .gc-figure,
html[data-tk-theme="light"] #tk-webinfra .gc-name {
    color: #0a0d0f;
}

html[data-tk-theme="light"] #tk-webinfra .gd-lead,
html[data-tk-theme="light"] #tk-webinfra .gc-text {
    color: #5b6472;
}

html[data-tk-theme="light"] #tk-webinfra .gc {
    border-color: rgba(15, 23, 42, .1);
}

html[data-tk-theme="light"] #tk-webinfra .rk rect {
    fill: rgba(15, 23, 42, .03);
}

html[data-tk-theme="light"] #tk-webinfra .rk .vent,
html[data-tk-theme="light"] #tk-webinfra .tick {
    stroke: rgba(15, 23, 42, .22);
}

html[data-tk-theme="light"] #tk-webinfra .trk {
    stroke: rgba(15, 23, 42, .1);
}

/* The amber card's accent is the one that goes thin on white — darken just
   the text that uses it, and leave the artwork alone. */
html[data-tk-theme="light"] #tk-webinfra .gc[style*="fbbf24"] .gc-eyebrow,
html[data-tk-theme="light"] #tk-webinfra .gc[style*="fbbf24"] .gc-figure small {
    color: #b4780a;
}

/* ==========================================================================
   Reduced motion: show the finished state, skip the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #tk-webinfra .rk .led,
    #tk-webinfra .gl-sp,
    #tk-webinfra .nd {
        animation: none;
    }

    #tk-webinfra .arc {
        stroke-dashoffset: calc(195 - 195 * var(--val, .75));
    }

    #tk-webinfra .ndl {
        transform: rotate(calc(180deg + var(--val, .75) * 180deg));
    }

    #tk-webinfra .gc.is-in .arc,
    #tk-webinfra .gc.is-in .ndl {
        transition: none;
    }
}

/* ==========================================================================
   Late corrections
   ========================================================================== */

/* "Cloud only" is two words, unlike "99.99%" / "47ms" / "300+", so that one
   suffix needs a word space rather than the 2px optical nudge. */
#tk-webinfra .gc-figure small.is-spaced {
    margin-left: .3em;
}

/* On white the rack outlines and LEDs washed out next to the gauge and the
   globe, which carry much more ink. Only the light theme needs this; on the
   dark panel the original weights read fine. */
html[data-tk-theme="light"] #tk-webinfra .rk rect {
    stroke: color-mix(in srgb, var(--gc, #0073FC) 62%, transparent);
    stroke-width: 1.4;
}

html[data-tk-theme="light"] #tk-webinfra .gl-o {
    stroke: color-mix(in srgb, var(--gc, #0073FC) 62%, transparent);
}

html[data-tk-theme="light"] #tk-webinfra .gl-m {
    stroke: color-mix(in srgb, var(--gc, #0073FC) 42%, transparent);
}

/* ==========================================================================
   Winning the page's blanket light-mode text rule

   In light mode the page sets a single colour on every p / span / small /
   label inside #primary.tk-gd:

     html[data-tk-theme="light"] #primary.tk-gd p, ... span, ... small { }

   That selector carries one id, two classes and two types, which outranks
   `html[data-tk-theme="light"] #tk-webinfra .gc-eyebrow` (one id, two
   classes, one type) on type count alone. The result was every accent in
   this section — the eyebrows, the figure suffixes, the lead — flattened
   to #2b3138 on white, while dark mode looked correct.

   Repeating the section id is what settles it: two ids beat one outright,
   whatever follows. It is a deliberate specificity bump, not a typo, and
   it keeps the fix inside this file rather than depending on #primary
   still wrapping the page.
   ========================================================================== */
html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gd-badge {
    color: #475162;
}

html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gd-badge-icon {
    color: #fff;
}

html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gd-lead,
html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gc-text {
    color: #5b6472;
}

html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gc-eyebrow,
html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gc-figure small {
    color: var(--gc, #0073FC);
}

html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gc-figure {
    color: #0a0d0f;
}

html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gc[style*="fbbf24"] .gc-eyebrow,
html[data-tk-theme="light"] #tk-webinfra#tk-webinfra .gc[style*="fbbf24"] .gc-figure small {
    color: #b4780a;
}

/* ==========================================================================
   Badge and heading on one line

   The badge used to sit on its own row above the heading. The reference
   has them side by side, with the badge's baseline centred against the
   heading, so the pair reads as one line.
   ========================================================================== */
#tk-webinfra .gd-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

/* the badge carried the gap to the heading when it was stacked; the row's
   own gap does that now */
#tk-webinfra .gd-headrow .gd-badge {
    margin-bottom: 0;
}

/* below the heading's own wrap point the pair stacks, so the badge is not
   squeezed against a two-line heading */
@media (max-width: 575.98px) {
    #tk-webinfra .gd-headrow {
        gap: 14px;
    }

    #tk-webinfra .gd-headrow .gd-badge {
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   The counting figures

   tabular-nums holds every digit to the same width, so a figure running up
   from zero does not jitter as the digits change under it. The number still
   grows as it gains places — that is the count, not a glitch — but the
   digits themselves stay put.
   ========================================================================== */
#tk-webinfra .gc-figure {
    font-variant-numeric: tabular-nums;
}

#tk-webinfra .gc-num {
    display: inline-block;
}