/* ==========================================================================
   CLAUDE SORIANO — PORTFOLIO
   Stylesheet.

   You normally don't need to touch this file. The colours and the two
   photo-crop settings in the block below are the only things worth changing.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Colour ---------------------------------------------------------------- */
  --paper:      #FFFFFF;   /* page background                     */
  --paper-2:    #F4F3F2;   /* light panel fill                    */
  --ink:        #111111;   /* near-black — nav, dark sections     */
  --ink-2:      #1D1D1D;   /* raised surfaces inside dark blocks  */
  --crimson:    #991C1F;   /* the accent. Used sparingly.         */
  --crimson-dk: #7A1518;
  --rose:       #E0A0A2;   /* small accent text on black — legible */
  --steel:      #6E6E6E;   /* muted body text                     */
  --rule:       rgba(17,17,17,.14);
  --rule-light: rgba(255,255,255,.14);

  /* Type ------------------------------------------------------------------ */
  --display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout ---------------------------------------------------------------- */
  --gutter: clamp(18px, 4vw, 56px);
  --maxw:   1560px;
  --bar-h:  70px;   /* nav height at the top of the page */
  --bar-s:  58px;   /* nav height once you start scrolling */

  /* Photo cropping --------------------------------------------------------
     How much of each cut-out photo is sliced off by the bottom edge of its
     section. Bigger number = more of the legs cut away.                     */
  --hero-cut:  13%;
  --about-cut: 22%;

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--bar-s) + 14px);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,figure,dl,dd{ margin:0; }
ul{ list-style:none; padding:0; }

