@import url("_icons.css");

/* ============================================================
   ANIE.LA — design system
   The header is a grid of bricks. So is everything else.
   ============================================================ */

:root{
  /* Palette — derived from the existing brick header */
  --ink:        #11374F;   /* deep navy — headings, links */
  --ink-rgb:    17,55,79;  /* same colour for rgba(); keep in sync with --ink */
  --ink-2:      #16273D;   /* body text */
  --ink-soft:   #55677F;   /* secondary text */
  --brick:      #1D567A;   /* header brick */
  --brick-alt:  #367095;   /* header brick, odd */
  --cream:      #FBF8D8;   /* logo, text on dark */
  --paper:      #FFFFFF;
  --paper-2:    #F2F6FB;   /* pale cool blue */
  --line:       #D6E0EC;
  --signal:     #FFC93C;   /* rank badges + active nav ONLY */
  --signal-deep:#F5BC2A;   /* button hover fill — navy text still reads 7.16:1 */

  /* Type */
  --display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --body:    'Open Sans', Helvetica, Arial, sans-serif;
  --mono:    'Open Sans', Helvetica, Arial, sans-serif;  /* label face: uppercase + tracked */

  /* The brick module — the whole site is built on this */
  --brick-size: 195px;
  --gutter: 1px;
  --wrap: 1170px;   /* exactly 6 bricks */
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

body{
  margin:0;
  font-family:var(--body);
  font-size:18px;
  font-weight:400;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.03em;
  line-height:1.05;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(38px,5vw,64px);}
h2{font-size:clamp(30px,3.6vw,44px);}
h3{font-size:clamp(24px,2.6vw,32px);}
h4{font-size:22px;}

p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

img{max-width:100%;height:auto;display:block;}

:focus-visible{outline:3px solid var(--signal);outline-offset:2px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--cream);padding:10px 16px;}

/* ── Eyebrow: mono, because these are literal search terms ── */
.eyebrow{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brick-alt);
  margin:0 0 14px;
  font-weight:600;
}

.lede{font-size:21px;line-height:1.55;color:var(--ink-soft);max-width:62ch;}

/* ============================================================
   HOME HEADER — the brick grid (preserved)
   ============================================================ */
#header{
  background:url(../img/header-bg.jpg) no-repeat center/cover fixed;
}
#header .brow{display:flex;}
#header .brow::after{content:"";display:table;clear:both;}
.brick1{width:var(--brick-size);height:var(--brick-size);flex:0 0 var(--brick-size);}
.brick3{width:585px;height:var(--brick-size);flex:0 0 585px;}
.boffset1{margin-left:var(--brick-size);}
.boffset2{margin-left:390px;}

#header [class*="brick"]{background:var(--brick);color:var(--cream);}
#header .odd{background:var(--brick-alt);}
#header .transparent{background:none;}
#header .logo_container{background:var(--ink);}

#header .nav-item{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  width:100%;height:100%;text-align:center;
  color:var(--cream);text-decoration:none;
  transform-style:preserve-3d;perspective:800px;
}
/* Logo — Bebas, same face as the page headings. Scoped to .logo_container so
   it can never be caught by the nav-label rule below. */
#header .logo_container .logo{
  display:block;
  font-family:var(--display);font-size:38px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cream);margin:0;line-height:1;
}
#header .logo_container .tagline{
  display:block;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;
  line-height:1.35;max-width:90px;
  text-transform:uppercase;color:var(--cream);margin:12px 0 0;
}
#header .nav-item i{font-size:52px;display:block;}
#header .nav-item .nav-label{
  display:block;margin-top:12px;font-weight:600;
  font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
}
/* Hover frame: must sit flush to the brick edges. It was picking up
   margin-top:12px from the old `.nav-item span` selector and dropping 12px. */
#header .nav-item .nav-hover{
  position:absolute;top:0;left:0;right:0;bottom:0;margin:0;
  border:6px solid rgba(251,248,216,.9);box-sizing:border-box;
  opacity:0;transform:scale(.94);transition:opacity .2s ease-in-out,transform .2s ease-in-out;
  z-index:1;pointer-events:none;
}
#header .nav-item:hover .nav-hover,
#header .nav-item:focus-visible .nav-hover{opacity:1;transform:scale(1);}

