:root {
  --gk-navy-950:#07111f;
  --gk-navy-900:#0b172a;
  /* Sampled from the approved logo, so dark gradients tie back to the mark. */
  --gk-navy-800:#1c3b70;

  /* Blues are sampled from the approved logo. The previous #1d4ed8 / #3b82f6
     scale appeared nowhere in the mark. --gk-blue-700 is 7.4:1 on white (AAA),
     an improvement on the 5.2:1 it replaces. */
  --gk-blue-700:#0e569f;
  --gk-blue-600:#1466b8;
  --gk-blue-500:#3280c2;
  --gk-blue-300:#8cc0e8;   /* accents on navy only — 6.9:1 on --gk-navy-950 */
  --gk-blue-100:#cfe3f3;
  --gk-blue-50:#eaf3fa;

  /* The logo's orange. GRAPHIC USE ONLY — 2.97:1 on white, so it fails AA for
     text and misses even the 3:1 large-text threshold. Never use it for copy,
     and never as a button fill behind white text. Rules, icons and diagram
     accents only. */
  --gk-orange:#f26f21;

  --gk-text-900:#0f172a;
  --gk-text-700:#334155;
  --gk-text-500:#64748b;
  --gk-border:#dbe3ee;
  --gk-surface:#ffffff;
  --gk-surface-alt:#f7f9fc;
  --gk-success:#0f766e;
  --gk-shadow:0 16px 50px rgba(15,23,42,.10);
  --gk-shadow-sm:0 8px 24px rgba(15,23,42,.08);
  --gk-radius-sm:12px;
  --gk-radius:18px;
  --gk-radius-lg:28px;
  --gk-container:1200px;
  /* Trimmed from clamp(3rem,5vw,4.75rem). Where two sections of different
     backgrounds meet, neither padding can be collapsed, so the two stacked to
     ~138px of empty band between the last line of one and the first of the next. */
  --gk-section:clamp(2.25rem,4vw,3.5rem);
  --gk-gap:1.25rem;

  /* One reading measure for every text column, replacing three separate caps
     (760px, 66ch, 780px) that pulled titles and paragraphs out of alignment.
     Deliberately rem, not ch: ch resolves against each element's OWN font size,
     so the same 68ch produced ~690px on a 17px paragraph and ~2400px on a 60px
     h1. Only an absolute unit can give a heading and its body copy a shared
     right edge. 44rem is ~704px, matching the measure the 66ch cap produced. */
  --gk-measure:44rem;
  --gk-card-title-lines:2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--gk-text-700);
  background:var(--gk-surface);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--gk-blue-700);text-decoration:none}
a:hover{text-decoration:none}
button,input,textarea,select{font:inherit}
:focus-visible{outline:3px solid rgba(14,86,159,.45);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:.75rem 1rem;z-index:1000}
.skip-link:focus{left:1rem;top:1rem}
.container{width:min(calc(100% - 2rem),var(--gk-container));margin-inline:auto}
.narrow{max-width:var(--gk-measure)}
.section{padding-block:var(--gk-section)}
.section-sm{padding-block:clamp(2rem,3.5vw,3rem)}
/* Adjacent paddings otherwise stack into a gap twice the size of either one.
   Collapse the seam where two sections meet and share a background. */
.hero + .section-sm,.page-hero + .section-sm{padding-top:0}
.section-sm + .section:not(.surface-alt):not(.surface-dark){padding-top:0}
/* Same seam, one level up: a hero's bottom padding plus the following section's
   top padding stacked to ~144px of empty band. Only collapsed where the two
   share a background — across a colour change the padding is doing real work. */
