/* Agile Automate — site.css
   Single stylesheet for all seven pages. Page-specific rules stay in the page.
   See STATIC-SITE-PLAYBOOK.md before adding an eleventh component class.

   PALETTE IS THE BRAND. Sampled from logo.jpg and the 2026 poster: navy,
   brand blue, cyan, white. This replaced a teal system taken from the older
   business card — if you find teal anywhere it is from that generation and is
   now wrong. Check any new colour against the logo before adding it.

   Every colour the site uses is defined below. A var(--x) that is not in this
   block renders as nothing at all — that bug shipped once already, and it is
   what made the case-study initials invisible and the document icons blank. */

:root{
  /* surfaces */
  --paper:#f6f8fc;        /* page background — faintly cool white */
  --card:#ffffff;         /* raised surface */
  --mist:#eef3fa;         /* neutral surface tint — footer, inset panels */

  /* text */
  --ink:#0d1b33;          /* headings — the navy the logo sits on, never pure black */
  --ink-2:#3c4a63;        /* body text */
  --muted:#5d6980;        /* text a reader may skip — and ONLY that.
                             Was #74819a, which is 3.9:1 on white and fails
                             WCAG AA for the small labels that use it. */

  /* structure */
  --line:#dde5f0;         /* borders */
  --line-2:#ecf1f8;       /* internal dividers */
  --line-3:#f4f7fc;       /* faintest rule */

  /* brand — names kept as .teal/.sun in the markup for historical reasons;
     the VALUES are the current blue brand. Renaming the classes would mean
     editing seven pages for no visible gain. */
  --teal:#1f74c4;         /* primary — the dominant blue in the logo */
  --teal-bright:#2eb4d8;  /* the cyan end of the logo gradient */
  --teal-dark:#12508f;    /* primary as text on light — 8.1:1 on white */
  --teal-deep:#0d1b33;    /* the navy field the logo is set on */
  --teal-soft:#e8f2fc;    /* tinted primary background */
  --teal-line:#c3ddf5;    /* border on a tinted surface */
  --charcoal:#0d1b33;     /* the dark band — same navy */
  --charcoal-2:#16294a;
  --amber:#b5790a;        /* review stars — a graphic, not body text */
  --amber-dark:#8f5f07;   /* same, as a fill behind white text (5.4:1) */
  --grad:linear-gradient(120deg,var(--teal-dark) 0%,var(--teal) 48%,var(--teal-bright) 100%);

  /* depth — a hairline plus a wide soft cast, both keyed to the navy */
  --shadow-1:0 1px 2px rgba(13,27,51,.05);
  --shadow-2:0 1px 2px rgba(13,27,51,.05), 0 12px 28px -18px rgba(13,27,51,.34);
  --shadow-3:0 1px 2px rgba(13,27,51,.06), 0 28px 56px -28px rgba(13,27,51,.38);
  --shadow:var(--shadow-2);        /* legacy alias — do not use in new rules */
  --ring:0 0 0 4px rgba(31,116,196,.22);

  /* metrics */
  /* in rem so the frame grows with the large-screen type step at the bottom
     of this file: 1360px at 16px, 1445px at 17px */
  --wrap:85rem;
  --gutter:clamp(1.25rem,3.6vw,3.5rem);
  --radius:16px;
  --radius-sm:10px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk","Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  /* short pages (contact) end on the footer, not on a slab of empty page */
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
::selection{background:var(--teal-soft);color:var(--teal-deep)}

a{color:var(--teal-dark);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--teal-deep)}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* anchors must clear the sticky header */
[id]{scroll-margin-top:92px}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;
  text-wrap:balance;margin:0;color:var(--ink)}
h1{font-size:clamp(2.5rem,5.6vw,4rem);letter-spacing:-.033em}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem);letter-spacing:-.026em}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem);letter-spacing:-.014em;line-height:1.28}
h4{font-size:1rem;letter-spacing:-.01em}
/* Brand headline device: one word in teal against the charcoal, as on the
   banner ("...THAT WORK FOR YOU") and the poster ("SMARTER BUSINESS THROUGH
   AUTOMATION"). One highlight per heading — two stops being an accent. */
