/* Asquare AI, case-study design system.
   Navy + gold, matching css/global.css so the whole site is one palette.
   No gradients anywhere. Wide layout.
   Used by /case-studies/ only; the homepage keeps its own inline styles. */

:root{
  --canvas:#020810;
  --surface:#0A1628;
  --surface-2:#0F1D35;
  --ink:#F2F6FB;
  --ink-soft:#9DADC2;
  --ink-mute:#7187A0;
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.16);
  --accent:#C4956A;
  --accent-br:#E8C4A0;
  --accent-dp:#A0724A;
  --accent-ink:#E8C4A0;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --e-out:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;overflow-x:clip;background:var(--canvas)}
/* scroll-behavior and Lenis cannot both drive the scroll. Lenis sets the
   position every frame; native smooth scrolling then re-animates towards it,
   and the two cancel out. Measured on this page: a scroll to 6000px ended at
   0, with 131 of 132 frames moving nothing. Lenis marks the document with
   .lenis, so native smoothing is kept only where Lenis is NOT driving. */
html:not(.lenis){scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-.03em;line-height:1.06}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

/* WIDE by default: the grid should breathe edge to edge, not sit in a box */
.wrap{max-width:1560px;margin:0 auto;padding:0 max(24px,calc(var(--sal) + 18px))}
.wrap-read{max-width:1180px;margin:0 auto;padding:0 max(24px,calc(var(--sal) + 18px))}
section{padding:clamp(60px,7vw,96px) 0}

.eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px;color:var(--accent-ink)}
.eyebrow::before{content:'';width:26px;height:1.5px;background:var(--accent);flex-shrink:0}
.h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;max-width:20ch;margin-bottom:14px;text-wrap:balance}
.sub{font-size:1.02rem;line-height:1.75;color:var(--ink-soft);max-width:620px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:100px;
  font-weight:700;font-size:15px;border:none;cursor:pointer;
  transition:transform .18s var(--e-out),background .18s,color .18s,border-color .18s}
.btn-dark{background:var(--accent);color:#020810}
.btn-white{background:var(--ink);color:#07101D}
.btn-ghost{border:1.5px solid var(--line-2);color:var(--ink)}
@media(hover:hover){
  .btn:hover{transform:translateY(-3px)}
  .btn-dark:hover{background:var(--accent-br)}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
}
.btn:active{transform:translateY(1px) scale(.985)}

/* Nav and mobile menu now come from css/global.css + js/components.js,
   the single shared header. Nothing nav-related belongs in this file. */

/* PAGE HEAD */
/* The navbar is position:fixed and 104px tall on mobile, 114px on desktop, so a
   34px top padding put the breadcrumb underneath it: unreadable and unclickable
   on all 12 pages using this header. Same clearance the 98 .page-header pages
   already use, safe-area included for notch devices. */
.pagehead{padding:max(160px, calc(120px + var(--sat))) 0 clamp(26px,3.5vw,38px)}
.pagehead h1{font-size:clamp(2.2rem,5.2vw,4rem);font-weight:700;max-width:18ch;text-wrap:balance}
.pagehead .lead{font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.75;color:var(--ink-soft);
  max-width:620px;margin:24px 0 0;text-wrap:pretty}
.crumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-mute);margin-bottom:20px;flex-wrap:wrap}
.crumb a{color:var(--ink-soft)}
.crumb a:hover{color:var(--accent-ink)}
.crumb i{font-style:normal;opacity:.5}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.chips span{font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--ink-soft);background:var(--surface)}