#header .slogan{
  display:flex;align-items:center;
  background:none;
}
#header .slogan p{
  font-family:var(--display);font-size:32px;line-height:1.15;letter-spacing:.03em;
  color:var(--ink);text-align:right;padding:0 30px;margin:0;
}

/* flipping image bricks */
#header .thumb{background:none;perspective:800px;}
#header .thumb .nav-item{transform-style:preserve-3d;}
#header .thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;backface-visibility:hidden;
}
#header .thumb .nav-item.flipX .img2{transform:rotateX(-180deg);}
#header .thumb .nav-item.flipY .img2{transform:rotateY(-180deg);}
#header .thumb .nav-item.flipX{animation:flipX 18s ease-in-out infinite;}
#header .thumb .nav-item.flipY{animation:flipY 18s ease-in-out infinite;}
@keyframes flipX{0%,45%{transform:rotateX(0)}50%,95%{transform:rotateX(-180deg)}100%{transform:rotateX(-360deg)}}
@keyframes flipY{0%,45%{transform:rotateY(0)}50%,95%{transform:rotateY(-180deg)}100%{transform:rotateY(-360deg)}}
#header .brow:nth-child(2) .thumb:nth-child(3) .nav-item{animation-delay:-2.3s;}
#header .brow:nth-child(3) .thumb:nth-child(1) .nav-item{animation-delay:-11.7s;}
#header .brow:nth-child(3) .thumb:nth-child(4) .nav-item{animation-delay:-5.1s;}
#header .brow:nth-child(3) .thumb:nth-child(5) .nav-item{animation-delay:-15.8s;}
#header .brow:nth-child(4) .thumb:nth-child(1) .nav-item{animation-delay:-8.4s;}
#header .brow:nth-child(4) .thumb:nth-child(2) .nav-item{animation-delay:-1.6s;}

/* ============================================================
   INTERIOR HEADER — same brick language, compressed
   ============================================================ */
/* The header is a grid of 195px squares. The compact bar carries that through:
   the logo is a square brick, not a wide slab. */
.bar{
  position:sticky;top:0;z-index:50;
  background:var(--ink);
  border-bottom:3px solid var(--brick-alt);
}
.bar-in{
  max-width:var(--wrap);margin:0 auto;
  display:flex;align-items:stretch;justify-content:space-between;
}
.bar-logo{
  flex:0 0 auto;
  width:120px;height:120px;            /* sized to hold a 14px tagline at two lines */
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:6px;padding:0 2px;
  text-decoration:none;background:var(--brick);
  transition:background .16s;
}
.bar-logo:hover{background:var(--brick-alt);}
.bar-logo b{
  font-family:var(--display);font-size:26px;letter-spacing:.04em;
  color:var(--cream);text-transform:uppercase;font-weight:400;line-height:1;
}
.bar-logo span{
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.02em;
  line-height:1.35;text-align:center;text-transform:uppercase;color:var(--cream);
  max-width:90px;
}
.bar nav{display:flex;}
.bar nav a{
  display:flex;align-items:center;gap:8px;
  padding:0 20px;min-height:120px;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;
  border-left:1px solid rgba(251,248,216,.14);
  transition:background .15s;
}
.bar nav a i{font-size:17px;}
.bar nav a:hover{background:var(--brick-alt);}
.bar nav a[aria-current="page"]{background:var(--brick-alt);box-shadow:inset 0 -4px 0 rgba(251,248,216,.9);}

.burger{display:none;background:none;border:0;padding:0 24px;cursor:pointer;}

/* ── Desktop subpage header ──
   Logo keeps the full 195px brick. The nav bricks are deliberately smaller —
   they're a utility nav, not the hero. They sit right-aligned and centred in
   the band, so the photo breathes between them like it does on the homepage.
   Hover frame is cream, not yellow: yellow-on-navy fought the palette. */