.hl{color:var(--teal-dark)}

p{margin:0 0 1.15rem;color:var(--ink-2);max-width:68ch}
p:last-child{margin-bottom:0}
strong,b{color:var(--ink);font-weight:600}
.center p{margin-left:auto;margin-right:auto}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
/* A grid or flex child defaults to min-width:auto, so a long unbreakable value
   can prop its column open. Defensive only — no overflow was observed.
   NOTE: do NOT "fix" overflow with overflow-x:hidden on html/body. It makes
   the other axis compute to auto, which breaks position:sticky on the header. */
.grid > *,.hero .wrap > *,.contact-grid > *{min-width:0}

/* max-width includes the gutter, so the content itself is --wrap wide */
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:calc(40rem + 2 * var(--gutter))}
.grid{display:grid;gap:1.4rem}
/* min(…,100%) lets a column shrink below its minimum on a phone narrower than
   that minimum — without it a 320px column overflows a 320px screen. */
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr))}
.center{text-align:center}

section{padding:5.5rem 0;position:relative}
section.alt{background:var(--card);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Closing CTA band. Light, per brief — weight comes from the ruled texture
   and the deeper heading colour, not from inverting to dark. */
section.dark{
  background:linear-gradient(135deg,var(--teal-soft) 0%,var(--mist) 62%,var(--paper) 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--ink-2)}
section.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(31,116,196,.20) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 70%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 70%)}
section.dark > .wrap{position:relative;z-index:1}
/* Ghost mark — the logo used as texture, never as information. Decorative
   only, and faint enough that no text ever has to compete with it. */
section.dark::after{content:"";position:absolute;right:-50px;bottom:-40px;
  width:340px;height:240px;pointer-events:none;z-index:0;opacity:.07;
  background:url("agile-automate-mark.png") no-repeat center/contain}
@media (max-width:900px){section.dark::after{display:none}}
section.dark h2,section.dark h3{color:var(--teal-deep)}
section.dark p{color:var(--ink-2)}
section.dark h2 + p{margin-top:1rem}

/* ---------- strapline bar ----------
   The PEOPLE | PROCESSES | PLATFORMS | RESULTS rule off the business card.
   Charcoal, full-bleed, thin. The one genuinely dark element on the site,
   because it is a printed brand asset rather than a section. */
/* margin-top:auto pins strap + footer to the bottom of a short page (body is
   a flex column) — on the strap, so the two never separate */
.strap{background:var(--charcoal);color:#fff;margin-top:auto}
.strap .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.9rem 2.4rem;padding-top:1rem;padding-bottom:1rem}
/* reversed mark — the black ink is recoloured white in the asset itself so
   the teal blade still reads against the charcoal */
.strap img{height:26px;width:auto;flex:none;margin-right:.4rem}
.strap span{position:relative;font-family:var(--display);font-weight:600;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:#f1f5f5}
.strap span + span::before{content:"";position:absolute;left:-1.2rem;top:50%;
  transform:translateY(-50%);width:1px;height:14px;background:var(--teal)}
@media (max-width:560px){
  .strap .wrap{gap:.55rem 1.4rem}
  .strap span{font-size:.72rem;letter-spacing:.14em}
  .strap span + span::before{left:-.7rem}
}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;
  background:rgba(246,248,252,.84);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1.5rem;
  padding-top:.72rem;padding-bottom:.72rem}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;
  color:var(--ink);margin-right:auto}
.brand img{height:40px;width:auto}
.brand-word{font-family:var(--display);font-weight:700;font-size:1.08rem;
  letter-spacing:-.022em;line-height:1.1;color:var(--ink)}
.brand-word small{display:block;font-family:var(--sans);font-weight:600;
  font-size:.585rem;letter-spacing:.2em;color:var(--teal-dark);
  text-transform:uppercase;margin-top:.22rem;white-space:nowrap}
/* below this the lockup + strapline + hamburger stop fitting on one row */
@media (max-width:430px){.brand-word small{display:none}}