.hero + .section:not(.surface-alt):not(.surface-dark),
.page-hero + .section:not(.surface-alt):not(.surface-dark){padding-top:0}
.surface-alt{background:var(--gk-surface-alt)}
.surface-dark{background:var(--gk-navy-950);color:#cbd5e1}
.surface-dark h1,.surface-dark h2,.surface-dark h3{color:white}
/* A white card on a dark section must not inherit the section's light text. */
.surface-dark .card{color:var(--gk-text-700)}
.surface-dark .card h1,.surface-dark .card h2,.surface-dark .card h3,.surface-dark .card h4{color:var(--gk-text-900)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--gk-blue-700);font-size:.78rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:.9rem
}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor}
h1,h2,h3,h4{
  margin:0 0 .8rem;color:var(--gk-text-900);
  font-family:Manrope,Inter,system-ui,sans-serif;line-height:1.15;
  letter-spacing:-.025em
}
/* Only 600/700/800 are loaded for Manrope. A requested 750 resolves upward to
   800, which is why h2/h3/h4 all used to render at the same weight as h1 and the
   hierarchy read flat. One level per loaded weight, 800 reserved for h1. */
/* Sized so a full headline fits one or two lines rather than forcing the copy to
   be cut to three words. h1 tops out at 44px instead of 60px, which holds ~26
   characters per line in the 599px home hero column and ~52 across a full
   container. h2 comes down with it — at the old 41.6px it would have sat within
   3px of the new h1 and the hierarchy would read flat. Weight pairs at 700/700
   and 600/600, with size doing the separating. */
h1{font-size:clamp(2rem,3.2vw,2.75rem);font-weight:700}
h2{font-size:clamp(1.55rem,2.2vw,2rem);font-weight:700}
/* Capped to the measure so a title shares a right edge with the body copy beneath
   it. Narrower parents (grid columns) still win — this is a ceiling, not a width. */
h1,h2{max-width:var(--gk-measure)}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600}
h4{font-size:1.05rem;font-weight:600}
.lead{font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.6;color:var(--gk-text-700);max-width:var(--gk-measure)}
.muted{color:var(--gk-text-500)}
.kicker{font-weight:700;color:var(--gk-text-900)}
.header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);border-bottom:1px solid rgba(219,227,238,.8)
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--gk-text-900);font-family:Manrope,sans-serif;font-weight:800;font-size:1.3rem}
/* The approved mark is 170×152, not square. Height drives the size and width
   follows the aspect ratio — setting both to 38px would squash it. */
.brand-mark{height:38px;width:auto;flex:none}
.nav-links{display:flex;align-items:center;gap:1.35rem}
.nav-links a{color:var(--gk-text-700);font-size:.94rem;font-weight:600}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gk-blue-700)}
.nav-toggle{display:none;border:0;background:none;padding:.5rem;color:var(--gk-text-900)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.15rem;border:1px solid transparent;border-radius:12px;
  font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background .18s ease
}
.btn:hover{transform:translateY(-2px)}

/* Button colours are written as .btn.btn-* (specificity 0,2,0) so they beat the
   contextual link colours .nav-links a and .footer a (both 0,1,1). Written as a
   single class they lose, and the label renders in the surrounding text colour
   against the button's own background — invisible. */
