/* ============================================================
   Cloud Above — website design template / wireframe
   Sections: contact bar · nav · hero · services · stats
             portfolio · pricing · testimonial · CTA · footer
   ============================================================ */

:root{
  --red:#ff1f3d;
  --red-soft:#ff5a72;
  --ink:#0d0f1c;
  --ink-2:#1b1f38;
  /* Was #8b90a6, which is 3.16:1 on white and 2.98:1 on --bg-2 - under the 4.5:1
     WCAG AA floor for body text, and this token carries almost all of it
     (.lead, .hero p, .card p, .sec-head p). #6b7186 is the lightest gray that
     clears AA on both backgrounds, so it buys legibility without flattening the
     contrast between body copy and headings. */
  --muted:#6b7186;
  --line:#e9eaf0;
  --bg:#ffffff;
  --bg-2:#f7f8fb;
  --radius-lg:28px;
  --radius-md:20px;
  --shadow:0 24px 60px -30px rgba(20,24,60,.35);
  --shadow-soft:0 18px 40px -28px rgba(20,24,60,.45);
  --font:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:600}

.wrap{width:min(1240px,92vw);margin-inline:auto}
.eyebrow{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);font-weight:600;margin:0 0 14px;
}
.lead{color:var(--muted);font-size:17px;margin:0}

/* ---------- top contact header ----------
   A utility rail, not a second navigation. Everything in here stays quieter
   than the nav beneath it and the hero CTA beneath that, so the page has one
   obvious primary action instead of three competing for the same attention. */
.contactbar{
  border-bottom:1px solid var(--line);
  font-size:13.5px;
  background:#fff;
}
/* center, not stretch: stretch is what made the CTA a full-height slab. */
.contactbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.cb-left{display:flex;align-items:center;gap:0}
.cb-item{
  display:flex;align-items:center;gap:8px;
  padding:13px 26px 13px 0;color:var(--muted);
}
.cb-item + .cb-item{border-left:1px solid var(--line);padding-left:26px}
.cb-item b{color:var(--ink);font-weight:600}

/* Nothing in this bar is red at rest - red was being spent on a phone glyph and
   meant nothing. Here it means one thing only: you are pointing at this. Same
   rule as the arc over the social marks and the fill on the CTA.

   The icon and the value light together so the pair reads as one control.
   :has() keeps that scoped to the link, so pointing at the static "Phone:"
   label does not imply something clickable. Without :has() the value still
   highlights and only the icon sits it out. */
.cb-item svg{color:var(--muted);transition:color .18s ease}
.cb-item a{transition:color .18s ease}
.cb-item a:hover{color:var(--red)}
.cb-item:has(a:hover) svg{color:var(--red)}

.cb-right{display:flex;align-items:center;gap:2px}

/* Seven accounts in bordered cells read as a fence, and a 14px glyph adrift in
   a 48px cell reads as an accident. The marks stand on their own instead. */
/* padding-top rather than pure centring: it drops the glyph a few pixels and
   leaves room for the arc to sit clear of it instead of resting on its head. */
.social{
  position:relative;
  width:34px;height:40px;
  display:grid;place-items:center;
  padding-top:8px;box-sizing:border-box;
  color:var(--muted);
  transition:color .2s ease;
}
.social svg{width:16px;height:16px}
.social:hover{color:var(--ink)}

/* The wordmark is a circle with a red arc sweeping around it - cloud, above.
   That arc is the one shape nobody else owns, so it becomes the hover mark:
   it rises over whatever you are pointing at. Nothing else in this bar is red.

   Drawn as a full circle with only the top border colored. A short box with a
   large border-radius does NOT give an arc - the corners clamp and it renders
   as a bracket. Only a real circle gives a real curve. */