@media (min-width:1201px){
  .bar{
    position:static;
    background:url(../img/header-bg.jpg) center/cover;
    border-bottom:0;
  }
  .bar-in{
    width:var(--wrap);max-width:var(--wrap);
    padding:0;align-items:center;
  }

  .bar-logo{
    width:var(--brick-size);height:var(--brick-size);   /* 195 — same as homepage */
    padding:0;gap:10px;background:var(--ink);
  }
  .bar-logo:hover{background:var(--ink);}
  .bar-logo b{font-size:38px;letter-spacing:.05em;}
  .bar-logo span{
    font-size:14px;letter-spacing:.02em;line-height:1.35;max-width:90px;
    color:var(--cream);
  }

  .bar nav{margin-left:auto;align-self:center;gap:0;}
  .bar nav a{
    position:relative;
    width:96px;height:96px;min-height:96px;              /* a quarter of the logo brick */
    flex-direction:column;justify-content:center;gap:0;
    padding:0;border-left:0;
    background:var(--brick);
  }
  .bar nav a:nth-child(even){background:var(--brick-alt);}
  .bar nav a i{font-size:30px;line-height:1;}
  .bar nav a .nav-label{margin-top:9px;font-size:14px;letter-spacing:.04em;}

  /* quiet cream frame — same gesture as the homepage bricks, without the clash */
  .bar nav a::after{
    content:"";position:absolute;top:0;left:0;right:0;bottom:0;
    border:4px solid rgba(251,248,216,.9);box-sizing:border-box;
    opacity:0;transform:scale(.9);
    transition:opacity .18s ease-in-out,transform .18s ease-in-out;
    pointer-events:none;
  }
  .bar nav a:hover::after,
  .bar nav a:focus-visible::after{opacity:1;transform:scale(1);}

  /* current page: hold the frame open, no colour shouting */
  .bar nav a[aria-current="page"]{box-shadow:none;background:var(--ink);}
  .bar nav a[aria-current="page"]::after{opacity:1;transform:scale(1);}
}
.burger span{display:block;width:26px;height:3px;background:var(--cream);margin:5px 0;border-radius:2px;transition:.25s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.phead{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  padding:64px 0 56px;
}
.phead h1{margin-bottom:18px;}

.crumbs{
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 18px;
}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbs span{margin:0 8px;opacity:.5;}

section{padding:72px 0;}
section + section{border-top:1px solid var(--line);}
.tint{background:var(--paper-2);}

/* ============================================================
   BRICK GRID — the site-wide module
   ============================================================ */
.bricks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.bricks.two{grid-template-columns:repeat(2,1fr);}
.bricks.three{grid-template-columns:repeat(3,1fr);}

.brk{
  background:var(--paper);
  padding:36px 32px;
  transition:background .18s;
}
.brk:hover{background:var(--paper-2);}
.brk i{font-size:44px;color:var(--brick-alt);display:block;margin-bottom:16px;}
.brk h3{font-size:26px;margin-bottom:10px;}
.brk p{font-size:16px;color:var(--ink-soft);margin:0;}
.brk ul{margin:0;padding-left:18px;font-size:15px;color:var(--ink-soft);}
.brk li{margin-bottom:5px;}

/* Dark brick — for the numbered proof tiles */
.brk.dark{background:var(--brick);color:var(--cream);}
.brk.dark:hover{background:var(--brick-alt);}
.brk.dark h3,.brk.dark p{color:var(--cream);}
.brk.dark .num{
  font-family:var(--display);font-size:56px;color:var(--signal);
  line-height:1;display:block;margin-bottom:6px;
}
.brk.dark .num-label{
  font-family:var(--mono);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream);opacity:.85;
}

/* ============================================================
   WORK INDEX — the fix for the endless scroll
   ============================================================ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:28px;
}
.work-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  background:var(--paper);
  text-decoration:none;color:inherit;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.work-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(var(--ink-rgb),.13);
  border-color:var(--brick-alt);
}
/* The box matches the screenshots' true ratio (1046x400), so `cover` has
   nothing to crop. A 16/9 box was slicing the left and right edges off. */