.btn.btn-primary{background:var(--gk-blue-700);color:#fff;border-color:var(--gk-blue-700);box-shadow:0 10px 24px rgba(14,86,159,.22)}
.btn.btn-primary:hover{background:#0b4480;border-color:#0b4480;color:#fff;box-shadow:0 14px 28px rgba(14,86,159,.30)}

/* Secondary is an outline of the primary, not an inverse of it, so a pair of
   buttons reads as one control group rather than two competing blocks. */
.btn.btn-secondary{background:transparent;color:var(--gk-blue-700);border-color:#b7d4ea}
.btn.btn-secondary:hover{background:var(--gk-blue-50);color:var(--gk-blue-700);border-color:var(--gk-blue-500)}

.btn.btn-light{background:#fff;color:var(--gk-blue-700);border-color:#fff}
.btn.btn-light:hover{background:var(--gk-blue-50);color:var(--gk-blue-700)}

/* On navy and gradient surfaces the outline flips to white. */
.surface-dark .btn.btn-secondary,.cta .btn.btn-secondary,.hero-panel .btn.btn-secondary,.visual .btn.btn-secondary{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.45)
}
.surface-dark .btn.btn-secondary:hover,.cta .btn.btn-secondary:hover,.hero-panel .btn.btn-secondary:hover,.visual .btn.btn-secondary:hover{
  background:rgba(255,255,255,.12);color:#fff;border-color:#fff
}
/* Equal-width buttons within a group. grid-auto-columns:1fr forces every column to
   the same width, and width:fit-content keeps the group only as wide as its widest
   button needs — so a pair matches each other without stretching across the whole
   container. .btn already carries min-height:48px, so heights were never the issue. */
.actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.7rem;margin-top:1.4rem;width:fit-content}
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,5.5rem);background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.hero::before{content:"";position:absolute;inset:-20% auto auto 55%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(14,86,159,.14),transparent 68%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.07fr .93fr;gap:clamp(2rem,6vw,5rem);align-items:center;position:relative}
/* Padding trimmed from 3rem so the panel's height lands close to the text column
   beside it. At 3rem it stood ~45px taller, and .hero-grid centres the two, so it
   overhung the copy at both top and bottom. */
.hero-panel{
  background:linear-gradient(150deg,var(--gk-navy-950),var(--gk-navy-800));
  color:#dbeafe;border-radius:var(--gk-radius-lg);padding:clamp(1.25rem,3vw,2rem);
  box-shadow:var(--gk-shadow);position:relative;overflow:hidden
}
.hero-panel::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-90px;bottom:-120px;background:rgba(50,128,194,.18)}
.arch-flow{display:grid;gap:.65rem;position:relative;z-index:1}
/* These are diagram labels, not body copy. Inheriting the 17px/1.7 body rhythm
   was what made the panel overshoot the text column beside it — at 15px/1.5 each
   line is ~6px shorter and the longer captions stop wrapping altogether. */
.arch-node{padding:.8rem .9rem;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06);font-size:.94rem;line-height:1.5;text-align:center}
.arch-node strong{display:block;color:#fff}
.arch-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.flow-arrow{text-align:center;color:var(--gk-blue-300);font-size:1.05rem;line-height:1}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--gk-gap);align-items:stretch}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
/* Cards are flex columns so that every card in a row is the same height and the
   trailing link sits on a shared baseline instead of floating mid-card. */
.card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--gk-border);border-radius:var(--gk-radius);
  padding:clamp(1.15rem,2vw,1.5rem);box-shadow:0 1px 0 rgba(15,23,42,.02);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
.card:hover{transform:translateY(-4px);box-shadow:var(--gk-shadow-sm);border-color:var(--gk-blue-100)}
/* Reserve a consistent title block so body copy starts at the same height in
   every card of a row. Without it, one title wrapping to two lines pushes its
   own paragraph down while its neighbours' stay put. 1.15em matches the heading
   line-height above. */
.card h3{margin-bottom:.5rem;min-height:calc(var(--gk-card-title-lines) * 1.15em)}
/* Insights headlines are full sentences and routinely run to three lines. */
.article-card h3{--gk-card-title-lines:3}
.card p{margin:0 0 .65rem}
.icon{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--gk-blue-50);color:var(--gk-blue-700);margin-bottom:.85rem;flex:none
}
.icon svg{width:22px;height:22px}
.card p:last-child{margin-bottom:0}
.card-link{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;margin-top:auto;padding-top:.65rem}
/* Centre, not end. Bottom-aligning tied the trailing button's height to whether
   the section happened to include a .lead, so it landed in a different place in
   every section. Centring is predictable either way and needs no fragile offset
   to clear the eyebrow label. */
.section-head{display:flex;justify-content:space-between;gap:2rem;align-items:center;margin-bottom:1.35rem}
/* The text block grows to fill whatever the trailing button leaves, so a section
   title spans a width comparable to the cards beneath it instead of stopping at
   the body measure and looking undersized against them. */