/* WORK GRID: three across, full width */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.w{display:block;border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);transition:transform .3s var(--e-out),border-color .3s}
@media(hover:hover){
  .w:hover{transform:translateY(-6px);border-color:var(--accent)}
  .w:hover .shot img{transform:scale(1.04)}
  .w:hover .wgo{transform:translate(4px,0);opacity:1}
}
.shot{display:block;position:relative;overflow:hidden;background:var(--surface-2);aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--e-out)}
.chrome{display:flex;align-items:center;gap:6px;padding:9px 13px;background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.chrome i{width:9px;height:9px;border-radius:50%;display:block;flex-shrink:0}
.chrome u{flex:1;text-align:center;font-size:10.5px;color:var(--ink-mute);text-decoration:none;
  font-family:'Space Grotesk';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbody{display:block;padding:22px 24px 24px}
.whead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:9px}
.wname{display:block;font-family:'Space Grotesk';font-size:1.26rem;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.wsector{display:block;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);white-space:nowrap}
.wdesc{display:block;font-size:.92rem;line-height:1.65;color:var(--ink-soft)}
.wfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.wtags{display:flex;gap:7px;flex-wrap:wrap}
.wtags span{font-size:11px;font-weight:600;padding:5px 11px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--ink-soft)}
.wurl{font-size:.84rem;color:var(--ink-mute);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.wgo{transition:transform .28s var(--e-out),opacity .28s;opacity:.55;color:var(--accent)}
.w[hidden]{display:none}

/* FILTERS */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.filters button{font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:100px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-soft);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.filters button:hover{border-color:var(--accent);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--accent);color:#020810;border-color:var(--accent)}

/* CASE STUDY BODY */
.csbody{max-width:760px}

/* ===== SALES SHEETS =====
   These are 2000px annotated documents. Sat inside the 760px reading measure
   they rendered at 758px, which is a 0.38 downscale: the headline survived,
   the annotation text came out around 7px and nothing could be read without
   opening it. They now break out to the full reading column, which roughly
   halves that penalty and stops the page wasting 420px of its own width.
   .csbody is left aligned inside .wrap-read, not centred, so a symmetric
   negative-margin bleed ran off the left of the screen. It grows rightwards
   into the 372px that was already empty instead, and is capped by the viewport
   so a phone just gets full width. The max-width is what keeps it safe in the
   wider parent the older case studies use, where growing by 372px overran. */
.sheets{width:min(calc(100% + 372px), calc(100vw - 48px));max-width:1132px;
  display:flex;flex-direction:column;gap:20px}
.sheet{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.sheet img{display:block;width:100%;height:auto}
.sheet a{display:block;position:relative}
.sheet a::after{content:'Tap to enlarge';position:absolute;right:10px;bottom:10px;
  font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(6,14,26,.72);
  border-radius:100px;padding:5px 11px;backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
@media(hover:hover){.sheet a:hover::after{opacity:1;content:'Open full size'}}
@media(hover:none){.sheet a::after{opacity:1}}

/* Two across, for the supporting sheets where the headline carries the point
   and the detail is read by opening it. Never for the lead sheet of a group. */
.sheets.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:820px){.sheets.two{grid-template-columns:1fr}}

/* Half sheet, half writing. Same breakout, so the pair spans the full column
   rather than the reading measure. */
.splitrow{width:min(calc(100% + 372px), calc(100vw - 48px));max-width:1132px;
  display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,3.4vw,50px);align-items:center}
.splitrow .sheets{width:100%}
.splitrow .said h3{font-size:1.12rem;font-weight:700;margin-bottom:10px;letter-spacing:-.015em}
.splitrow .said p{font-size:1rem;line-height:1.78;color:var(--ink-soft);max-width:46ch}
.splitrow .said p + p{margin-top:13px}
@media(max-width:860px){.splitrow{grid-template-columns:1fr;gap:26px}}
.csbody > * + *{margin-top:clamp(40px,5vw,62px)}
.cssec h2{font-size:clamp(1.45rem,2.8vw,2rem);font-weight:700;margin-bottom:16px;max-width:22ch;text-wrap:balance}
.cssec p{font-size:1.01rem;line-height:1.82;color:var(--ink-soft);max-width:68ch;text-wrap:pretty}
.cssec p + p{margin-top:15px}
.standfirst{font-size:1.08rem;line-height:1.78;color:var(--ink);border-top:2px solid var(--accent);
  border-bottom:1px solid var(--line);padding:24px 0;max-width:68ch;text-wrap:pretty}

.deliv{list-style:none;margin-top:26px}
.deliv li{border-top:1px solid var(--line);padding:21px 0}
.deliv li:last-child{border-bottom:1px solid var(--line)}
.deliv b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.04rem;font-weight:700;
  letter-spacing:-.02em;margin-bottom:7px;color:var(--ink)}