.work-shot{
  position:relative;aspect-ratio:1046/400;overflow:hidden;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.work-shot img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.work-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.work-body h3{font-size:26px;margin:0;}
.work-kicker{
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brick-alt);margin:0;
}
.work-body p{font-size:15px;color:var(--ink-soft);margin:0;}
.work-more{
  margin-top:auto;padding-top:14px;
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);font-weight:600;
}
/* Arrows/ticks are SVG masks, not glyphs. Open Sans has no arrow glyph, so the
   browser fell through the font stack to Apple Color Emoji — that's what made the
   arrow render as a bulky blue emoji box on iOS. A mask inherits currentColor. */
.work-more::after{
  content:"";display:inline-block;width:13px;height:10px;margin-left:8px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6h9M7 2.5 10.5 6 7 9.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1.5 6h9M7 2.5 10.5 6 7 9.5' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
}

/* Rank badge — the one place --signal is allowed to shout */
.rank{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--signal);color:var(--ink);
  font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 10px;
}

/* ============================================================
   QUERIES — real search strings, so: monospace
   ============================================================ */
.queries{
  border:1px solid var(--line);border-left:4px solid var(--ink);
  background:var(--paper-2);padding:28px 30px;
}
.queries h3{font-size:22px;margin-bottom:16px;}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.qlist li{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--mono);font-size:14px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);
  padding:9px 12px;
}
.qlist li::before{
  content:"";flex:0 0 auto;display:inline-block;width:15px;height:15px;margin-top:2px;
  background:var(--brick-alt);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.4' fill='none' stroke='black' stroke-width='1.5'/><path d='M10.3 10.3 14 14' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.4' fill='none' stroke='black' stroke-width='1.5'/><path d='M10.3 10.3 14 14' stroke='black' stroke-width='1.5' stroke-linecap='round'/></svg>") no-repeat center/contain;
}
.qlist .pos{
  margin-left:auto;background:var(--ink);color:var(--cream);
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;white-space:nowrap;
}
.qlist .pos.ai{background:var(--brick-alt);}
.qsource{
  margin-top:22px;font-size:15px;line-height:1.6;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:16px;
}
.qsource strong{color:var(--ink);font-weight:600;}
.qlist .pos.one{background:var(--signal);color:var(--ink);font-weight:600;}

/* ============================================================
   CASE STUDY PAGE
   ============================================================ */
.cs-head{background:var(--ink);color:var(--cream);padding:56px 0 48px;}
.cs-head h1{color:var(--cream);margin-bottom:14px;}
.cs-head .crumbs,.cs-head .crumbs a{color:rgba(251,248,216,.7);}
.cs-head .sub{font-size:20px;color:rgba(251,248,216,.9);max-width:60ch;margin:0 0 22px;}
.cs-visit{
  display:inline-block;font-family:var(--mono);font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--signal);
  padding:10px 18px;text-decoration:none;font-weight:600;
}
.cs-visit:hover{background:var(--cream);}
/* inline SVG icons — sized in em so they track their label */
.ico{width:1em;height:1em;vertical-align:-.12em;flex:0 0 auto;}
.rank .ico{width:.95em;height:.95em;margin-right:2px;}
.cs-visit .ico{margin-left:7px;}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;list-style:none;padding:0;}
.tags li{
  font-family:var(--mono);font-size:14px;letter-spacing:.06em;
  border:1px solid rgba(251,248,216,.35);color:var(--cream);
  padding:5px 11px;
}
.tags.light li{border-color:var(--line);color:var(--ink-soft);}

/* Case-study intro: screenshot left, challenge right.
   Full-width the screenshot was a thin 2.6:1 band; a half-column renders it
   BELOW its native 1046px, so it downscales (sharper) instead of stretching. */