.section-head>div{flex:1;min-width:0}
.section-head h2{max-width:none}
/* Section-head copy runs the full container width and is justified, so it lines up
   with the heading above it and the cards below. hyphens:auto is not optional at
   this measure — justifying ~115-character lines without hyphenation opens visible
   rivers of whitespace between words. <html lang="en"> is set, so the browser can
   break words correctly. */
.section-head .lead{
  max-width:none;text-align:justify;
  -webkit-hyphens:auto;hyphens:auto
}
.section-head>.btn{flex:none}
.pill-list{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;list-style:none;margin:1.25rem 0 0}
.pill-list li{padding:.4rem .7rem;background:var(--gk-blue-50);border:1px solid var(--gk-blue-100);border-radius:999px;color:#0b4480;font-size:.86rem;font-weight:700}
/* Pills are sometimes anchor jump-links; keep the pill's own colour. */
.pill-list li a{color:inherit;display:block}
.pill-list li:has(a):hover{background:var(--gk-blue-100);border-color:var(--gk-blue-500)}
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--gk-border);border-radius:var(--gk-radius);overflow:hidden;background:white}
/* A flex column with a reserved value height gives the four cells a shared
   baseline; previously each cell's caption started wherever its own value
   happened to end. */
.stat{display:flex;flex-direction:column;gap:.3rem;padding:1.5rem;text-align:center;border-right:1px solid var(--gk-border)}
.stat:last-child{border-right:0}
/* Brought down with the heading scale — at the old 40px these statistics were
   larger than the h2 section titles above them, inverting the hierarchy. */
.stat strong{display:block;font-family:Manrope,sans-serif;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;min-height:1.15em;color:var(--gk-text-900)}
/* auto-fit rather than a hard-coded 6, so changing the number of steps cannot
   leave empty columns. The wider gap also gives the ::after arrow room; at .7rem
   it very nearly touched the cards on either side. */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;counter-reset:step}
.process-step{position:relative;padding:1.1rem;background:#fff;border:1px solid var(--gk-border);border-radius:14px}
.process-step h3{font-size:1.02rem;margin-bottom:.3rem}
.process-step p{margin:0;font-size:.9rem}
/* Inside a dark section the step becomes a translucent panel. Keeping it white
   here would leave .surface-dark's white heading colour on a white card. */
.surface-dark .process-step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.surface-dark .process-step h3{color:#fff}
.surface-dark .process-step p{color:#c7d3e3}
.process-step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--gk-blue-700);color:white;font-weight:800;margin-bottom:.65rem}
.surface-dark .process-step::before{background:var(--gk-blue-500);color:#07111f}
.process-step:not(:last-child)::after{content:"→";position:absolute;right:-.6rem;top:1.2rem;color:var(--gk-blue-500);z-index:2}
.check-list{list-style:none;padding:0;margin:1rem 0 0}
.check-list li{position:relative;padding-left:1.7rem;margin:.55rem 0}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--gk-success);font-weight:900}
.cta{
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
  padding:clamp(1.5rem,4vw,3rem);border-radius:var(--gk-radius-lg);
  background:linear-gradient(135deg,var(--gk-blue-700),var(--gk-navy-800));color:#dbeafe
}
.cta h2,.cta h3{color:white}
/* .cta is align-items:center, but .actions carries a 1.4rem top margin for
   normal flow use. Left in place it pushed the buttons below the optical centre
   on any page that wraps them in .actions, while pages using a bare .btn stayed
   centred — the same band aligned two different ways. */
