/* ============================================================
   PAGE LAYER — index.html only. Composition of the thirteen
   components; every value below is a token from the theme.
   ============================================================ */

/* Hero — five slides, each with its own background film, no figure column.
   Copy sits left over the footage; the scrim is heaviest behind the text.
   Measured over these five clips: ink-900 holds 5.3:1 at 65% white, white holds
   6.0:1 at 75% ink-900 — so the light slides use 86%/68% white and the dark ones
   86%/70% ink-900, both clear of AA across every frame. */
.hero{padding-block:0;position:relative;overflow:hidden;transition:background-color var(--duration) var(--ease-brand)}
.hero.is-light{background:var(--surface-page)}
.hero.is-deep{background:var(--surface-footer)}
.hero .container{position:relative}
.slides{position:relative}
/* Stacked track: every slide shares one grid cell, so the hero is always as tall
   as the tallest slide and no slide changes height when it becomes current. */
.slides.is-stacked{display:grid}
.slides.is-stacked>.slide{grid-area:1/1}
.slides.is-stacked>.slide[aria-hidden="true"]{visibility:hidden}
.slide{display:grid;padding-block:calc(var(--s)*16) calc(var(--s)*20);align-items:center;position:relative}
.slide[hidden]{display:none}
@media (min-width:64rem){.slide{padding-block:calc(var(--s)*24) calc(var(--s)*28);min-height:calc(var(--s)*150)}}
.js .slides:not(.is-stacked) .slide{animation:slide-in var(--duration-slow) var(--ease-brand) both}
.js .slides.is-stacked .slide.is-current{animation:slide-in var(--duration-slow) var(--ease-brand) both}
@keyframes slide-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* copy column — wider now that nothing sits beside it */
.slide__copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;max-width:34rem}
/* Copy plate — for slides whose footage is too busy behind the text for the
   gradient scrim alone. Alphas measured per clip; see tokens/colors.css. */
.slide--plate .slide__copy{background:var(--plate-light);border-radius:var(--radius-lg);padding:calc(var(--s)*6) calc(var(--s)*6) calc(var(--s)*7)}
.slide--plate.slide--deep .slide__copy{background:var(--plate-deep)}
@media (min-width:64rem){.slide--plate .slide__copy{padding:calc(var(--s)*9) calc(var(--s)*10) calc(var(--s)*10)}}
@media (min-width:64rem){.slide__copy{max-width:42rem}}
.slide__copy .eyebrow{margin-bottom:calc(var(--s)*4)}
.display{font-size:var(--text-display);font-weight:var(--text-display--weight);line-height:var(--text-display--line-height);letter-spacing:var(--text-display--letter-spacing);color:var(--text-primary);max-width:16ch;margin:0}
.display__accent{color:var(--color-brand-500)}
.slide__lede{margin-top:calc(var(--s)*6)}
.slide__actions{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-top:calc(var(--s)*8)}
.slide__words{margin-top:calc(var(--s)*8)}

/* background film — full-bleed behind the container */
.slide__bg{position:absolute;inset-block:0;left:50%;width:100vw;margin-left:-50vw;overflow:hidden;background:var(--surface-footer)}
.slide--light .slide__bg{background:var(--surface-section-tint)}
.slide__video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--duration-slow) var(--ease-brand)}
.slide__video.is-playing{opacity:1}
.slide__bg::after{content:"";position:absolute;inset:0}
.slide--deep .slide__bg::after{background:linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim-strong) 45%,var(--scrim-soft) 100%)}
.slide--light .slide__bg::after{background:linear-gradient(90deg,var(--scrim-light-strong) 0%,var(--scrim-light-strong) 45%,var(--scrim-light-soft) 100%)}
@media (max-width:63.99rem){
  .slide--deep .slide__bg::after{background:var(--scrim-strong)}
  .slide--light .slide__bg::after{background:var(--scrim-light-strong)}
}

/* dark slides — ink-inverse on the ink-900 scrim (approved pair) */
.slide--deep{color:var(--text-on-dark)}
.slide--deep .display{color:var(--text-on-dark)}
.slide--deep .display__accent{color:var(--color-brand-100)}
.slide--deep .lede{color:var(--color-line)}
.slide--deep .eyebrow{color:var(--color-brand-100)}
.slide--deep .btn--secondary{border-color:var(--color-line);color:var(--text-on-dark)}
.slide--deep .btn--secondary:hover{border-color:var(--text-on-dark);color:var(--text-on-dark)}
.slide--deep .meta{color:var(--color-line)}
.slide--deep .tag{background:var(--color-ink-700);color:var(--text-on-dark)}
.slide--deep :focus-visible{outline-color:var(--focus-ring-on-dark)}