.cs-intro{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:44px;
  align-items:center;
}
.shot{margin:0;border:1px solid var(--line);background:var(--paper-2);padding:14px;}
.shot img{width:100%;height:auto;}
.shot figcaption{
  font-family:var(--mono);font-size:14px;color:var(--ink-soft);
  margin-top:12px;text-align:center;line-height:1.5;
}
.shot-mobile{display:none;}

@media (max-width:900px){
  .cs-intro{grid-template-columns:1fr;gap:32px;}
}

.callout{
  border-left:4px solid var(--brick-alt);
  background:var(--paper-2);padding:26px 28px;
}
.callout.win{border-left-color:var(--signal);}
.callout h2{font-size:28px;margin-bottom:12px;}

.did{list-style:none;margin:0;padding:0;}
.did li{
  display:flex;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);font-size:16px;
}
.did li:last-child{border-bottom:0;}
.did li::before{
  content:"";flex:0 0 auto;display:inline-block;width:14px;height:14px;margin-top:5px;
  background:var(--brick-alt);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.4 5.3 10.6 12 3.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2 7.4 5.3 10.6 12 3.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center/contain;
  font-family:var(--mono);font-weight:600;
}
.did strong{color:var(--ink);}

.cs-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;}
.faq details{border-bottom:1px solid var(--line);padding:22px 0;}
.faq details:first-child{border-top:1px solid var(--line);}
.faq summary{
  font-family:var(--display);font-size:24px;letter-spacing:.02em;
  color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-family:var(--mono);font-size:24px;
  color:var(--brick-alt);flex:0 0 auto;
}
.faq details[open] summary::after{content:"–";}
.faq details p{margin-top:14px;font-size:17px;color:var(--ink-soft);}

/* ============================================================
   CTA + FORM + FOOTER
   ============================================================ */
.cta{
  background:url(../img/header-bg.jpg) center/cover fixed;
  position:relative;text-align:center;padding:88px 0;
}
.cta::before{content:"";position:absolute;inset:0;background:rgba(var(--ink-rgb),.72);}
.cta .wrap{position:relative;}
.cta h2{color:var(--cream);margin-bottom:12px;}
.cta p{color:rgba(251,248,216,.9);max-width:52ch;margin:0 auto 26px;}

.btn{
  display:inline-block;
  font-family:var(--mono);font-size:14px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:15px 30px;text-decoration:none;text-align:center;
  background:var(--signal);color:var(--ink);
  border:2px solid var(--signal);cursor:pointer;
  transition:background .16s,color .16s;
}

/* Button groups. Buttons used to be inline with a margin-left:10px on the
   second one — when the pair wrapped on a narrow screen the horizontal margin
   stayed and there was no vertical gap, so they collided and sat offset. */
.btns{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:14px;margin-top:30px;
}
.btns .btn{margin:0;}

@media (max-width:560px){
  .btns{flex-direction:column;align-items:stretch;}
  .btns .btn{width:100%;}
}
/* Hover deepened the fill rather than emptying it. The old rule went
   transparent with yellow text — #FFC93C on white measures 1.54:1, unreadable. */
.btn:hover,
.btn:focus-visible{
  background:var(--signal-deep);
  border-color:var(--signal-deep);
  color:var(--ink);
}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.ghost:hover,
.btn.ghost:focus-visible{background:var(--ink);color:var(--cream);border-color:var(--ink);}

.form{display:grid;gap:16px;max-width:620px;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form label{
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:6px;
}
.form input,.form textarea{
  width:100%;font-family:var(--body);font-size:17px;
  padding:12px 14px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-2);border-radius:0;
}
.form input:focus,.form textarea:focus{border-color:var(--brick-alt);outline:none;box-shadow:0 0 0 3px rgba(54,112,149,.15);}
.form textarea{min-height:150px;resize:vertical;}
#formnote{font-family:var(--mono);font-size:14px;}

.contact-direct{border:1px solid var(--line);padding:28px;background:var(--paper-2);}
.contact-direct dt{
  font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:16px;
}
.contact-direct dt:first-child{margin-top:0;}
.contact-direct dd{margin:4px 0 0;font-size:17px;}