.social::after{
  content:"";position:absolute;top:1px;left:50%;
  width:24px;height:24px;border-radius:50%;
  border:1.25px solid transparent;border-top-color:var(--red);
  transform:translateX(-50%) rotate(-28deg) scale(.7);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.social:hover::after{opacity:1;transform:translateX(-50%) rotate(0deg) scale(1)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
.logo{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.menu{display:flex;align-items:center;gap:34px}
.menu > li{position:relative}
.menu > li > a{
  display:flex;align-items:center;gap:7px;padding:32px 0;
  font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.menu > li > a::after{
  content:"";position:absolute;left:0;bottom:26px;height:2px;width:0;background:var(--red);
  transition:width .25s ease;
}
.menu > li:hover > a::after{width:100%}
.caret{transition:transform .25s}
.menu > li:hover .caret{transform:rotate(180deg);color:var(--red)}

.dropdown{
  position:absolute;top:100%;left:-24px;min-width:222px;
  background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);
  padding:14px 0;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.22s ease;
}
.menu > li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:9px 26px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:#4b5068;transition:.18s;
}
.dropdown a:hover{color:var(--red);padding-left:32px}

.nav-cta{position:relative;display:flex;align-items:center}
/* option 2 — squared outline in place of the red ring */
.nav-cta{
  padding:13px 24px;border:1.5px solid var(--line);border-radius:999px;
  transition:border-color .25s,background .25s,color .25s;
}
.nav-cta span{
  font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.nav-cta:hover{background:var(--red);border-color:var(--red);color:#fff}
.burger{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:70px 0 110px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{
  font-size:clamp(38px,5.4vw,72px);font-weight:600;letter-spacing:-.035em;margin-bottom:28px;
}
.hero p{max-width:460px;font-size:18px;color:var(--muted)}
.hero-art{position:relative;min-height:460px}

/* option 2 — the hero CTA is a flat bar, no red disc behind it */
.btn-start{
  display:inline-flex;align-items:center;gap:26px;margin-top:44px;
  padding:22px 34px;background:var(--red);color:#fff;border-radius:999px;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:background .28s,transform .28s cubic-bezier(.2,.8,.2,1);
}
.btn-start:hover{background:var(--ink);transform:translateY(-3px)}
.btn-start .arrow{width:52px;height:10px;color:currentColor;transition:transform .28s}
.btn-start:hover .arrow{transform:translateX(6px)}

.scrolldown{
  position:absolute;left:max(4vw,24px);bottom:56px;width:70px;height:70px;border-radius:50%;
  background:var(--ink-2);color:#fff;display:grid;place-items:center;
  box-shadow:var(--shadow);animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* decorative confetti in hero art */
.deco{position:absolute;pointer-events:none}
.deco.dots{
  width:64px;height:52px;
  background-image:radial-gradient(currentColor 1.6px,transparent 1.7px);
  background-size:11px 11px;color:#c9ccd8;
}
.blob-circle{position:absolute;border-radius:50%;background:#f2f3f7}

/* ---------- section shell ---------- */
section{position:relative}
.sec{padding:110px 0}
.sec-head{max-width:640px;margin-bottom:60px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px)}
.sec-head p{margin-top:18px}

/* ---------- rounded service cards ---------- */
.services{background:linear-gradient(180deg,#fff 0%,#f6f7fb 55%,#fff 100%)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.card{
  background:#fff;border-radius:var(--radius-lg);padding:38px 34px 30px;
  box-shadow:var(--shadow);border:1px solid rgba(233,234,240,.9);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.card:hover{transform:translateY(-10px);box-shadow:0 34px 70px -30px rgba(20,24,60,.45)}
.card-icon{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--red-soft),var(--red));
  box-shadow:0 14px 26px -10px rgba(255,31,61,.75);
}
.card h3{font-size:21px;margin:30px 0 14px}
.card p{color:var(--muted);font-size:15.5px;margin:0;min-height:78px}
.card-go{
  width:44px;height:44px;border-radius:50%;background:var(--bg-2);color:var(--ink);
  display:grid;place-items:center;margin-top:26px;transition:.28s;
}
.card:hover .card-go{background:var(--red);color:#fff;transform:translateX(6px)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{
  background:var(--bg-2);border-radius:var(--radius-md);padding:32px 28px;
  border:1px solid var(--line);
}
.stat b{display:block;font-size:40px;font-weight:600;letter-spacing:-.03em}
.stat b i{color:var(--red);font-style:normal}
.stat span{color:var(--muted);font-size:14px}

/* ---------- portfolio ---------- */
.folio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.folio-item{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:var(--bg-2);border:1px solid var(--line);aspect-ratio:4/3;
}
.folio-item.tall{grid-row:span 2;aspect-ratio:4/6.4}
.folio-item .ph{position:absolute;inset:0;display:grid;place-items:center}
.folio-meta{
  position:absolute;left:0;right:0;bottom:0;padding:22px 26px;
  background:linear-gradient(0deg,rgba(13,15,28,.86),transparent);
  color:#fff;transform:translateY(12px);opacity:0;transition:.3s;
}
.folio-item:hover .folio-meta{transform:translateY(0);opacity:1}
.folio-meta small{color:#ffb3bf;letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.folio-meta h4{font-size:19px;margin-top:4px;font-weight:500}

/* ---------- pricing ---------- */
/* .services dissolves into white at both ends; this was a flat block, so it met
   the white above and the dark contact card below on hard lines. Solid through
   the middle so the section still reads as its own zone, with the fade confined
   to the 110px padding either side, clear of the content. */
.pricing{
  background:linear-gradient(180deg,
    #fff 0,
    var(--bg-2) 90px,
    var(--bg-2) calc(100% - 90px),
    #fff 100%);
}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start}
.price{
  background:#fff;border-radius:var(--radius-lg);padding:38px 34px;
  border:1px solid var(--line);box-shadow:var(--shadow-soft);position:relative;
}
.price.featured{
  background:var(--ink);color:#fff;border-color:transparent;transform:translateY(-14px);
  box-shadow:0 40px 70px -34px rgba(13,15,28,.8);
}
.price.featured .lead,.price.featured li{color:#a9adc2}
.tag{
  position:absolute;top:26px;right:26px;background:var(--red);color:#fff;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
}
.price h3{font-size:17px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.amount{font-size:48px;font-weight:600;letter-spacing:-.03em;margin:18px 0 4px}
.amount small{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:0}
.price ul{margin:26px 0 32px;display:grid;gap:12px;color:var(--muted);font-size:15px}
.price li{display:flex;gap:10px;align-items:flex-start}
.price li svg{flex:none;margin-top:5px;color:var(--red)}
.btn-outline{
  display:block;text-align:center;padding:15px;border-radius:999px;
  border:1.5px solid var(--line);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;transition:.25s;
}
.btn-outline:hover{background:var(--red);border-color:var(--red);color:#fff}
.price.featured .btn-outline{border-color:rgba(255,255,255,.24);color:#fff}

/* ---------- testimonial ---------- */
.quote-box{
  border-radius:var(--radius-lg);border:1px solid var(--line);padding:64px 56px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;background:#fff;
}
.quote-box blockquote{
  margin:0;font-size:clamp(20px,2.5vw,30px);line-height:1.5;letter-spacing:-.02em;max-width:820px;
}
.who{display:flex;align-items:center;gap:16px;margin-top:36px}
.avatar{width:54px;height:54px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted)}
.who b{font-weight:600}
.who span{display:block;color:var(--muted);font-size:14px}

/* ---------- CTA ---------- */
.cta{
  background:var(--ink);color:#fff;border-radius:var(--radius-lg);
  padding:64px 56px;display:flex;align-items:center;justify-content:space-between;
  gap:36px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.cta h2{font-size:clamp(26px,3.2vw,40px);max-width:560px}
.cta p{color:#a9adc2;margin:14px 0 0;max-width:460px}
.btn-solid{
  display:inline-flex;align-items:center;gap:14px;background:var(--red);color:#fff;
  padding:20px 34px;border-radius:999px;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;transition:.25s;white-space:nowrap;
}
.btn-solid:hover{background:#fff;color:var(--ink)}

/* ---------- contact form (lives inside the CTA band) ---------- */
/* The band was a single centered row. With the form beside it, it becomes a
   two-column grid and the copy stops being vertically centered against a much
   taller neighbour. */
/* stretch, not start: the form column is ~290px taller than the copy, and with
   align-items:start that difference became an empty dark void filling 44% of
   the panel's left side. Stretching lets the copy column own the full height so
   the phone and email can anchor its foot. */
.cta-split{
  display:grid;grid-template-columns:1fr minmax(0,460px);
  align-items:stretch;gap:56px;padding:56px;
}
/* align-items:flex-start so the CTA keeps its intrinsic width rather than being
   stretched the width of the column by the flex default. */
.cta-copy{display:flex;flex-direction:column;align-items:flex-start}
.cta-copy h2{max-width:none}
.cta-copy p{max-width:42ch}
.cta-copy .btn-solid{margin-top:32px}

/* margin-top:auto drops these to the foot of the column, so the panel reads
   heading top-left / details bottom-left / form right instead of trailing off
   into empty dark. On mobile the column is content-height, so auto has no free
   space to consume and the padding-top is all that applies. */
.cta-direct{margin:0;padding-top:44px;margin-top:auto;display:grid;gap:12px}
.cta-direct li{display:flex;align-items:center;gap:11px;color:#a9adc2;font-size:15px}
.cta-direct svg{color:var(--red);flex:none}
.cta-direct a{transition:color .2s}
.cta-direct a:hover{color:#fff}

/* White card on the dark band. Text color is reset to --ink because the band
   sets #fff and every field inside would inherit it. */
.cform{
  background:#fff;color:var(--ink);border-radius:var(--radius-md);
  padding:32px;display:grid;gap:16px;
}
.cform h3{font-size:19px;margin-bottom:2px}

.cf-row{display:grid;gap:7px}
.cf-row label{font-size:13.5px;font-weight:500;color:var(--ink)}
.cf-row label span[aria-hidden]{color:var(--red)}
.cf-opt{color:var(--muted);font-weight:400;font-size:12.5px}
.cf-row input,.cf-row textarea{
  font-family:inherit;font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2);transition:border-color .18s,background .18s;
  width:100%;
}
.cf-row textarea{resize:vertical;min-height:96px}
.cf-row input:focus,.cf-row textarea:focus{
  outline:none;border-color:var(--ink);background:#fff;
}
/* Invalid only after the field has been marked, never while someone is still
   part-way through typing their address. */
.cf-row input[aria-invalid="true"],.cf-row textarea[aria-invalid="true"]{
  border-color:var(--red);background:#fff;
}
.cf-err{margin:0;color:var(--red);font-size:12.5px}

/* SMS consent. The disclosure has to stay legible - carriers reject consent
   language that is hidden, greyed out or smaller than the surrounding text. */
.cf-consent{gap:9px}
.cf-check{
  display:grid;grid-template-columns:auto 1fr;gap:11px;
  align-items:start;cursor:pointer;font-weight:400;
}
.cf-check input{
  width:17px;height:17px;margin:2px 0 0;flex:none;
  accent-color:var(--red);cursor:pointer;
}
.cf-check span{font-size:13px;line-height:1.5;color:var(--ink)}
.cf-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.cf-note a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.cf-check input[aria-invalid="true"]{outline:2px solid var(--red);outline-offset:2px}

/* Footer legal links - separated by a middot without needing extra markup. */
.foot-legal a{transition:color .2s}
.foot-legal a:hover{color:var(--red)}
.foot-legal a + a::before{content:"·";color:var(--muted);margin:0 8px;display:inline-block}

/* Off-screen rather than display:none - some bots skip anything not rendered. */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-turnstile-slot:empty{display:none}

.cf-submit{
  margin-top:4px;border:0;cursor:pointer;font-family:inherit;
  background:var(--ink);color:#fff;padding:16px 28px;border-radius:999px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:background .22s,opacity .22s;
}
.cf-submit:hover{background:var(--red)}
.cf-submit[disabled]{opacity:.55;cursor:progress}

.cf-status{margin:0;font-size:14px;line-height:1.5}
.cf-status.is-ok{color:#0d7a4a}
.cf-status.is-bad{color:var(--red)}
.cf-status-note{color:var(--muted)}

@media (max-width:900px){
  .cta-split{grid-template-columns:1fr;gap:38px;padding:44px 32px}
  .cta-copy p{max-width:none}
}
@media (max-width:520px){
  /* Tighter chrome so the form field width goes to the fields, not to three
     nested layers of padding. */
  .cta-split{padding:30px 18px}
  .cform{padding:22px 18px}

  /* Both primary CTAs are wider than a phone: 397px for the hero button and
     337px for this one. .btn-solid is white-space:nowrap so it could not even
     shrink - the band's overflow:hidden was quietly clipping it. Full width and
     centered is the honest mobile treatment, and it stops the label wrapping
     into a lopsided two-line pill. */
  .btn-start,.cta-copy .btn-solid{
    width:100%;justify-content:center;text-align:center;
    white-space:normal;letter-spacing:.1em;
  }
  .btn-start{gap:16px;padding:18px 22px}
  .btn-start .arrow{width:28px}
  .cta-copy .btn-solid{padding:16px 22px}

}

/* Turnstile will not render narrower than 300px. With the padding above, a
   420px viewport still leaves 314px so the widget fits at full size; below that
   it does not, and it used to hang off the right edge of the card on its own
   row. Scaled only where the space genuinely runs out.

   zoom scales the element AND its layout box, so unlike transform it needs no
   height reservation and cannot clip a taller error state. Where zoom is
   unsupported this degrades to the old behavior rather than breaking. */
@media (max-width:420px){
  .cf-turnstile{zoom:.82}
}
/* The smallest phones still in circulation (320px) leave ~222px in the card. */
@media (max-width:360px){
  .cf-turnstile{zoom:.72}
}

/* ---------- footer ---------- */
/* No margin-top. The border is the delimiter: the space above it belongs to
   whichever section ends the page (every one already carries its own bottom
   padding), and the space below it belongs to the footer. Stacking a 110px
   margin on top of that padding was two mechanisms doing one job, and left
   220px of empty white before the rule. */
footer{padding:90px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot-grid p{color:var(--muted);font-size:15px;margin:18px 0 0;max-width:290px}
.foot h5{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px;font-weight:600}
.foot li{margin-bottom:11px}
.foot a{color:var(--muted);font-size:15px;transition:.2s}
.foot a:hover{color:var(--red)}
.foot-bottom{
  margin-top:60px;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:13.5px;
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{min-height:380px;order:2}
  .cards,.price-grid,.folio{grid-template-columns:repeat(2,1fr)}
  .folio-item.tall{grid-row:auto;aspect-ratio:4/3}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .menu{display:none}
  /* the wordmark + burger need the room; Book a Call already sits in the contact bar */
  .nav-cta{display:none}
  .burger{display:grid;gap:5px;padding:10px 0}
  .burger i{display:block;width:26px;height:2px;background:var(--ink)}
  .contactbar{font-size:12.5px}
  .contactbar .wrap{flex-wrap:wrap;gap:0}
  .cb-left{flex:1 1 100%;flex-wrap:wrap}
  .cb-item{padding:10px 14px 10px 0}
  .cb-item + .cb-item{border-left:0;padding-left:0}
  /* Socials get their own centered row. 7 x 38px plus gaps is 290px, which still
     clears the 294px available on a 320px phone. flex-wrap stays as the guard
     if a mark is ever added. */
  .cb-right{
    flex:1 1 100%;border-top:1px solid var(--line);
    flex-wrap:wrap;justify-content:center;gap:4px;padding:6px 0 10px;
  }
  .social{width:38px;height:38px}
  .cards,.price-grid,.folio,.stats,.foot-grid{grid-template-columns:1fr}
  .price.featured{transform:none}
  .sec{padding:74px 0}
  /* The footer was the one block that never scaled: 90px of inset and a 60px
     gap above the bottom bar are desktop numbers. Sections drop to 74px here,
     so the footer should come down with them rather than leave a phone-sized
     hole under the contact panel. */
  footer{padding:56px 0 32px}
  .foot-bottom{margin-top:40px}
  .notfound{padding:80px 0 74px}
  /* .cta deliberately not listed here. It always carries .cta-split, whose own
     breakpoints set its padding - and because this block sits later in the
     file at equal specificity, including .cta here silently won both of them. */
  .quote-box{padding:40px 28px}
  .scrolldown{display:none}
}

/* ---------- inner page (sub-page shell) ---------- */
.pagehead{
  background:var(--bg-2);border-bottom:1px solid var(--line);
  padding:66px 0 70px;position:relative;overflow:hidden;
}
.pagehead h1{font-size:clamp(32px,4.4vw,56px)}
.pagehead .lead{margin-top:20px;max-width:560px}
.crumbs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  color:var(--muted);font-size:13.5px;margin-top:26px;
}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--red)}
.crumbs b{color:var(--ink);font-weight:500}
.crumbs svg{color:#c3c7d4;flex:none}
/* faint arc echoing the logo mark, bled off the right edge */
.pagehead .arc{
  position:absolute;right:-90px;top:-70px;width:320px;height:320px;
  border-radius:50%;border:2px solid var(--line);pointer-events:none;
}
.pagehead .arc::after{
  content:"";position:absolute;inset:34px;border-radius:50%;
  border:2px solid rgba(255,31,61,.14);
}

.split{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start}
.prose p{color:var(--muted);font-size:16.5px;margin:0 0 20px}
.prose h3{font-size:23px;margin:40px 0 16px}
.prose strong{color:var(--ink);font-weight:600}

.steps{display:grid;gap:24px;margin-top:12px}
.step{display:flex;gap:20px;align-items:flex-start}
.step-n{
  flex:none;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  font-weight:600;font-size:15px;background:var(--bg-2);border:1px solid var(--line);
  transition:background .28s,color .28s,border-color .28s;
}
.step:hover .step-n{background:var(--red);border-color:var(--red);color:#fff}
.step h4{font-size:17.5px;margin-bottom:7px}
.step p{color:var(--muted);font-size:15.5px;margin:0}

.aside{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px 32px;position:sticky;top:112px;
}
.aside h5{font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px;font-weight:600}
.aside ul{display:grid;gap:13px;margin-bottom:30px}
.aside li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:15px}
.aside li svg{flex:none;margin-top:5px;color:var(--red)}
.aside .btn-outline{border-color:#dfe1ea;background:#fff}
/* The white background above has the same specificity as `.btn-outline:hover`
   and comes later in the file, so it was winning on hover too: the fill stayed
   white while the text still went white. Restate the hover fill here so the
   aside button matches every other Book a Call button on the site. */
.aside .btn-outline:hover{background:var(--red);border-color:var(--red);color:#fff}

@media (max-width:1080px){
  .split{grid-template-columns:1fr;gap:40px}
  .aside{position:static}
}
@media (max-width:820px){
  .pagehead{padding:48px 0 52px}
  .pagehead .arc{display:none}
}

/* ============================================================
   Added in the static-site refactor: skip link, focus rings,
   current-page nav state, and a class-driven mobile menu
   (previously the burger wrote inline styles from JS).
   ============================================================ */

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:0 0 10px 0;
  font-size:14px;
}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

/* current page keeps the nav underline permanently */
.menu > li > a.is-current::after{width:100%}
.foot a.is-current,.crumbs a.is-current{color:var(--red)}

/* the burger is a real <button> now */
.burger{background:none;border:0;cursor:pointer;font:inherit}

@media (max-width:820px){
  .menu.is-open{
    display:flex;position:absolute;top:88px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:10px 4vw 22px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  }
  .menu.is-open > li > a{padding:14px 0}
  .menu.is-open > li > a::after{display:none}
  .menu.is-open .caret{margin-left:auto}
  /* dropdowns sit inline on touch instead of hiding behind :hover */
  .menu.is-open .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);
    padding:2px 0 10px 16px;margin-bottom:6px;min-width:0;
  }
  .menu.is-open .dropdown a{padding:8px 0}
  .menu.is-open .dropdown a:hover{padding-left:6px}
}

/* ---------- 404 ---------- */
/* 110px bottom, like every .sec, now that the footer no longer supplies the
   gap above itself. This page was the only one relying on that margin. */
.notfound{padding:120px 0 110px;text-align:center}
.notfound .code{
  font-size:clamp(90px,17vw,190px);font-weight:600;letter-spacing:-.05em;
  line-height:1;color:var(--ink);
}
.notfound .code i{color:var(--red);font-style:normal}
.notfound p{margin:22px auto 0;max-width:440px}
.notfound .btn-start{margin-top:38px}

/* ============================================================
   Booking modal - native <dialog> wrapping the Google
   appointment-scheduling iframe.
   ============================================================ */

.booking-modal{
  padding:0;border:0;background:#fff;color:var(--ink);
  width:min(720px,94vw);max-width:none;max-height:none;
  border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;
}
/* Scope flex to [open]: an unscoped display value would override the UA's
   display:none and leave the dialog visible while closed. */
.booking-modal[open]{display:flex;flex-direction:column}
.booking-modal::backdrop{background:rgba(13,15,28,.62)}

/* No rule under the head or over the fallback: the well's own border already
   separates the chrome from the calendar, and a second line reads as clutter. */
.bm-head{
  flex:none;display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  padding:26px 28px 18px;
}
.bm-head h2{font-size:21px;letter-spacing:-.02em}
.bm-head p{margin:8px 0 0;color:var(--muted);font-size:15px;max-width:46ch}
.bm-close{
  flex:none;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);color:var(--ink);
  display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s;
}
.bm-close:hover{background:var(--red);border-color:var(--red);color:#fff}

/* White gutter. The body is only the frame around the well now. */
.bm-body{
  position:relative;flex:1 1 auto;min-height:0;
  height:min(620px,68vh);background:var(--bg);
  padding:0 22px 6px;overflow:auto;
  -webkit-overflow-scrolling:touch;
}
/* Google's appointment page renders its own gray (#f8f9fa) and is cross-origin,
   so it cannot be restyled. Matching --bg-2 underneath means the well looks
   identical before and after the iframe paints, and the rounded border turns
   that gray into a deliberate panel.
   overflow+isolation give Safari a real clipping context - it will not round an
   iframe's corners from border-radius alone. */
.bm-well{
  position:relative;height:100%;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;isolation:isolate;
}
/* position:relative so the iframe paints above .bm-loading even before
   the load event removes it. */
.bm-well iframe{display:block;position:relative;width:100%;height:100%;border:0}
.bm-loading{
  position:absolute;inset:0;margin:0;display:grid;place-items:center;
  color:var(--muted);font-size:15px;
}

.bm-fallback{
  flex:none;margin:0;padding:14px 28px 18px;
  color:var(--muted);font-size:13.5px;
}
.bm-fallback a{color:var(--red);text-decoration:underline;text-underline-offset:2px}

/* stop the page behind the modal from scrolling */
body.modal-open{overflow:hidden}

/* Full-screen on phones: a centered box wastes space and the calendar needs
   every pixel it can get. dvh so the iOS toolbar does not crop the footer. */
@media (max-width:640px){
  .booking-modal{
    width:100vw;height:100vh;height:100dvh;
    max-height:none;border-radius:0;margin:0;
  }
  .bm-head{padding:18px 20px 14px}
  .bm-head h2{font-size:18px}
  .bm-head p{font-size:14px;margin-top:6px}
  .bm-close{width:36px;height:36px}
  /* Full-screen already: drop the gutter and the rounding so the calendar keeps
     every pixel, and let a single top border do the separating. */
  .bm-body{height:auto;padding:0}
  .bm-well{border:0;border-top:1px solid var(--line);border-radius:0}
  .bm-fallback{padding:12px 20px 16px;font-size:13px}
}

/* Respect users who have asked for less motion - no backdrop fade. */
@media (prefers-reduced-motion:reduce){
  .bm-close{transition:none}
}

/* ============================================================
   Added for /about and /our-difference.
   Three small additions - a two-up card grid, bio headers and
   two list styles. Everything else on those pages reuses the
   components above unchanged.
   ============================================================ */

/* Two-up card grid: bios (2 cards) and the offer grid (4 cards, 2x2).
   The plain .cards grid is three-up, which orphans the last card. */
.cards.two{grid-template-columns:repeat(2,1fr)}

/* Name + role above a bio. Placed after .card so it wins the equal-specificity
   tie against `.card h3` and can zero its margin. */
.bio-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.bio-head h3{font-size:20px;margin:0}
.bio-head span{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}
.bio-head .avatar{flex:none}

/* Core-technology pills. */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0}
.pills li{
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 17px;font-size:14px;color:var(--ink);
}

/* "What we are not" - same shape as .aside ul, but the marks read as exclusions. */
.notlist{display:grid;gap:14px;margin:0}
.notlist li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:15px}
.notlist li svg{flex:none;margin-top:4px;color:var(--red)}

@media (max-width:820px){
  /* .cards.two outranks the plain .cards rule above, so it needs collapsing too */
  .cards.two{grid-template-columns:1fr}
  .bio-head{gap:14px}
}