/* light slides — ink-900 on the white scrim; meta steps up from ink-400 */
.slide--light .eyebrow,.slide--light .meta{color:var(--text-muted)}

@media (prefers-reduced-motion: reduce){
  .slide__video{transition:none}
  .js .slide,.js .slides.is-stacked .slide.is-current{animation:none}
}

/* Carousel controls */
.carousel__controls{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--s)*4);padding-block:calc(var(--s)*4);border-top:1px solid var(--border-card)}
.hero.is-deep .carousel__controls{border-top-color:var(--color-ink-700)}
.carousel__dots{display:flex;gap:calc(var(--s)*1);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.dot{display:inline-flex;align-items:center;gap:calc(var(--s)*2);min-height:var(--target-min);min-width:var(--target-min);padding:0 calc(var(--s)*3);border:0;background:none;border-radius:var(--radius);cursor:pointer;font:var(--weight-medium) var(--text-meta)/1 var(--font-sans);letter-spacing:var(--text-meta--letter-spacing);text-transform:uppercase;color:var(--text-muted);font-variant-numeric:tabular-nums}
.dot::before{content:"";width:calc(var(--s)*2);height:calc(var(--s)*2);border-radius:var(--radius);background:var(--border-card);transition:background-color var(--duration-fast) var(--ease-brand)}
.dot[aria-current="true"]{color:var(--interactive-hover)}
.dot[aria-current="true"]::before{background:var(--interactive-hover);width:calc(var(--s)*6)}
.dot__name{display:none}
@media (min-width:64rem){.dot__name{display:inline}}
.hero.is-deep .dot{color:var(--color-line)}
.hero.is-deep .dot[aria-current="true"]{color:var(--text-on-dark)}
.hero.is-deep .dot[aria-current="true"]::before{background:var(--text-on-dark)}
.hero.is-deep .dot::before{background:var(--color-ink-700)}
.carousel__buttons{display:flex;gap:calc(var(--s)*2)}
.hero.is-deep .ctrl{border-color:var(--color-ink-700);color:var(--text-on-dark)}
.hero.is-deep .ctrl:hover{border-color:var(--text-on-dark)}
.hero.is-deep :focus-visible{outline-color:var(--focus-ring-on-dark)}
.ctrl .icon-play{display:none}
.ctrl[aria-pressed="true"] .icon-pause{display:none}
.ctrl[aria-pressed="true"] .icon-play{display:block}

/* slide opacity on slider */

:root { --plate-light: rgba(255,255,255,.94); --plate-deep: rgba(50,48,61,.92); }

/* Stats band — four tiles at lg */
.stats-band{padding-block:calc(var(--s)*10);border-bottom:1px solid var(--border-card)}
.stats--4{gap:calc(var(--s)*8)}
@media (min-width:48rem){.stats--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.stats--4{grid-template-columns:repeat(4,1fr)}}
.stat__sub{font-size:var(--text-sm);color:var(--text-secondary)}
.stat .eyebrow{margin-top:calc(var(--s)*2)}

/* Work grid — three up at lg */
@media (min-width:64rem){.cards--3{grid-template-columns:repeat(3,1fr)}}
/* Lead work card — the newest case study. Spans the grid; from tablet up the
   image sits beside the copy so a full-width card does not become a full-width image. */
.cards>.cards__lead{grid-column:1/-1}
@media (min-width:48rem){
  .cards__lead .card--featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:calc(var(--s)*8);row-gap:calc(var(--s)*2);align-content:center}
  .cards__lead .card--featured>.card__media{grid-column:1;grid-row:1/span 5;align-self:center;margin-bottom:0}
  .cards__lead .card--featured>:not(.card__media){grid-column:2}
}
.card__desc{color:var(--text-secondary);font-size:var(--text-sm)}
.card .tags{margin-top:calc(var(--s)*2)}
.card__cta{display:inline-flex;align-items:center;gap:calc(var(--s)*2);margin-top:calc(var(--s)*3);color:var(--interactive);font-weight:var(--weight-medium);font-size:var(--text-sm)}
.sec-head__link{display:inline-flex;align-items:center;gap:calc(var(--s)*2);min-height:var(--target-min);margin-top:calc(var(--s)*2)}

/* Writing — Substack. Horizontal media rows on surface-alt: image left, copy right.
   Hover matches the card component: border to brand-600 plus a 2px lift. */