.cta .actions{margin-top:0}
.breadcrumb{font-size:.9rem;color:var(--gk-text-500);padding-top:1.2rem}
.breadcrumb a{color:var(--gk-text-500)}
.page-hero{padding-block:clamp(2rem,3.5vw,3rem);background:linear-gradient(180deg,#f8fbff,#fff)}
/* Full width and justified, matching .section-head — otherwise a page like
   insights.html shows a narrow ragged hero paragraph directly above a full-width
   justified section paragraph, and the two treatments fight each other. */
.page-hero h1{max-width:none}
.page-hero .lead{
  max-width:none;text-align:justify;
  -webkit-hyphens:auto;hyphens:auto
}
/* stretch, not center: the .visual panel is usually much shorter than the copy
   beside it (~225px against ~430px), and centring left it floating with dead space
   above and below. Stretching makes the panel match the text column's height, and
   .visual keeps align-content:center so its tiles stay vertically centred inside. */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,4vw,3.25rem);align-items:stretch}
/* Contact page intro column, beside the form.
   .card carries height:100% so cards sitting directly in a stretched grid cell come
   out equal height. A card *nested* inside such a cell instead resolves that 100%
   against the full column height, so it overflowed the column by the height of the
   heading and list above it and spilled over the following section — hence the
   height:auto here. The column is then a flex column with the list taking the slack,
   which drops the card's bottom edge onto the form's rather than leaving it floating
   mid-column. The 1.5rem stays as the minimum gap for the stacked mobile layout,
   where there is no slack to absorb. */
.contact-intro{display:flex;flex-direction:column}
.contact-intro .check-list{margin-bottom:auto}
.contact-intro .card{height:auto;margin-top:1.5rem}
.visual{
  min-height:280px;border-radius:var(--gk-radius-lg);padding:1.5rem;
  background:linear-gradient(145deg,var(--gk-navy-950),var(--gk-navy-800));
  color:#e2e8f0;display:grid;align-content:stretch;box-shadow:var(--gk-shadow)
}
/* .feature-split stretches these panels to match the copy beside them, so panel
   contents fill rather than float in the middle with dead space above and below.
   Tile grids divide into equal rows; flow diagrams spread their steps out, which
   gives the connecting arrows room and reads more clearly as a sequence. Scoped to
   a direct child so the hero's .arch-flow, which is not inside .visual, is
   unaffected — it sits in a panel already matched to its column. */