footer{background:var(--ink);color:rgba(251,248,216,.8);padding:56px 0 34px;font-size:15px;}
footer h4{color:var(--cream);font-size:18px;margin-bottom:14px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:36px;}
footer a{color:rgba(251,248,216,.8);text-decoration:none;}
footer a:hover{color:#FFFFFF;text-decoration:underline;}
.foot-grid ul{list-style:none;margin:0;padding:0;}
.foot-grid li{margin-bottom:8px;}
.foot-base{
  border-top:1px solid rgba(251,248,216,.18);padding-top:22px;
  font-family:var(--mono);font-size:14px;color:rgba(251,248,216,.6);line-height:1.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  #header{display:none;}
}
@media (min-width:1201px){
  .home-bar{display:none;}
}

@media (max-width:900px){
  .bricks.two,.bricks.three{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:28px;}
  .cta{background-attachment:scroll;}
}

@media (max-width:760px){
  body{font-size:17px;}
  section{padding:52px 0;}
  .phead{padding:44px 0 38px;}
  .pair{grid-template-columns:1fr;}
  .shot-desktop{display:none;}
  .shot-mobile{display:block;}
  .work-grid{grid-template-columns:1fr;}

  .burger{display:block;}
  .bar-in{align-items:center;}
  .bar nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--ink);
    border-bottom:3px solid var(--brick-alt);
    display:none;
  }
  .bar nav.open{display:flex;}
  .bar nav a{border-left:0;border-top:1px solid rgba(251,248,216,.14);min-height:56px;}
}

/* The stat badges carry position + impressions now, which is too long to sit
   inline on a phone. Below 620px they drop to their own line under the query. */
@media (max-width:620px){
  .qlist li{flex-wrap:wrap;}
  .qlist .pos{
    flex-basis:100%;margin-left:26px;margin-top:8px;
    white-space:normal;width:fit-content;
  }
}

/* ============================================================
   HERO NOTE — the "one person" trust line, moved out of the stat band
   ============================================================ */
.hero-note{
  margin-top:22px;
  font-size:15px;line-height:1.55;color:var(--ink-soft);
  max-width:56ch;
}

/* ============================================================
   MOBILE HERO — the wave from the desktop header, carried onto phones
   so the business-card image is the first thing a mobile visitor sees.
   Hidden on desktop, where the full brick grid runs.
   ============================================================ */
.mhero{display:none;}
@media (max-width:1200px){
  .mhero{
    display:block;position:relative;overflow:hidden;
    background:var(--ink);
    border-bottom:3px solid var(--brick-alt);
  }
  /* Enlarged and anchored to the top-left, where the wave crest sits */
  .mhero img{
    display:block;width:100%;height:410px;
    object-fit:cover;object-position:left top;
  }
  /* The desktop slogan — sized to lead the page, so it's at least as large
     as the H1 below it. */
  .mhero-slogan{
    position:absolute;left:0;right:0;bottom:0;margin:0;
    padding:54px 22px 22px;
    font-family:var(--display);
    font-size:clamp(40px,10vw,54px);line-height:1.02;letter-spacing:.02em;
    color:var(--cream);
    text-shadow:0 1px 14px rgba(var(--ink-rgb),.55);
    background:linear-gradient(to top,rgba(var(--ink-rgb),.9) 46%,rgba(var(--ink-rgb),0));
  }
}

/* ============================================================
   FEATURE CARDS — icon to the left, headline + copy to the right,
   at every width. Scoped with :has() to icon cards only, so number/step
   cards (no <i>) keep their own stacked layout. The icon spans the text
   rows and pins to the top, so heading-to-copy spacing stays natural.
   ============================================================ */
.brk:has(> i){
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:26px;
  align-items:start;
}
.brk:has(> i) > i{
  grid-column:1;grid-row:1 / span 20;align-self:start;
  margin:0;line-height:1;
}
.brk:has(> i) > *:not(i){grid-column:2;}
.brk:has(> i) h3{margin-top:0;}

@media (max-width:600px){
  .brk:has(> i){column-gap:16px;}
  .brk:has(> i) > i{font-size:32px;}
}