.wr__head{display:grid;gap:calc(var(--s)*5);align-items:end;margin-bottom:calc(var(--s)*10)}
@media (min-width:64rem){.wr__head{grid-template-columns:1fr auto}}
.wr__head .h2{margin-top:calc(var(--s)*3)}
.mrows{list-style:none;margin:0;padding:0}
.mrows li+li{margin-top:calc(var(--s)*6)}
.mrow{display:grid;gap:calc(var(--s)*6);background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:border-color var(--duration-fast) var(--ease-brand),transform var(--duration-fast) var(--ease-brand)}
/* Two columns only from 64rem. Between 48 and 64 the media column is too narrow
   for a 16:9 cover beside tall copy — it would crop ~45% of the width away. */
@media (min-width:64rem){.mrow{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:0}}
.mrow:hover,.mrow:focus-visible,.mrow:focus-within{border-color:var(--interactive);transform:translateY(calc(var(--s) * -0.5))}
.mrow__media{overflow:hidden}
.mrow__media .placeholder{aspect-ratio:16/9;height:100%}
/* Article covers. Stacked, the cover keeps its own 16:9 and nothing is lost.
   Side by side from 64rem it fills the cell edge to edge; the cell lands near
   1.67 against the cover's 1.78, so roughly 3% comes off each side. */
.mrow__media{background:var(--surface-section-tint)}
.mrow__media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
@media (min-width:64rem){
  .mrow__media img{height:100%;aspect-ratio:auto}
}
.mrow__body{display:flex;flex-direction:column;gap:calc(var(--s)*3);padding:calc(var(--s)*7)}
.mrow__meta{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);font-size:var(--text-meta);letter-spacing:var(--text-meta--letter-spacing);text-transform:uppercase;color:var(--text-meta-color)}
.mrow__meta .num{font-variant-numeric:tabular-nums}
.mrow__title{font-size:var(--text-h3);font-weight:var(--weight-bold);letter-spacing:var(--text-h3--letter-spacing);line-height:var(--text-h3--line-height)}
.mrow__sum{font-size:var(--text-sm);color:var(--text-secondary)}
.mrow__cta{display:inline-flex;align-items:center;gap:calc(var(--s)*2);margin-top:auto;padding-top:calc(var(--s)*3);color:var(--interactive-hover);font-weight:var(--weight-medium);font-size:var(--text-sm)}
@media (prefers-reduced-motion: reduce){.mrow:hover,.mrow:focus-visible,.mrow:focus-within{transform:none}}

/* About — offset accent frame. Portrait in the figure frame with a brand-50
   block set behind and offset; copy and both pill groups to the right. */
.about{display:grid;gap:calc(var(--s)*12)}
@media (min-width:64rem){.about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:calc(var(--s)*16);align-items:start}}
/* The offset brand-50 block was removed: at this size it peeked ~16px past the
   photo and read as a stray border rather than a deliberate offset. The frame's
   own hairline and shadow carry the edge. */
.about__media{position:relative}
.about__media .figure{position:relative;margin:0}
.about__media .figure__frame{}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__media figcaption{text-align:center;color:var(--text-muted);margin-top:calc(var(--s)*3)}
.about__body .h2{margin-top:calc(var(--s)*3)}
.about__body .body-2{margin-top:calc(var(--s)*5)}
.about__body .eyebrow{display:block}
.about__body h3.eyebrow{margin-top:calc(var(--s)*8);margin-bottom:calc(var(--s)*3)}
.about__actions{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-top:calc(var(--s)*8)}


/* Contact — photographic band. Mount Fuji plate behind ink-inverse text.
   Scrim measured against the real image: white text is 8.2:1 at scrim-strong
   (left, where the copy sits) and 5.05:1 at scrim-soft (right). Falls back to
   surface-deep if the image fails or the browser refuses image-set(). */
.contact-band{position:relative;isolation:isolate;background:var(--surface-footer) center/cover no-repeat;color:var(--text-on-dark)}
@media (min-width:48rem){
  .contact-band{background-image:image-set(url("../assets/Images/footer-bg-1920.webp") type("image/webp"),url("../assets/Images/footer-bg-1920.jpg") type("image/jpeg"))}
}
@media (max-width:47.99rem){
  .contact-band{background-image:image-set(url("../assets/Images/footer-bg-960.webp") type("image/webp"),url("../assets/Images/footer-bg-960.jpg") type("image/jpeg"))}
}
.contact-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim-strong) 45%,var(--scrim-soft) 100%)}
@media (max-width:63.99rem){.contact-band::before{background:var(--scrim-strong)}}
.contact-band h2,.contact-band .h3{color:var(--text-on-dark)}
.contact-band .lede{color:var(--color-line)}
.contact-band .eyebrow{color:var(--color-brand-100)}
.contact-band__motto{color:var(--color-brand-100)}
.contact-band .btn--secondary{border-color:var(--color-line);color:var(--text-on-dark)}
.contact-band .btn--secondary:hover{border-color:var(--text-on-dark);color:var(--text-on-dark)}
.contact-band :focus-visible{outline-color:var(--focus-ring-on-dark)}