.deliv span{display:block;font-size:.95rem;line-height:1.72;color:var(--ink-soft);max-width:64ch}

.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pills span{font-size:.91rem;font-weight:600;padding:8px 15px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}

/* IMAGERY */
.fig{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.fig img{width:100%;height:auto;display:block}
.fig-wide img{aspect-ratio:16/7;object-fit:cover;object-position:top center}
.figduo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.figduo .fig img{aspect-ratio:4/3;object-fit:cover}
figcaption{font-size:.83rem;color:var(--ink-mute);padding:11px 15px;background:var(--surface);border-top:1px solid var(--line)}

/* STATS BAND */
.band{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(44px,5vw,70px) 0;position:relative;overflow:hidden}
.band .wrap{max-width:1360px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.stat{border-top:1px solid var(--line-2);padding:24px 0 0}
.stat b{font-family:'Space Grotesk';display:block;font-size:clamp(2.4rem,4.2vw,3.4rem);font-weight:700;
  line-height:1;margin-bottom:10px;color:var(--accent)}
.stat span{font-size:.88rem;color:var(--ink-soft);line-height:1.6;display:block;max-width:26ch}

/* FAQ */
.faq{max-width:820px}
.q{border-bottom:1px solid var(--line);padding:22px 0}
.q summary{font-family:'Space Grotesk';font-size:clamp(1rem,2vw,1.1rem);font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;cursor:pointer;color:var(--ink)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:'+';font-size:1.7rem;font-weight:400;color:var(--accent);
  transition:transform .28s var(--e-out);line-height:1}
.q[open] summary::after{transform:rotate(135deg)}
.q p{font-size:.97rem;line-height:1.78;color:var(--ink-soft);margin-top:13px;max-width:66ch}

/* CTA */
.cta{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:clamp(56px,7vw,92px) 32px}
.cta h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:700;margin-bottom:18px;max-width:22ch;
  margin-left:auto;margin-right:auto;text-wrap:balance}
.cta p{font-size:1.05rem;color:var(--ink-soft);max-width:560px;margin:0 auto 32px;line-height:1.72}

/* RELATED */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.relc{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;transition:transform .28s var(--e-out),border-color .28s}
@media(hover:hover){.relc:hover{transform:translateY(-4px);border-color:var(--accent)}
.relc:hover img{transform:scale(1.04)}}
.relc .relshot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.relc img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--e-out)}
.relb{display:block;padding:17px 19px 19px}
.relb strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.02rem;font-weight:700;
  letter-spacing:-.02em;margin-bottom:5px;color:var(--ink)}
.relb span{display:block;font-size:.85rem;line-height:1.6;color:var(--ink-soft)}

/* Footer also comes from global.css + components.js. */

/* MOTION: content visible by default, hidden only once JS confirms the observer */
html.anim .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
html.anim .rv.in{opacity:1;transform:none}
html.anim .stg>*{opacity:0;transform:translateY(24px);transition:opacity .66s var(--e-out),transform .66s var(--e-out)}
html.anim .stg.in>*{opacity:1;transform:none}
html.anim .stg.in>*:nth-child(2){transition-delay:.06s}
html.anim .stg.in>*:nth-child(3){transition-delay:.12s}
html.anim .stg.in>*:nth-child(4){transition-delay:.18s}
html.anim .stg.in>*:nth-child(5){transition-delay:.24s}
html.anim .stg.in>*:nth-child(6){transition-delay:.30s}
html.anim .stg.in>*:nth-child(7){transition-delay:.36s}
html.anim .stg.in>*:nth-child(8){transition-delay:.42s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  html.anim .rv,html.anim .stg>*{opacity:1;transform:none}
}

@media(max-width:1180px){
  .works,.rel{grid-template-columns:repeat(2,1fr)}
  }
@media(max-width:860px){
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .works,.rel,.figduo,.stats{grid-template-columns:1fr}
  .band,.cta{border-radius:16px}
  .csbody > * + *{margin-top:36px}
}