.nav{display:flex;gap:.3rem;align-items:center}
.nav a{position:relative;color:var(--ink-2);text-decoration:none;font-weight:500;
  font-size:.93rem;padding:.5rem .72rem;border-radius:8px;
  transition:color .16s ease,background-color .16s ease}
.nav a:hover{color:var(--ink);background:rgba(31,116,196,.09)}
.nav a.active{color:var(--teal-dark);font-weight:600}
.nav a.active::after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:.24rem;
  height:2px;border-radius:2px;background:var(--grad)}
.nav a.btn{margin-left:.6rem}
.nav a.btn::after{display:none}
/* `.nav a` is (0,1,1) and beats `.btn`'s own (0,1,0) white — without this the
   Contact button renders dark ink on the blue gradient and is unreadable.
   `.nav a.active` is (0,2,1), so the active state needs (0,3,1) to clear it.
   Playbook section 9, "Specificity beats intent": scope, never !important. */
.nav a.btn,
.nav a.btn:hover,
.nav a.btn.active{color:#fff}
/* Admin login: a lock and a thin rule set it apart from the page links */
.nav a.nav-admin{display:inline-flex;align-items:center;gap:.35rem;margin-left:.35rem;
  padding-left:1rem;border-left:1px solid var(--line);border-radius:0}
.nav a.nav-admin svg{flex:none}
.nav-toggle{display:none}

/* The full row (lockup + strapline + 7 links + Admin + Contact) needs ~1130px.
   Collapse to the menu button before that, or the brand text runs into Home. */
@media (max-width:1140px){
  /* THE HAMBURGER BUG. backdrop-filter on the header makes the header the
     containing block for every position:fixed element inside it — that is in
     the spec, not a browser quirk. The menu below is fixed with inset:64px 0 0,
     meant as "the screen, below the header"; with the blur on, it became "the
     HEADER, below 64px", which is a strip about 0px tall. The button toggled
     the menu perfectly and the menu opened into nothing. Solid background on
     the screens that have the menu; desktop keeps the frosted glass. */
  .site-head{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
  .nav{position:fixed;inset:64px 0 0 0;background:var(--card);flex-direction:column;
    align-items:stretch;padding:1.6rem 1.5rem;gap:.3rem;transform:translateX(100%);
    visibility:hidden;overscroll-behavior:contain;
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s;overflow-y:auto}
  /* hidden when closed so the off-screen panel can't be tabbed into or widen
     the page sideways on mobile browsers */
  .nav.open{transform:translateX(0);visibility:visible;
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s}
  .nav a{font-size:1.1rem;padding:.85rem .9rem}
  .nav a.active::after{display:none}
  .nav a.btn{margin:.8rem 0 0;justify-content:center}
  .nav a.nav-admin{margin:.5rem 0 0;padding-left:.9rem;border-left:0;
    border-top:1px solid var(--line);border-radius:0;padding-top:1.1rem}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
    background:var(--card);cursor:pointer}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:"";display:block;width:18px;height:2px;border-radius:2px;
    background:var(--ink);position:relative}
  .nav-toggle span::before{position:absolute;top:-6px}
  .nav-toggle span::after{position:absolute;top:6px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.35rem;border-radius:999px;font-weight:600;font-size:.93rem;
  letter-spacing:-.005em;text-decoration:none;border:1px solid transparent;
  cursor:pointer;background:var(--ink);color:#fff;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,
             border-color .16s ease,color .16s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);color:#fff}
.btn:active{transform:translateY(0)}

/* .teal — the primary call to action. */
.btn.teal{background:var(--grad);box-shadow:0 8px 20px -10px rgba(31,116,196,.72)}
.btn.teal:hover{box-shadow:0 14px 28px -12px rgba(31,116,196,.78)}

/* .sun — kept for the markup that already uses it; it is the charcoal
   secondary now, not an amber. Renaming it would mean editing seven files. */
.btn.sun{background:var(--charcoal)}
.btn.sun:hover{background:var(--charcoal-2);box-shadow:var(--shadow-3)}

.btn.ghost{background:var(--card);border-color:var(--line);color:var(--ink);
  box-shadow:var(--shadow-1)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal-dark);
  background:var(--card);box-shadow:var(--shadow-2)}