/* Contact */
.contact{display:grid;gap:calc(var(--s)*8)}
@media (min-width:64rem){.contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}}
.contact__actions{display:flex;flex-wrap:wrap;gap:calc(var(--s)*3);margin-top:calc(var(--s)*8)}
.contact__aside{display:flex;flex-direction:column;align-items:flex-end;text-align:right}

/* Motion gate — carousel entrance and all transitions */
@media (prefers-reduced-motion: reduce){
  .js .slide,.js .slides.is-stacked .slide.is-current{animation:none}
}

/* ============================================================
   MOBILE / RESPONSIVE SCAFFOLD — append to css/home.css
   ------------------------------------------------------------
   The page layer is min-width first: base styles are phone, and
   48rem (768px) / 64rem (1024px) add to them. Everything below
   follows that, plus a few max-width bands for phone-only fixes.

   Rules:
   - Cascade order matters. Paste this block at the END of
     home.css so these win over the rules above them.
   - Every value stays a token: calc(var(--s)*n) for space,
     var(--text-*) for type, var(--radius*), var(--duration*).
     Never a raw px, hex, or shadow. Exceptions already in the
     file (1px hairlines, .ctrl svg 20px) are the only ones.
   - Nothing below 13px. --text-meta is the floor.
   - Tap targets stay at var(--target-min) (44px).
   - Declarations are commented out. Uncomment what you need;
     delete the rest so the file doesn't grow dead weight.

   Reference widths:
     320  iPhone SE (1st gen), small Android — the floor
     360  Galaxy S / Pixel, most common Android width
     375  iPhone SE 2/3, 13 mini
     390  iPhone 14/15/16
     414  iPhone Plus / Pro Max
     430  iPhone 15/16 Pro Max — the top of the phone band
     768  iPad portrait
     1024 iPad landscape / small laptop — desktop layout starts
   ============================================================ */


/* ============================================================
   1 · ≤ 359px — the floor. iPhone SE 1st gen, Galaxy Fold cover.
   Long words in the display type are what break here.
   ============================================================ */
@media (max-width:22.4375rem){

  /* Header — lockup name can crowd the burger */
  .wordmark--lockup{gap:calc(var(--s)*2)}
  .wordmark--lockup .wordmark__name{font-size:var(--text-sm)}
  .wordmark__badge{width:calc(var(--s)*9);height:calc(var(--s)*9)}

  /* Hero — display type is the usual overflow culprit */
  .slide .display{font-size:var(--text-h1);line-height:1.1}
  .slide__copy{max-width:100%}
  .slide--plate .slide__copy{padding:calc(var(--s)*5) calc(var(--s)*4) calc(var(--s)*6)}
  .slide{padding-block:calc(var(--s)*12) calc(var(--s)*14)}

  /* Buttons — stack full width rather than wrap mid-label */
  .slide__actions{flex-direction:column;align-items:stretch;width:100%}
  .slide__actions .btn{justify-content:center;width:100%}

  /* Carousel — numbers only, arrows keep 44px */
  .carousel__controls{gap:calc(var(--s)*2);display: block;}
  .dot{padding:0 calc(var(--s)*2)}

  /* Writing rows + about + contact — tighten the inner padding */
  .mrow__body{padding:calc(var(--s)*5)}
  .about{gap:calc(var(--s)*8)}
  .contact__aside{align-items:flex-start;text-align:left}
}


/* ============================================================
   2 · ≤ 479px — all phones, portrait. The main mobile band.
   ============================================================ */