.visual>.arch-flow{align-content:space-between}
.visual-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;grid-auto-rows:1fr}
.visual-item{display:flex;flex-direction:column;justify-content:center;padding:.9rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:14px;font-size:.92rem}
.visual-item strong{color:white;display:block;margin-bottom:.15rem}
.service-block{scroll-margin-top:96px}
.service-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem}
.service-list li{position:relative;padding-left:1.6rem;font-size:.97rem}
.service-list li::before{
  content:"";position:absolute;left:.15rem;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--gk-blue-500)
}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.feature-item{display:flex;flex-direction:column;padding:1.05rem;border:1px solid var(--gk-border);border-radius:14px;background:#fff}
/* Same title reservation as .card. The 12 tiles on healthcare-solution mix one-line
   titles ("Telemedicine") with two-line ones ("AI Clinical Documentation"), which
   left each row's body copy starting at a different height. */
.feature-item h3{font-size:1rem;margin-bottom:.3rem;min-height:calc(var(--gk-card-title-lines) * 1.15em)}
/* text-700 rather than text-500: 8.9:1 on white instead of a borderline 4.7:1. */
.feature-item p{margin:0;font-size:.9rem;color:var(--gk-text-700)}
.article-card .meta{font-size:.85rem;color:var(--gk-text-500);margin-bottom:.6rem}
.tag{display:inline-block;padding:.3rem .55rem;border-radius:999px;background:var(--gk-blue-50);color:var(--gk-blue-700);font-size:.76rem;font-weight:800;margin-bottom:.8rem}
.form{display:grid;gap:1rem}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
label{font-weight:700;color:var(--gk-text-900);font-size:.92rem}
input,textarea,select{width:100%;margin-top:.35rem;border:1px solid #cbd5e1;border-radius:11px;padding:.8rem .9rem;background:#fff;color:var(--gk-text-900)}
textarea{min-height:150px;resize:vertical}
.notice{padding:1rem;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:.9rem}
.footer{background:var(--gk-navy-950);color:#94a3b8;padding-block:4rem 1.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.25rem 3rem;align-items:start}
/* logo-footer.png is a reversed derivative: white wordmark, orange BYTE, the mark's
   navy rebased onto a light blue, letter shadows stripped, and --gk-navy-950 baked
   in as the backdrop. The supplied artwork is drawn for light grounds — its navy
   wordmark measures 1.4:1 here — so it cannot be used as-is. Regenerate the file if
   --gk-navy-950 changes. It is trimmed with no padding so the mark's left edge lands
   on the column edge, in line with the tagline and contact row beneath it. */
.footer-brand{display:block;max-width:330px;margin-bottom:.55rem}
.footer-brand img{display:block;width:100%;height:auto}
/* Live text, not part of the image: baked into the lockup at this column width the
   tagline renders about 8px and cannot be set bolder. As text it stays crisp at any
   zoom and is indexable. The orange is the 2026 logo's #ff6106 — --gk-orange still
   holds the previous logo's value until the palette is retuned. */
/* All three rows of the brand block share the 330px measure so their right edges
   line up under the lockup. The tagline justifies: it only contains spaces either
   side of the two separators, so there is nothing else for the browser to stretch.
   The contact row cannot use justify — that would pull the phone number's own
   digits apart — so it spreads with space-between instead. */
.footer-tagline{max-width:330px;margin:0 0 .9rem;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.5;text-align:justify;-webkit-text-align-last:justify;text-align-last:justify}
.footer-tagline span{color:#ff6106}
.footer-contact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem;max-width:330px;margin:0;font-size:.95rem}
.footer-contact span{color:rgba(255,255,255,.28)}
.footer h3{color:#fff}
/* Headings were 1.05rem/600 against 1rem/400 links — barely a step, so the
   columns read as undifferentiated lists. Small caps separate them properly. */
.footer h4{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 1.1rem}
.footer a{color:#cbd5e1}
.footer a:hover{color:#fff}
.footer ul{list-style:none;padding:0;margin:0;font-size:.95rem;line-height:1.4}
.footer li{margin:0}
.footer li+li{margin-top:.62rem}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(255,255,255,.1);margin-top:2.5rem;padding-top:1.25rem;font-size:.88rem}
@media(max-width:980px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:stretch;padding:1rem;background:#fff;border-bottom:1px solid var(--gk-border);box-shadow:var(--gk-shadow-sm)}
  .nav-links.open{display:flex}.nav-links .btn{width:100%}
  .hero-grid,.feature-split{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .feature-grid{grid-template-columns:repeat(3,1fr)}
  .process{grid-template-columns:repeat(3,1fr)}
  .process-step:nth-child(3)::after{display:none}
  .visual{min-height:0}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  body{font-size:16px}
  .container{width:min(calc(100% - 1.25rem),var(--gk-container))}
  /* Two columns rather than one: collapsing every grid to a single column made
     pages several screens longer than they needed to be. */
  .grid-2,.grid-3,.grid-4,.feature-grid,.stat-band,.visual-grid,.process{grid-template-columns:repeat(2,1fr)}
  .form-row,.arch-row{grid-template-columns:1fr}
  .stat{padding:1rem;border-right:1px solid var(--gk-border);border-bottom:1px solid var(--gk-border)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .process-step::after{display:none!important}
  .section-head,.cta,.footer-bottom{display:block}
  .section-head>.btn{margin-top:1rem}
  /* Equal-width columns cannot both fit a phone once the labels are matched, so
     stack them and let each span the full width instead of overflowing. */
  .actions{grid-auto-flow:row;width:100%}
  .cta .actions{margin-top:1.2rem}
  .footer-grid{grid-template-columns:1fr}
  .visual{min-height:0}
}
@media(max-width:420px){
  .grid-2,.grid-3,.grid-4,.stat-band,.visual-grid,.process{grid-template-columns:1fr}
  .stat{border-right:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}