::selection{ background:var(--crimson); color:#fff; }
:focus-visible{ outline:2px solid var(--crimson); outline-offset:3px; }
.dark :focus-visible, .bar :focus-visible, .drawer :focus-visible{ outline-color:#fff; }

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

/* --------------------------------------------------------------------------
   3. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--display);
  font-weight:900;
  font-stretch:62%;
  text-transform:uppercase;
  line-height:.84;
  letter-spacing:-.005em;
}
.label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.5;
}
.label--accent{ color:var(--crimson); }
.label--muted{ color:var(--steel); }
.dark .label--accent{ color:var(--rose); }

.prose{ font-size:clamp(15px,1.05vw,17px); line-height:1.66; }
.prose + .prose{ margin-top:1.05em; }

/* --------------------------------------------------------------------------
   4. PAGE FURNITURE
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.grain{
  position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (max-width:700px){ .grain{ display:none; } }

.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--crimson); z-index:850; transition:width .1s linear;
}

.sec-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-block:14px; border-bottom:1px solid var(--rule);
  margin-bottom:clamp(26px,4vw,52px);
}
.dark .sec-head{ border-bottom-color:var(--rule-light); }
.sec-head__num{ color:var(--crimson); }
.dark .sec-head__num{ color:var(--rose); }
.sec-head__title{
  font-family:var(--display); font-weight:900; font-stretch:70%;
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(19px,2vw,28px); line-height:1;
}
.sec-head__meta{ margin-left:auto; }
@media (max-width:640px){ .sec-head__meta{ margin-left:0; flex-basis:100%; } }

/* --------------------------------------------------------------------------
   5. TOP BAR — black, turning to frosted glass on scroll
   -------------------------------------------------------------------------- */
.bar{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--bar-h);
  display:flex; align-items:center;
  background-color:var(--ink);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:height .4s var(--ease), background-color .4s var(--ease),
             box-shadow .4s var(--ease), border-color .4s var(--ease);
}

/* The glass state. Applied as soon as the page scrolls. */
.bar--glass{
  height:var(--bar-s);
  background-color:rgba(17,17,17,.58);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
          backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 12px 34px -16px rgba(0,0,0,.55);
}
/* Browsers without backdrop-filter get a near-solid bar instead of a
   see-through one, so the nav text never lands on unreadable content. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .bar--glass{ background-color:rgba(17,17,17,.94); }
}
/* While the mobile menu is open the bar stays solid. */
.bar--solid, .bar--solid.bar--glass{
  background-color:var(--ink);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
}

.bar__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:clamp(14px,2.4vw,30px);
}
.brand{
  display:flex; align-items:center; gap:11px; margin-right:auto; min-width:0;
  padding-block:9px;            /* a comfortable touch target, not just the logo */
}
.brand__mark{ width:28px; height:28px; flex:none; }
.brand__mark img{ width:100%; height:100%; }
.brand__name{
  font-family:var(--display); font-weight:900; font-stretch:68%;
  text-transform:uppercase; font-size:16px; letter-spacing:.02em;
  white-space:nowrap; line-height:1;
}
.brand__role{
  display:block; font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--rose);
  margin-top:3px; white-space:nowrap;
}
@media (max-width:420px){ .brand__role{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); }
.nav a{ position:relative; padding-block:5px; color:rgba(255,255,255,.82); transition:color .22s; }
.nav a:hover, .nav a[aria-current="page"]{ color:#fff; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--rose); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* Buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; background-color:var(--crimson); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  border:1.5px solid var(--crimson);
  transition:background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.btn:hover{ background-color:var(--crimson-dk); border-color:var(--crimson-dk); transform:translateY(-2px); }
.bar .btn{ padding:10px 18px; }
.bar .btn:hover{ background-color:#fff; border-color:#fff; color:var(--ink); }
.btn--ghost{ background-color:transparent; color:currentColor; border-color:currentColor; }
.btn--ghost:hover{ background-color:var(--crimson); border-color:var(--crimson); color:#fff; }

/* Mobile menu -------------------------------------------------------------- */
.burger{ display:none; width:40px; height:40px; place-items:center; flex:none; margin-right:-8px; }
.burger span{ display:block; width:22px; height:2px; background:#fff; transition:transform .3s var(--ease), opacity .2s; }
.burger span + span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:790;
  padding:calc(var(--bar-h) + 26px) var(--gutter) 34px;
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column;
  transform:translateY(-101%); transition:transform .5s var(--ease), visibility .5s;
  overflow-y:auto; overscroll-behavior:contain;
  visibility:hidden;
}
.drawer[data-open="true"]{ transform:translateY(0); visibility:visible; }
.drawer a{
  font-family:var(--display); font-weight:900; font-stretch:66%;
  text-transform:uppercase; font-size:clamp(32px,10vw,58px); line-height:1.04;
  border-bottom:1px solid var(--rule-light); padding-block:13px;
}
.drawer a:hover{ color:var(--rose); }
.drawer__foot{ margin-top:auto; padding-top:30px; display:grid; gap:8px; }
.drawer__foot a{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; border:0; line-height:1.6;
  padding-block:11px;           /* touch target */
}

@media (max-width:940px){
  .nav, .bar .btn{ display:none; }
  .burger{ display:grid; }
}

/* --------------------------------------------------------------------------
   6. HERO — one full screen tall, photo cut by the bottom edge
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding-top:var(--bar-h);
  display:flex; flex-direction:column;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.hero__wrap{
  position:relative;
  flex:1 1 auto;
  display:flex; flex-direction:column;
  min-height:0;
}

.hero__tags{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  padding-block:clamp(14px,2.4vh,26px) clamp(10px,2vh,22px);
  flex:none;
}
.hero__tag{ position:relative; padding-top:13px; }
.hero__tag::before{ content:""; position:absolute; top:0; left:0; width:24px; height:3px; background:var(--crimson); }
.hero__tag:nth-child(2){ text-align:center; }
.hero__tag:nth-child(2)::before{ left:50%; transform:translateX(-50%); }
.hero__tag:nth-child(3){ text-align:right; }
.hero__tag:nth-child(3)::before{ left:auto; right:0; }

/* The stage is everything below the tag row. The portrait is positioned
   against it, so it can never collide with the tags and its bottom edge is
   exactly the bottom edge of the hero. */
.hero__stage{
  position:relative;
  flex:1 1 auto;
  display:flex;
  min-height:0;
}
.hero__copy{
  flex:0 1 auto;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(18px,3.2vh,44px);
  padding-bottom:clamp(20px,4vh,56px);
  width:min(58%,940px);
  min-height:0;
}

/* --- The headline. Sized against viewport height as well as width, so it
       never pushes the hero past a single screen on a short laptop. -------- */
.hero__headline{ font-size:max(54px, min(11vw, 15.4vh)); }
.hl-line{ position:relative; display:block; }
/* The off-register colour copy. Drawn from data-text so the words live in the
   heading only once — a duplicated h1 reads badly to a crawler. */
.hl-line::before{
  content:attr(data-text);
  position:absolute; inset:0; color:var(--crimson);
  transform:translate(var(--dx,10px), var(--dy,6px));
  opacity:.85; z-index:0; pointer-events:none;
  transition:transform 1.1s var(--ease), opacity 1.1s var(--ease);
}
.hl-line__ink{ position:relative; z-index:1; display:block; }
.is-registered .hl-line::before{ transform:translate(0,0); opacity:0; }
.hl-line--accent .hl-line__ink{ color:var(--crimson); }
.hl-line--accent::before{ color:var(--ink); }
.hl-dot{
  display:inline-block; width:.15em; height:.15em; background:var(--ink);
  margin-left:.07em; vertical-align:baseline;
}


.hero__intro{ max-width:52ch; }
.hero__intro-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.hero__intro-head::after{ content:""; flex:1; height:1.5px; background:var(--ink); max-width:64px; }
.hero__intro-title{
  font-family:var(--display); font-weight:900; font-stretch:70%;
  text-transform:uppercase; font-size:19px; line-height:1;
}
.hero__badge{
  display:flex; align-items:center; gap:15px;
  margin-top:clamp(14px,2.4vh,26px); padding-top:clamp(12px,2vh,20px);
  border-top:1px solid var(--rule);
}
.hero__badge svg{ flex:none; }

/* --- Portrait, anchored to the bottom of the hero ------------------------- */
.hero__figure{
  position:absolute; z-index:1;
  right:0; top:0; bottom:0;
  width:min(40%,540px);
  overflow:hidden;
  pointer-events:none;
}
.hero__figure::before{                /* crimson plate behind the figure */
  content:""; position:absolute; z-index:0;
  left:6%; bottom:16%; width:80%; height:46%;
  background:var(--crimson);
}
/* --- How the cut works ----------------------------------------------------
   The photo is pinned to the BOTTOM of its box and pushed past it by the cut
   amount, so the bottom edge of the section always slices it. It is sized by
   width, with max-height stopping a tall photo from running off the top.

   Whichever of those two limits binds, the cut survives and the sides are
   never cropped — so a wide scene photo and a tall background-removed cut-out
   both work, and swapping one for the other needs no change here.           */
.hero__photo{
  position:absolute; z-index:1;
  left:50%;
  bottom:calc(-1 * var(--hero-cut));
  transform:translateX(-50%);
  width:100%;
  height:auto;
  max-height:calc(100% + var(--hero-cut));
  object-fit:contain;
  object-position:center bottom;
  filter:grayscale(1) contrast(1.06);
}
.hero__card{
  position:absolute; z-index:2; right:0; bottom:clamp(14px,6vh,64px);
  background:var(--ink); color:#fff;
  padding:15px 20px 17px; min-width:180px;
}
.hero__card-name{
  font-family:var(--display); font-weight:900; font-stretch:66%;
  text-transform:uppercase; font-size:clamp(19px,1.8vw,26px); line-height:.95;
}
.hero__card-role{ margin-top:7px; color:var(--rose); }
.crosshair{ position:absolute; top:8%; right:3%; z-index:2; opacity:.35; }

/* Tablet ------------------------------------------------------------------- */
@media (max-width:1100px){
  .hero__copy{ width:min(56%,700px); }
  .hero__figure{ width:min(40%,420px); }
  .crosshair{ display:none; }
}

/* Stacked hero — phones, and any narrow-but-tall screen such as a tablet held
   upright, where a side-by-side hero squeezes the photo into a sliver.       */
@media (max-width:900px), (max-width:1100px) and (orientation:portrait){
  .hero{ min-height:auto; }
  .hero__tags{ grid-template-columns:1fr; gap:12px; }
  .hero__tag:nth-child(2), .hero__tag:nth-child(3){ text-align:left; }
  .hero__tag:nth-child(2)::before{ left:0; transform:none; }
  .hero__tag:nth-child(3)::before{ left:0; right:auto; }

  .hero__stage{ flex-direction:column; }
  .hero__copy{ width:100%; padding-bottom:clamp(22px,4vw,34px); }
  .hero__headline{ font-size:clamp(46px,13.5vw,124px); }

  /* Capped and centred, so the colour plate, the photo and the name card stay
     one group instead of drifting apart across a wide tablet. The width is
     explicit: auto inline margins cancel flex stretch, which would collapse
     this box to nothing since everything inside it is positioned.            */
  .hero__figure{
    position:relative; right:auto; top:auto; bottom:auto;
    width:min(100%,560px); margin-inline:auto;
    height:min(52svh,430px);
    margin-top:auto;
    --hero-cut:18%;
  }
  .hero__figure::before{ left:0; width:62%; top:auto; bottom:14%; height:56%; }
  .hero__card{ bottom:auto; top:10%; right:0; min-width:0; padding:12px 16px 14px; }
}
@media (max-width:520px){
  /* On a phone the photo runs right to both edges of the screen. */
  .hero__figure{
    height:min(50svh,420px);
    width:calc(100% + var(--gutter) * 2);
    margin-inline:calc(var(--gutter) * -1);
  }
  .hero__card{ top:6%; }
}

/* --------------------------------------------------------------------------
   7. MARQUEE
   -------------------------------------------------------------------------- */
.marquee{
  background:var(--ink); color:#fff;
  padding-block:15px; overflow:hidden; white-space:nowrap;
}
.marquee__track{ display:inline-flex; will-change:transform; animation:slide 46s linear infinite; }
.marquee__group{ display:inline-flex; align-items:center; }
.marquee__item{
  font-family:var(--display); font-weight:900; font-stretch:70%;
  text-transform:uppercase; font-size:clamp(18px,2.4vw,32px);
  padding-inline:20px; display:inline-flex; align-items:center; gap:20px;
}
.marquee__item::after{ content:""; width:8px; height:8px; background:var(--crimson); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* --------------------------------------------------------------------------
   8. SELECTED WORK
   -------------------------------------------------------------------------- */
.dark{ background:var(--ink); color:#fff; }
.work{ padding-block:clamp(44px,6vw,88px); }

.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,34px); }
@media (max-width:1000px){ .work__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){  .work__grid{ grid-template-columns:1fr; } }

.card{ display:block; }
.card__num{ color:var(--rose); margin-bottom:10px; }
.card__media{ position:relative; overflow:hidden; background:var(--ink-2); aspect-ratio:4/3; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .card__media img,
.card:focus-visible .card__media img{ transform:scale(1.045); }
.card__arrow{
  position:absolute; right:0; bottom:0; z-index:2;
  width:44px; height:44px; background:var(--crimson); color:#fff;
  display:grid; place-items:center;
  transition:width .35s var(--ease), height .35s var(--ease);
}
.card:hover .card__arrow, .card:focus-visible .card__arrow{ width:54px; height:54px; }
.card__body{ padding-top:14px; border-top:1px solid var(--rule-light); margin-top:14px; }
.card__title{
  font-family:var(--display); font-weight:900; font-stretch:70%;
  text-transform:uppercase; font-size:clamp(16px,1.5vw,22px); line-height:1.04;
  transition:color .25s;
}
.card:hover .card__title, .card:focus-visible .card__title{ color:var(--rose); }
.card__sub{ margin-top:5px; color:#9d9d9d; }
.work__more{ margin-top:clamp(28px,4vw,52px); }

/* --------------------------------------------------------------------------
   9. THREE-PANEL BAND
   -------------------------------------------------------------------------- */
.band{ display:grid; grid-template-columns:1.15fr .9fr .75fr; border-bottom:1px solid var(--rule); }
@media (max-width:1100px){ .band{ grid-template-columns:1fr 1fr; } .band .panel--mid{ grid-column:1 / -1; order:3; } }
@media (max-width:760px){  .band{ grid-template-columns:1fr; } }

.panel{ padding:clamp(28px,3.4vw,60px) clamp(20px,3vw,52px); }
.panel--mid{ background:var(--crimson); color:#fff; position:relative; overflow:hidden; }
.panel--mid::after{
  content:""; position:absolute; right:0; bottom:0;
  border-style:solid; border-width:0 0 80px 80px;
  border-color:transparent transparent var(--ink) transparent;
}
.panel__head{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(18px,2.4vw,34px); }
.panel__head::after{ content:""; flex:1; height:1.5px; background:currentColor; opacity:.8; max-width:76px; }
.panel__title{
  font-family:var(--display); font-weight:900; font-stretch:68%;
  text-transform:uppercase; font-size:clamp(23px,2.4vw,36px); line-height:.94;
}

/* Accordion --------------------------------------------------------------- */
.acc__item{ border-bottom:1px solid var(--rule); }
.acc__btn{ width:100%; display:flex; align-items:center; gap:15px; padding-block:15px; text-align:left; }
.acc__n{ color:var(--crimson); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; flex:none; }
.acc__label{
  flex:1; font-family:var(--display); font-weight:800; font-stretch:75%;
  text-transform:uppercase; font-size:clamp(15px,1.25vw,19px); letter-spacing:.02em;
  transition:color .2s;
}
.acc__btn:hover .acc__label{ color:var(--crimson); }
.acc__sign{ position:relative; width:14px; height:14px; flex:none; }
.acc__sign::before,.acc__sign::after{ content:""; position:absolute; background:var(--ink); transition:transform .3s var(--ease); }
.acc__sign::before{ left:0; top:6px; width:14px; height:2px; }
.acc__sign::after{ left:6px; top:0; width:2px; height:14px; }
.acc__item[data-open="true"] .acc__sign::after{ transform:scaleY(0); }
.acc__item[data-open="true"] .acc__label{ color:var(--crimson); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.acc__item[data-open="true"] .acc__panel{ grid-template-rows:1fr; }
.acc__inner{ overflow:hidden; }
.acc__inner p{ padding:0 0 18px 32px; color:var(--steel); font-size:14.5px; line-height:1.6; max-width:52ch; }

/* Manifesto --------------------------------------------------------------- */
.manifesto p{ font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.62; }
.manifesto p + p{ margin-top:1.05em; }
.manifesto__kicker{
  margin-top:clamp(22px,3vw,40px); font-style:italic;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.7; position:relative; z-index:1;
}

/* Toolkit ----------------------------------------------------------------- */
.toolkit li{
  display:flex; align-items:center; gap:14px;
  padding-block:9px; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
}
.toolkit li::after{ content:""; margin-left:auto; width:7px; height:7px; background:var(--ink); flex:none; }
.toolkit li:hover::after{ background:var(--crimson); }

/* --------------------------------------------------------------------------
   9b. FAQ
   -------------------------------------------------------------------------- */
.faq{ padding-block:clamp(44px,6vw,88px); border-bottom:1px solid var(--rule); }
/* Multi-column rather than grid: a grid aligns its rows, so opening one
   answer would punch a matching hole in the other column. */
.faq__list{
  column-count:2;
  column-gap:clamp(24px,4vw,68px);
}
.faq__item{ break-inside:avoid; -webkit-column-break-inside:avoid; }
@media (max-width:860px){ .faq__list{ column-count:1; } }

.faq__item{ border-bottom:1px solid var(--rule); break-inside:avoid; }
.faq__item h3{ margin:0; font:inherit; }
.faq__btn{
  width:100%; display:flex; align-items:flex-start; gap:14px;
  padding-block:16px; text-align:left;
}
.faq__n{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--crimson); flex:none; padding-top:3px;
}
.faq__q{
  flex:1;
  font-family:var(--display); font-weight:800; font-stretch:76%;
  text-transform:uppercase; font-size:clamp(14px,1.15vw,17px);
  letter-spacing:.015em; line-height:1.25;
  transition:color .2s;
}
.faq__btn:hover .faq__q{ color:var(--crimson); }
.faq__item[data-open="true"] .faq__q{ color:var(--crimson); }
.faq__item .acc__sign{ margin-top:3px; }
.faq__item[data-open="true"] .acc__sign::after{ transform:scaleY(0); }
/* the open-state rule for .acc__panel is scoped to .acc__item, so the FAQ
   needs its own or the answers never expand */
.faq__item[data-open="true"] .acc__panel{ grid-template-rows:1fr; }
.faq__a{
  padding:0 0 18px 25px;
  color:var(--steel); font-size:14.5px; line-height:1.65; max-width:56ch;
}

/* --------------------------------------------------------------------------
   10. ABOUT — the photo is cut by the bottom edge of the section
   -------------------------------------------------------------------------- */
.about{
  position:relative;
  overflow:hidden;
  padding-top:clamp(40px,5.5vw,86px);
  border-bottom:1px solid var(--rule);
}
.about__grid{
  display:grid;
  grid-template-columns:minmax(230px,.8fr) minmax(0,1.6fr);
  gap:clamp(24px,4vw,68px);
  align-items:stretch;
}

/* The figure column reserves the space; the photo inside it is free to spill
   past the section's bottom edge, where `overflow:hidden` slices it off. */
.about__figure{
  position:relative;
  min-height:360px;
}
.about__figure::after{                /* crimson plate behind the figure */
  content:""; position:absolute; z-index:0;
  left:0; bottom:0; width:74%; height:36%;
  background:var(--crimson);
}
/* Same bottom-anchored rule as the hero photo — see the note up there. */
.about__photo{
  position:absolute; z-index:1;
  left:50%;
  bottom:calc(-1 * var(--about-cut));
  transform:translateX(-50%);
  width:100%;
  height:auto;
  max-height:calc(100% + var(--about-cut));
  object-fit:contain;
  object-position:center bottom;
  filter:grayscale(1) contrast(1.05);
}
.about__text{ padding-bottom:clamp(40px,5.5vw,86px); }
.about__lead{
  font-family:var(--display); font-weight:900; font-stretch:72%;
  text-transform:uppercase; font-size:clamp(23px,3vw,44px); line-height:1;
  margin-bottom:clamp(18px,2.4vw,32px);
}
.about__body p{ color:#3A3A3A; }
.about__facts{
  margin-top:clamp(24px,3vw,44px);
  display:grid; grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--rule);
}
.about__fact{ padding:15px 20px 15px 0; border-bottom:1px solid var(--rule); }
.about__fact dt{ color:var(--crimson); }
.about__fact dd{
  margin:6px 0 0;
  font-family:var(--display); font-weight:800; font-stretch:76%;
  text-transform:uppercase; font-size:clamp(13px,1.15vw,17px); line-height:1.14;
}
@media (max-width:900px), (max-width:1100px) and (orientation:portrait){
  .about{ padding-top:clamp(34px,6vw,60px); }
  .about__grid{ grid-template-columns:1fr; gap:0; }
  .about__figure{ min-height:0; height:min(52svh,420px); order:2; margin-top:clamp(26px,5vw,44px); }
  .about__text{ order:1; padding-bottom:0; }
}
@media (max-width:520px){
  .about__facts{ grid-template-columns:1fr; }
  .about__figure{ height:min(46svh,340px); }
}

/* --------------------------------------------------------------------------
   11. CONTACT / FOOTER
   -------------------------------------------------------------------------- */
.contact{ padding-block:clamp(46px,6vw,92px); }
.contact__grid{
  display:grid; grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,60px); align-items:start;
}
@media (max-width:1000px){ .contact__grid{ grid-template-columns:1fr; } }

.contact__rail{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:14px; padding-right:6px;
}
.contact__rail::after{ content:""; width:10px; height:10px; background:var(--crimson); }
@media (max-width:1000px){ .contact__rail{ display:none; } }

.contact__heading{ font-size:clamp(36px,5.4vw,80px); }
.contact__heading .accent{ color:var(--rose); }
.contact__body{ margin-top:20px; max-width:40ch; color:#a8a8a8; }
.contact__list{ margin-top:clamp(22px,3vw,38px); display:grid; gap:2px; }
.contact__item{
  display:flex; align-items:center; gap:14px;
  padding-block:11px; border-bottom:1px solid var(--rule-light);
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  transition:color .2s, padding-left .25s var(--ease);
  word-break:break-word;
}
.contact__item:hover{ color:var(--rose); padding-left:8px; }
.contact__ico{ width:26px; height:26px; border:1.5px solid currentColor; display:grid; place-items:center; flex:none; border-radius:50%; }

/* Form -------------------------------------------------------------------- */
.form{ display:grid; gap:13px; }
.field label{ display:block; margin-bottom:7px; }
.field input, .field textarea{
  width:100%; padding:13px 14px;
  background:transparent; color:#fff;
  border:1px solid var(--rule-light);
  font-family:var(--body); font-size:16px;
  transition:border-color .25s, background-color .25s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--rose); background:rgba(255,255,255,.05);
}
.field textarea{ resize:vertical; min-height:112px; }
.form__note{ font-size:12px; min-height:18px; }
.form__note--ok{ color:#7FCB8F; }
.form__note--err{ color:var(--rose); }

/* Footer logo ------------------------------------------------------------- */
.foot__logo{ flex:none; display:block; line-height:0; opacity:.92; transition:opacity .25s; }
.foot__logo:hover{ opacity:1; }
.foot__logo img{ width:46px; height:46px; }

.foot{
  border-top:1px solid var(--rule-light); margin-top:clamp(36px,5vw,72px);
  padding-top:24px; display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center;
}
.foot__social{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-left:auto; }
.foot__social a{ padding:11px 4px; }   /* touch target around short labels */
.foot__social a:hover{ color:var(--rose); }
.foot__areas{ flex-basis:100%; color:#8a8a8a; font-size:10.5px; line-height:1.8; }

/* --------------------------------------------------------------------------
   12. WORK ARCHIVE
   -------------------------------------------------------------------------- */
.page-head{ padding-top:calc(var(--bar-h) + clamp(30px,5vw,74px)); padding-bottom:clamp(24px,3.5vw,50px); }
.page-head__title{ font-size:clamp(52px,10vw,150px); }
.page-head__intro{ margin-top:22px; max-width:62ch; }
.page-head__meta{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:22px; padding-top:18px; border-top:1px solid var(--rule); }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(22px,3vw,40px); }
.filter{
  padding:8px 16px; border:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:background-color .22s, color .22s, border-color .22s;
}
.filter:hover{ border-color:var(--ink); }
.filter[aria-pressed="true"]{ background-color:var(--ink); color:#fff; border-color:var(--ink); }

.archive{ padding-bottom:clamp(46px,6vw,92px); }
.archive__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,40px); }
@media (max-width:1000px){ .archive__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){  .archive__grid{ grid-template-columns:1fr; } }
.archive .card__body{ border-top-color:var(--rule); }
.archive .card__sub{ color:var(--steel); }
.archive .card__num{ color:var(--crimson); }
.archive .card__media{ background:var(--paper-2); }
.archive .card:hover .card__title, .archive .card:focus-visible .card__title{ color:var(--crimson); }
.card[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   13. PROJECT DETAIL
   -------------------------------------------------------------------------- */
.proj__back{ margin-bottom:8px; }
.proj__back a{ display:inline-block; padding:10px 6px 10px 0; }
.proj__title{ font-size:clamp(42px,8vw,124px); }
.proj__meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding-block:22px; border-block:1px solid var(--rule);
  margin-bottom:clamp(28px,4vw,56px);
}
@media (max-width:900px){ .proj__meta{ grid-template-columns:repeat(2,1fr); } }
.proj__meta dt{ color:var(--crimson); margin-bottom:6px; }
.proj__meta dd{
  font-family:var(--display); font-weight:800; font-stretch:76%;
  text-transform:uppercase; font-size:clamp(13px,1.1vw,16px); line-height:1.16;
}
.proj__lead{
  font-family:var(--display); font-weight:900; font-stretch:72%;
  text-transform:uppercase; font-size:clamp(21px,3vw,42px); line-height:1.02;
  max-width:20ch; margin-bottom:clamp(20px,3vw,40px);
}
.proj__cols{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(22px,4vw,64px); align-items:start; }
@media (max-width:860px){ .proj__cols{ grid-template-columns:1fr; } }
/* Case-study blocks: what was delivered, and how it was done. */
.proj__detail{
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:clamp(22px,4vw,64px);
  margin-top:clamp(32px,4.5vw,64px);
  padding-top:clamp(26px,3.5vw,48px);
  border-top:1px solid var(--rule);
}
@media (max-width:860px){ .proj__detail{ grid-template-columns:1fr; gap:clamp(26px,5vw,40px); } }
.proj__h{
  font-family:var(--display); font-weight:900; font-stretch:70%;
  text-transform:uppercase; font-size:clamp(17px,1.7vw,24px); line-height:1;
  margin-bottom:clamp(16px,2vw,26px);
}
.proj__list li{
  padding:11px 0 11px 22px; position:relative;
  border-bottom:1px solid var(--rule);
  font-size:15px; line-height:1.45;
}
.proj__list li::before{
  content:""; position:absolute; left:0; top:18px;
  width:8px; height:8px; background:var(--crimson);
}
.proj__steps{ display:grid; gap:clamp(16px,2vw,26px); counter-reset:step; }
.proj__steps li{ display:flex; gap:16px; align-items:flex-start; }
.proj__step-n{ color:var(--crimson); flex:none; padding-top:3px; }
.proj__steps h3{
  font-family:var(--display); font-weight:800; font-stretch:76%;
  text-transform:uppercase; font-size:clamp(13px,1.1vw,16px); letter-spacing:.02em;
  margin-bottom:5px; line-height:1.2;
}
.proj__steps p{ color:var(--steel); font-size:14.5px; line-height:1.6; max-width:58ch; }

.proj__gallery{ display:grid; gap:clamp(14px,2vw,30px); margin-block:clamp(32px,5vw,80px); }
.proj__gallery img{ width:100%; background:var(--paper-2); }
/* Screens from the live site. Kept to a two-up grid so each one is shown at
   roughly the size it was captured at rather than blown up. */
.proj__showcase{ margin-bottom:clamp(32px,5vw,72px); }
.proj__shots{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,2vw,26px);
}
@media (max-width:760px){ .proj__shots{ grid-template-columns:1fr; } }
.proj__shots figure{ margin:0; border:1px solid var(--rule); background:var(--paper-2); }
.proj__shots img{ width:100%; height:auto; display:block; }

.proj__next{
  border-top:1px solid var(--rule); padding-block:clamp(28px,4vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.proj__next-title{
  font-family:var(--display); font-weight:900; font-stretch:66%;
  text-transform:uppercase; font-size:clamp(26px,5vw,68px); line-height:.94;
  transition:color .25s;
}
.proj__next:hover .proj__next-title{ color:var(--crimson); }

/* --------------------------------------------------------------------------
   14. REVEAL + MOTION PREFERENCES
   -------------------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .hl-line::before{ opacity:0; transform:none; }
  .marquee__track{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   15. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .bar,.drawer,.grain,.progress,.marquee,.hero__figure,.card__arrow{ display:none !important; }
  body{ color:#000; background:#fff; }
  .dark,.contact{ background:#fff !important; color:#000 !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}