@media (max-width:29.9375rem){

  /* Header: role line is already hidden under 48rem (line 19) */
  .nav-panel .btn{width:100%;justify-content:center}

  /* Hero */
  .slide{padding-block:calc(var(--s)*8) calc(var(--s)*8)}
  .slide__copy{max-width:100%}
  .slide--plate .slide__copy{padding:calc(var(--s)*6) calc(var(--s)*5) calc(var(--s)*7)}
  .slide .lede{font-size:var(--text-body)}

  /* Hero word/tag list — wraps to 2–3 lines and adds height */
  .slide__words{gap:calc(var(--s)*2)}

  /* Carousel controls — dots left, buttons right, no wrap */
  .carousel__controls{display: block;}
  .carousel__dots{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .carousel__dots::-webkit-scrollbar{display:none}

  /* Stats — single column is the base; tighten the gap */
  .stats--4{gap:calc(var(--s)*8);text-align: center;}
  .stats-band{padding-block:calc(var(--s)*8)}

  /* Writing — image above copy (base layout), cap the image height */
  .mrow__media img,.mrow__media .placeholder{aspect-ratio:16/9}
  .mrow__body{padding:calc(var(--s)*6)}
  .mrow__title{font-size:var(--text-h4)}

  /* About — the offset frame eats width at phone size */
  .about__actions .btn{width:100%;justify-content:center}

  /* Contact — scrim is already solid under 64rem (line 195) */
  .contact{gap:calc(var(--s)*6)}
  .contact__actions{flex-direction:column;align-items:stretch}
  .contact__actions .btn{width:100%;justify-content:center}
  .contact__aside{align-items:flex-start;text-align:left}

  /* Footer — watermark is the most common horizontal-scroll cause */
  .site-footer__watermark{width:calc(var(--s)*120);right:calc(var(--s)*-10);bottom:calc(var(--s)*-6);opacity:.05}
  .site-footer--mark{padding-block:calc(var(--s)*12) calc(var(--s)*6);text-align: center;}
  .site-footer__grid{gap:calc(var(--s)*8)}
  .site-footer__legal{flex-direction:column;gap:calc(var(--s)*2)}

  .btn--primary, .btn--secondary{width: 100%;}
}


/* ============================================================
   3 · 480px – 767px — large phones landscape, small tablets.
   Two-up starts to make sense here; the file currently waits
   until 48rem for everything.
   ============================================================ */
@media (min-width:30rem) and (max-width:47.9375rem){

  .stats--4{grid-template-columns:repeat(2,1fr)}
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .slide__copy{max-width:36rem}
  .about__media{max-width:26rem}
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================================================
   4 · 768px – 1023px — tablet portrait. Between the two
   existing breakpoints: 48rem rules apply, 64rem ones don't.
   ============================================================ */
@media (min-width:48rem) and (max-width:63.9375rem){

  /* Hero still uses the phone padding here — often too tight */
  .slide{padding-block:calc(var(--s)*20) calc(var(--s)*22);min-height:calc(var(--s)*120)}
  .slide__copy{max-width:38rem}
  .slide--plate .slide__copy{padding:calc(var(--s)*8)}

  /* Cards are single-column until 64rem — two-up reads better */
  .cards--3{grid-template-columns:repeat(2,1fr)}
  .cards--3>*:first-child{grid-column:1/-1}

  /* About stacks until 64rem — cap the portrait so it isn't huge */
  .about__media{max-width:30rem}

  /* Footer grid is single column until 64rem */
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__watermark{width:calc(var(--s)*150)}
}


/* ============================================================
   5 · Phone landscape — short viewport. The hero min-height can
   push the controls off-screen when the phone is turned.
   ============================================================ */
@media (max-width:47.9375rem) and (orientation:landscape){

  .slide{padding-block:calc(var(--s)*10) calc(var(--s)*12);min-height:0}
  .slide .display{font-size:var(--text-h2)}
  .slide__words{display:none}
}

@media (max-height:32rem) and (orientation:landscape){

  .site-header__bar{min-height:calc(var(--s)*14)}
  .slide{padding-block:calc(var(--s)*8) calc(var(--s)*10)}
}


/* ============================================================
   6 · Touch devices — no hover, coarse pointer. Applies on
   phones and tablets at any width. Hover-only affordances
   (card lift, row lift, arrow nudge) never fire here, so the
   hover state should not be the only signal.
   ============================================================ */
@media (hover:none) and (pointer:coarse){

  .mrow:hover,.card:hover{transform:none}
  .dot{min-width:calc(var(--s)*12)}
  .ctrl{width:calc(var(--s)*12);height:calc(var(--s)*12)}
}


/* ============================================================
   7 · 1024px+ and 1280px+ — desktop. The 64rem rules already in
   home.css own this; add here only for wide-screen tuning.
   ============================================================ */
@media (min-width:80rem){

  .slide__copy{max-width:46rem}
  .site-footer__watermark{width:calc(var(--s)*200)}
}


/* ============================================================
   8 · Safety net — keep these ON. They catch the two failures
   that show up most on phones: a wide child forcing horizontal
   scroll, and long unbroken strings (URLs, emails) overflowing.
   ============================================================ */
@media (max-width:47.9375rem){
  .slide__copy,.mrow__body,.about__body,.contact,.site-footer__grid{min-width:0}
  .mrow__title,.slide .display,.about__body,.contact a{overflow-wrap:anywhere}
}