.btn.lg{padding:.92rem 1.75rem;font-size:1rem}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- section head / eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;
  font-size:.735rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal-dark);margin:0 0 .9rem;max-width:none}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;
  background:var(--grad);flex:none}
.center .eyebrow{justify-content:center}

.sec-head{margin-bottom:3rem;max-width:64ch}
.sec-head h2{max-width:20ch}
.sec-head.center h2{margin-left:auto;margin-right:auto}
.sec-head p{margin-top:1rem;font-size:1.05rem}

/* ---------- banner / hero ---------- */
.banner{position:relative;overflow:hidden;padding:4.2rem 0 3.6rem;
  background:linear-gradient(180deg,var(--teal-soft) 0%,var(--paper) 92%);
  border-bottom:1px solid var(--line)}
.banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(31,116,196,.22) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 75%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 75%)}
.banner .wrap{position:relative;z-index:1}
.banner h1{color:var(--ink);max-width:16ch}
.banner p{color:var(--ink-2);font-size:1.1rem;margin-top:1.1rem;max-width:62ch}

.hero{position:relative;overflow:hidden;padding:5rem 0 4.4rem}
.hero::before{content:"";position:absolute;inset:-30% -12% auto;height:600px;z-index:0;
  background:
    radial-gradient(52% 52% at 76% 2%,rgba(46,180,216,.28),transparent 68%),
    radial-gradient(42% 42% at 32% 16%,rgba(18,80,143,.16),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(13,27,51,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(13,27,51,.05) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 28%,#000,transparent 78%);
  mask-image:radial-gradient(70% 62% at 50% 28%,#000,transparent 78%)}
/* The mark, oversized and bled off the right edge. .hero is overflow:hidden,
   so it crops cleanly; it sits below .hero .wrap (z-index 1). */
.hero-mark{position:absolute;right:-110px;top:50%;transform:translateY(-50%);
  width:660px;height:466px;pointer-events:none;z-index:0;opacity:.055;
  background:url("agile-automate-mark.png") no-repeat center/contain}
@media (max-width:1100px){.hero-mark{display:none}}

.hero .wrap{position:relative;z-index:1;display:grid;
  grid-template-columns:1.12fr .88fr;gap:3rem;align-items:center}
.hero h1{color:var(--ink);max-width:14ch}
.hero p.lead{color:var(--ink-2);font-size:1.16rem;line-height:1.6;
  margin-top:1.3rem;max-width:54ch}
.hero-actions{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:1.9rem}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:2.4rem}}

.hero-panel{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:.4rem 1.7rem;display:grid;
  box-shadow:var(--shadow-3);position:relative;overflow:hidden}
.hero-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad)}
.hero-stat{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.2rem;padding:1.05rem 0;border-bottom:1px solid var(--line-2)}
.hero-stat:last-child{border-bottom:none}
.hero-stat span{color:var(--muted);font-size:.845rem;line-height:1.45;max-width:24ch}
.hero-stat b{color:var(--ink);font-family:var(--display);font-size:1.22rem;
  letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}

.badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.badges span{font-size:.775rem;font-weight:600;color:var(--ink-2);
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:.36rem .85rem;box-shadow:var(--shadow-1)}

/* ---------- cards ---------- */
.card{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);
  border-color:var(--teal-line)}
.card-body{display:flex;flex-direction:column;flex:1;padding:1.6rem}
.card-body .btn{margin-top:auto;align-self:flex-start}
.card-body h3{margin-bottom:.55rem}
.card-body p{margin-bottom:1.2rem;font-size:.96rem}

/* feature (optional icon + heading + text) */
.feat{display:flex;flex-direction:column;gap:.65rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.55rem;box-shadow:var(--shadow-1);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);
  border-color:var(--teal-line)}
.feat .ico{width:46px;height:46px;border-radius:12px;background:var(--teal-soft);
  color:var(--teal-dark);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.02rem;font-weight:700;flex:none;
  font-variant-numeric:tabular-nums;border:1px solid var(--teal-line)}
.feat h3{font-size:1.1rem}
.feat p{font-size:.945rem;margin-bottom:0;max-width:44ch}

/* note / callout */
.note{background:var(--teal-soft);border:1px solid var(--teal-line);
  border-left:3px solid var(--teal);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:1.1rem 1.35rem;font-size:.95rem;color:var(--ink-2)}
.note p:last-child{margin-bottom:0}

/* quote / testimonial */
.quote{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:2rem;
  box-shadow:var(--shadow-1);position:relative;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);
  border-color:var(--teal-line)}
.quote blockquote{margin:0 0 1.4rem;font-family:var(--display);
  font-size:1.1rem;font-weight:500;color:var(--ink);line-height:1.5;
  letter-spacing:-.012em;flex:1}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
/* A second passage from further down the same letter. It keeps its own quote
   marks because the two are NOT continuous in the original — running them
   together inside one pair would claim the writer said them in one breath.
   flex:none because only the first may grow; two growing items would stretch
   to equal heights and tear the card apart. */
.quote blockquote + blockquote{flex:none;font-size:.98rem;color:var(--ink-2)}
.quote-by{display:flex;align-items:center;gap:.8rem;margin-top:auto;
  padding-top:1.2rem;border-top:1px solid var(--line-2)}
.quote-avatar{width:44px;height:44px;border-radius:50%;background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.92rem;flex:none;
  letter-spacing:.02em}
.quote-by b{display:block;color:var(--ink);font-size:.94rem;line-height:1.3}
.quote-by span{display:block;color:var(--muted);font-size:.83rem;line-height:1.4}

/* logo / platform strip */
.platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  gap:1rem}
.platform{display:flex;align-items:center;gap:.9rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.05rem 1.15rem;
  box-shadow:var(--shadow-1);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.platform:hover{transform:translateY(-2px);border-color:var(--teal-line);
  box-shadow:var(--shadow-2)}
/* logo tile — the vendor's real mark on white, so every brand colour reads.
   alt="" on the img: the name sits right beside it, a screen reader would
   otherwise say it twice. */
.platform .mono{width:48px;height:48px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.platform .mono img{width:26px;height:26px;object-fit:contain}
/* cPanel's mark is a wordmark, not a square glyph — give it the tile's width */
.platform .mono img[src*="cpanel"]{width:38px;height:38px}
.platform span.mono{display:flex}
.platform b{font-family:var(--display);color:var(--ink);font-size:1rem;
  display:block;letter-spacing:-.015em}
.platform span{color:var(--muted);font-size:.8rem;line-height:1.4;display:block}

/* case study list rows */
.case-row{display:grid;grid-template-columns:1fr;gap:1.6rem;padding:3rem 0;
  border-bottom:1px solid var(--line)}
.case-row:first-child{padding-top:0}
.case-row:last-child{border-bottom:none;padding-bottom:0}
.case-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-dark);
  background:var(--teal-soft);border:1px solid var(--teal-line);padding:.32rem .75rem;
  border-radius:999px;margin-bottom:1rem}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
  gap:1.2rem;margin:1.6rem 0;padding:1.4rem 1.5rem;background:var(--mist);
  border:1px solid var(--line);border-radius:var(--radius)}
.case-facts div b{display:block;font-family:var(--display);color:var(--ink);
  font-size:1.14rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.case-facts div span{color:var(--muted);font-size:.8rem;line-height:1.4;display:block;
  margin-top:.15rem}
.case-list{margin:0 0 1.4rem;padding:0;list-style:none;display:grid;gap:.7rem}
.case-list li{padding-left:1.55rem;position:relative;font-size:.96rem;color:var(--ink-2)}
.case-list li::before{content:"";position:absolute;left:0;top:.62rem;width:7px;height:7px;
  border-radius:50%;background:var(--grad)}
section.dark .case-list li::before{background:var(--teal)}

/* ---------- forms ---------- */
.form-grid{display:grid;gap:1.05rem}
.form-grid.two{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
label{display:block;font-size:.83rem;font-weight:600;color:var(--ink-2);
  margin-bottom:.42rem;letter-spacing:.005em}
input,textarea,select{width:100%;padding:.78rem .95rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;
  font-size:.96rem;transition:border-color .16s ease,box-shadow .16s ease}
input::placeholder,textarea::placeholder{color:#98a4bb}
input:hover,textarea:hover,select:hover{border-color:#c4d2e6}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--teal);
  box-shadow:var(--ring)}
textarea{resize:vertical;min-height:126px;line-height:1.6}

/* A form dropped into the CTA band sits on its own white panel, so the fields
   never fight the tinted background behind them. Same treatment as the
   standalone panel on the contact page. */
section.dark form,.form-panel{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-3)}

.form-msg{margin-top:1.05rem;padding:.9rem 1.05rem;border-radius:var(--radius-sm);
  font-size:.92rem;display:none;line-height:1.55}
.form-msg.show{display:block}
.form-msg.ok{background:var(--teal-soft);color:var(--teal-deep);border:1px solid var(--teal-line)}
.form-msg.err{background:#fdecea;color:#96271f;border:1px solid #f4c9c5}
/* Scoped past section.dark p — see playbook section 9, "Specificity beats
   intent". This exact rule pair once rendered white-on-white. */
section.dark .form-msg{color:inherit}

/* ---------- footer ---------- */
.site-foot{background:var(--mist);color:var(--ink-2);padding:4rem 0 1.8rem;
  border-top:1px solid var(--line)}
.site-foot a{color:var(--ink-2);text-decoration:none;transition:color .16s ease}
.site-foot a:hover{color:var(--teal-dark)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem;
  padding-bottom:2.6rem;border-bottom:1px solid var(--line)}
.foot-grid h4{color:var(--ink);font-family:var(--display);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.05rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.9rem}
.foot-brand img{height:82px;width:auto;margin-bottom:1.1rem}
.foot-brand p{color:var(--muted);font-size:.88rem;max-width:34ch;line-height:1.6}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  padding-top:1.6rem;font-size:.8rem;color:var(--muted)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------- brand film ----------
   The 16:9 box is declared HERE, not left to the video, so the page reserves
   the space before anything loads and never jumps as it arrives. Black behind
   it because the film is on black — any letterboxing then disappears into the
   frame instead of showing as grey bars. */
.video-band{padding:3.4rem 0}
.video-frame{max-width:760px;margin:0 auto;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;background:#000;
  box-shadow:var(--shadow-3)}
.video-frame video{display:block;width:100%;height:100%;border:0}

/* ---------- motion ----------
   Content lifts in as it reaches the viewport, and the hero figures count up.
   BOTH CLASSES ARE PUT ON BY forms.js, never written into the HTML. That is
   deliberate: .reveal starts at opacity 0, so if it shipped in the markup a
   visitor with JavaScript off — or a crawler that does not run it — would be
   handed a blank page. Added by script means the page is fully visible by
   default and the movement is only ever an addition to it. */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;
    transition-duration:.01ms!important}
  .card:hover,.feat:hover,.quote:hover,.platform:hover,.btn:hover{transform:none}
  /* forms.js already skips the whole thing for these visitors. This is the
     second lock: even if the class somehow arrives, nothing is ever hidden. */
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
}

/* ---------- small screens ----------
   These blocks override rules above them. Per playbook section 9, equal
   specificity means source order wins — nothing below this point may be
   re-declared further up the file. */
@media (max-width:640px){
  section{padding:3.8rem 0}
  .sec-head{margin-bottom:2.2rem}
  .hero{padding:3.2rem 0 3rem}
  .banner{padding:3rem 0 2.6rem}
  .hero-panel{padding:.3rem 1.3rem}
  /* stack the label above the figure so the nowrap value never has to share
     a line it cannot fit on */
  .hero-stat{flex-direction:column;align-items:flex-start;gap:.15rem}
  .hero-stat span{max-width:none}
  .hero-stat b{font-size:1.35rem}
  .quote,.feat{padding:1.4rem}
  section.dark form,.form-panel{padding:1.4rem}
  .hero-actions .btn{flex:1 1 100%}
  /* 16px gutter on phones — 24px wastes a tenth of a small screen */
  :root{--gutter:1rem}
  /* long labels ("See every service in detail →") wrap instead of running
     off the edge */
  .btn{white-space:normal;text-align:center}
  /* iOS zooms the page on focus when a field's text is under 16px */
  input,textarea,select{font-size:16px}
  .foot-brand img{height:64px}
}

/* ---------- desktop ----------
   The pages were written as one reading column, which on a laptop or monitor
   leaves the right half of every section empty. From 1024px up, text-led
   blocks become editorial two-column layouts: the heading holds the left,
   the supporting copy holds the right. Nothing here changes the markup order,
   so the phone layout above is untouched. */
@media (min-width:1024px){
  section{padding:6.5rem 0}
  h1{font-size:clamp(3rem,4.6vw,4.75rem)}
  h2{font-size:clamp(2.1rem,2.9vw,3rem)}

  /* page banner: eyebrow + headline left, intro paragraph right */
  .banner{padding:5.5rem 0 4.8rem}
  .banner .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    column-gap:clamp(3rem,6vw,7rem);align-items:end}
  .banner .eyebrow{grid-column:1}
  .banner h1{grid-column:1;max-width:18ch}
  .banner .wrap > p:not(.eyebrow){grid-column:2;grid-row:1 / span 2;align-self:end;
    margin:0;padding-left:1.6rem;border-left:2px solid var(--teal-line)}

  /* section heads with a supporting paragraph split the same way. A head in a
     narrow column (the review form) keeps the stacked layout. */
  .sec-head:not(.center){max-width:none}
  .wrap:not(.narrow) > .sec-head:not(.center):has(> p:not(.eyebrow)){display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    column-gap:clamp(3rem,6vw,7rem);align-items:end}
  .sec-head:not(.center) > .eyebrow,
  .sec-head:not(.center) > h2{grid-column:1}
  .sec-head:not(.center) h2{max-width:22ch}
  .sec-head:not(.center) > p:not(.eyebrow){grid-column:2;grid-row:1 / span 2;
    align-self:end;margin:0}
  .narrow .sec-head > p:not(.eyebrow){margin-top:1rem}

  .hero{padding:6.5rem 0 6rem}
  .hero .wrap{gap:clamp(3rem,6vw,7rem)}
  .hero h1{max-width:13ch}
  .hero p.lead{font-size:1.24rem}
  .hero-panel{padding:.6rem 2.1rem}
  .hero-stat{padding:1.3rem 0}
  .hero-stat b{font-size:1.4rem}

  .grid{gap:1.6rem}
  .feat{padding:1.9rem}
  .quote{padding:2.4rem}
  .quote blockquote{font-size:1.18rem}

  .foot-grid{gap:3.5rem}
}

/* Big monitors: step the whole rem scale up so type and spacing keep their
   proportion to the wider frame instead of looking marooned in it. */
@media (min-width:1600px){html{font-size:17px}}

/* ---------- desktop scale ----------
   REMOVED, deliberately. This block used to shrink the whole site to 75% on
   any PC with a mouse:

       @media (min-width:1141px) and (hover:hover) and (pointer:fine){
         html{zoom:.75}
         body{min-height:calc(100vh / .75)}
       }

   That is what made every page look squeezed into the middle of a desktop
   screen. zoom does not just shrink the type — it hands the layout MORE css
   pixels and then draws the result smaller, so the 85rem frame came out about
   1020px wide on a 1920px monitor, leaving roughly 450px of dead margin each
   side and type at three-quarter size. The admin page suffered worst, because
   it loads this stylesheet too.

   To bring it back, paste the block above in again — but change the frame
   below rather than the zoom, because this is the size everything else in
   this file was designed against. */

/* Very large monitors. 85rem in the middle of a 2560px screen still reads as a
   column with the rest of the screen switched off, so the frame steps up once
   more. Safe, because prose carries its own cap: .sec-head is held to 64ch, so
   a wider frame gives the GRIDS more room without ever handing a sentence a
   longer line to be read across. */
@media (min-width:1900px){:root{--wrap:96rem}}