/* ==========================================================================
   Studio2a — main stylesheet
   Everything lives here so caching plugins can minify and combine it.
   Sections:
     1. Tokens
     2. Base
     3. Header + flyout
     4. Hero / slider
     5. Page sections
     6. Portfolio grid
     7. Accordion
     8. Tail (pre-footer) + footer
     9. Animation
    10. Responsive
   ========================================================================== */

:root{
    --white:#FFFFFF; --black:#000000; --ink:#000000;
    --body:#66757F; --rule:#E5E5E5; --rule-dark:#333333; --wash:#F4F5F6;
    --font:'Open Sans', Helvetica, Arial, sans-serif;
    --gutter:clamp(22px, 4.5vw, 96px);
    --maxw:1800px;
    --measure:780px;
    --rhythm:140px;
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;scrollbar-gutter:stable;}
  body{margin:0;background:var(--white);color:var(--body);font-family:var(--font);-webkit-font-smoothing:antialiased;}
  img{display:block;width:100%;height:auto;}
  a{color:inherit;text-decoration:none;}
  :focus-visible{outline:2px solid currentColor;outline-offset:4px;}
  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
  .col{max-width:var(--measure);margin-left:auto;margin-right:auto;}

  /* ---------- top bar + flyout (shared system) ---------- */
  .topbar{
    position:fixed;top:0;left:0;right:0;z-index:110;
    display:flex;justify-content:space-between;align-items:center;
    padding:20px var(--gutter);background:var(--white);
    border-bottom:1px solid transparent;transition:border-color .4s var(--ease);
  }
  .topbar.solid{border-bottom-color:var(--rule);}
  .topbar .logo{font-weight:700;font-size:15px;letter-spacing:0.22em;color:var(--ink);}
  .burger{
    width:44px;height:44px;border:none;background:none;padding:0;cursor:pointer;
    display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;
    z-index:120;position:relative;
  }
  .burger span{
    width:26px;height:2px;background:var(--ink);display:block;
    transition:transform .45s var(--ease),width .35s var(--ease),background .3s var(--ease),opacity .3s var(--ease);
  }
  .burger:hover span:nth-child(2){width:18px;}
  body.nav-open .burger span{background:var(--white);}
  body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg);width:26px;}
  body.nav-open .burger span:nth-child(2){opacity:0;}
  body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);width:26px;}
  body.nav-open .topbar{background:transparent;border-bottom-color:transparent;}
  body.nav-open .topbar .logo{color:var(--white);}

  .flyout{
    position:fixed;top:0;left:0;right:0;z-index:100;background:var(--black);color:var(--white);
    transform:translateY(-101%);transition:transform .72s var(--ease);
    padding:120px var(--gutter) 70px;max-height:100vh;overflow-y:auto;
  }
  body.nav-open .flyout{transform:translateY(0);}
  .flyout .inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr 0.75fr;gap:70px;align-items:start;}
  .flyout .primary{list-style:none;margin:0;padding:0;}
  .flyout .primary li{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
  body.nav-open .flyout .primary li{opacity:1;transform:none;}
  body.nav-open .flyout .primary li:nth-child(1){transition-delay:.22s;}
  body.nav-open .flyout .primary li:nth-child(2){transition-delay:.30s;}
  body.nav-open .flyout .primary li:nth-child(3){transition-delay:.38s;}
  body.nav-open .flyout .primary li:nth-child(4){transition-delay:.46s;}
  .flyout .primary a{display:inline-block;position:relative;font-size:52px;line-height:76px;font-weight:700;color:var(--white);text-transform:uppercase;}
  .flyout .primary a::after{content:"";position:absolute;left:0;bottom:14px;width:0;height:2px;background:var(--white);transition:width .5s var(--ease);}
  .flyout .primary a:hover::after,.flyout .primary li.active a::after{width:100%;}
  .flyout .secondary{padding-top:16px;min-height:300px;}
  .flyout .panel{display:none;}
  .flyout .panel.show{display:block;}
  .flyout .panel .label{font-size:12px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:#8A9299;margin:0 0 26px;}
  .flyout .panel ul{list-style:none;margin:0;padding:0;}
  .flyout .panel li{margin-bottom:16px;}
  .flyout .panel a{font-size:19px;line-height:30px;color:var(--white);position:relative;display:inline-block;}
  .flyout .panel a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--white);transition:width .45s var(--ease);}
  .flyout .panel a:hover::after{width:100%;}
  .flyout .markcol{display:flex;align-items:flex-start;justify-content:flex-end;padding-top:14px;opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  body.nav-open .flyout .markcol{opacity:1;transform:none;transition-delay:.5s;}
  .flyout .markcol .mark{text-align:right;}
  .flyout .markcol .mark img{width:130px;height:auto;display:block;margin-left:auto;}
  .flyout .markcol .tag{display:block;font-size:12px;letter-spacing:0.16em;color:#8A9299;margin-top:16px;text-transform:uppercase;}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;opacity:0;pointer-events:none;transition:opacity .5s var(--ease);}
  body.nav-open .scrim{opacity:1;pointer-events:auto;}
  body.nav-open{overflow:hidden;}

  /* ================= 0. HERO — title, statement, tabs, then media ================= */
  .stage{padding-top:calc(86px + var(--rhythm));}
  .stage .eyebrow{margin:0 0 24px;}
  .stage h1{
    font-size:clamp(28px,3.4vw,56px);line-height:1.16;font-weight:700;
    text-transform:uppercase;color:var(--ink);margin:0 0 48px;max-width:24ch;
  }

  /* slider sits below the tab row, no visible controls */
  .hero-media{
    position:relative;width:100%;aspect-ratio:16/9;
    overflow:hidden;background:#000;margin-top:70px;
  }
  .hero-media .slide{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    opacity:0;transform:scale(1.06);
    transition:opacity 1.2s var(--ease);
  }
  .hero-media .slide.active{opacity:1;transform:scale(1);transition:opacity 1.2s var(--ease), transform 8s linear;}
  /* a slide can also hold <video autoplay muted loop playsinline> — same slot, same behaviour */
  .hero-media .slide video{width:100%;height:100%;object-fit:cover;display:block;}

  /* ================= 1. HERO STATEMENT (no image) ================= */
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--ink);margin:0 0 26px;}
  .statement{
    font-size:clamp(28px, 3vw, 52px);line-height:1.3;font-weight:600;
    color:var(--ink);margin:0;max-width:none;letter-spacing:-0.01em;
  }

  /* ================= 2. SIBLING SERVICE ROW ================= */
  .services{
    display:flex;flex-wrap:wrap;gap:36px;align-items:baseline;
    margin-top:80px;padding-bottom:24px;border-bottom:1px solid var(--rule);
  }
  .services a{
    position:relative;font-size:15px;font-weight:600;letter-spacing:0.12em;
    text-transform:uppercase;color:var(--body);padding-bottom:8px;transition:color .3s var(--ease);
  }
  .services a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--ink);transition:width .45s var(--ease);}
  .services a:hover{color:var(--ink);}
  .services a:hover::after,.services a.current::after{width:100%;}
  .services a.current{color:var(--ink);}

  /* ================= 3. MEDIA BLOCK ================= */
  .media{margin:0;padding-top:80px;overflow:hidden;}

  /* ================= sections ================= */
  section{padding-top:var(--rhythm);}
  section.after-band{padding-top:var(--rhythm);}
  h2{
    font-size:36.2px;line-height:47px;font-weight:700;color:var(--ink);
    margin:0 0 34px;
  }
  p{font-size:18px;line-height:28.8px;color:var(--body);margin:0 0 26px;}
  p:last-child{margin-bottom:0;}

  /* full-bleed break image */
  .band{
    margin:var(--rhythm) 0 0;width:100%;overflow:hidden;
    aspect-ratio:21/9;
  }
  .band img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.5s var(--ease);}
  .band.in img{transform:scale(1);}

  /* alternating text / image rows */
  .alt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;}
  .alt.flip .txt{order:2;}
  .alt.flip .pic{order:1;}
  .alt .txt{max-width:560px;}
  .alt .pic{overflow:hidden;}
  .alt .pic img{
    transform:scale(1.03);transition:transform 1.2s var(--ease);
  }
  .alt .pic.in img{transform:scale(1);}

  /* ================= expertise ================= */
  .expertise{margin-top:var(--rhythm);}
  .acc-wrap{display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:start;margin-top:48px;}
  .acc-media{position:sticky;top:120px;aspect-ratio:4/3;overflow:hidden;background:var(--wash);}
  .acc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease);}
  .acc-media img.on{opacity:1;}
  .acc{border-top:1px solid var(--rule);}
  .acc-item{border-bottom:1px solid var(--rule);}
  .acc-head{
    width:100%;background:none;border:0;cursor:pointer;font-family:var(--font);
    display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:16px;
    padding:26px 0;text-align:left;
  }
  .acc-head .n{font-size:12px;font-weight:600;letter-spacing:0.14em;color:var(--body);}
  .acc-head .h{font-size:clamp(20px,1.9vw,30px);line-height:1.3;font-weight:700;color:var(--ink);text-transform:uppercase;}
  .acc-head .pm{
    width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;
    position:relative;justify-self:end;transition:background .35s var(--ease),border-color .35s var(--ease);
  }
  .acc-head:hover .pm{border-color:var(--ink);}
  .acc-head .pm::before,.acc-head .pm::after{
    content:"";position:absolute;top:50%;left:50%;background:var(--ink);
    transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s var(--ease);
  }
  .acc-head .pm::before{width:15px;height:1.5px;}
  .acc-head .pm::after{width:1.5px;height:15px;}
  .acc-item.open .acc-head .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
  .acc-body{max-height:0;overflow:hidden;transition:max-height .6s var(--ease);}
  .acc-body p{padding:0 46px 30px 68px;margin:0;}

  /* ================= partners ================= */
  .partners{margin-top:var(--rhythm);}
  .split-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:start;}
  .split-head h2{margin:0;}
  .split-head .intro{font-size:20px;line-height:32px;color:var(--body);margin:0;max-width:46ch;}
  .plogos{
    display:grid;grid-template-columns:repeat(4,1fr);
    border:1px solid var(--rule);margin-top:52px;
  }
  .plogo{
    display:flex;align-items:center;justify-content:center;
    padding:52px 30px;border-right:1px solid var(--rule);
    font-size:clamp(16px,1.5vw,24px);font-weight:700;letter-spacing:0.06em;
    text-transform:uppercase;color:#B9BEC3;transition:color .4s var(--ease);
  }
  .plogo:last-child{border-right:none;}
  .plogo:hover{color:var(--ink);}

  /* testimonial */
  .quote{margin-top:var(--rhythm);max-width:900px;margin-left:auto;margin-right:auto;}
  .quote .mark{font-size:80px;line-height:0.6;color:#D6DADD;display:block;margin-bottom:18px;}
  .quote blockquote{
    margin:0;font-size:clamp(20px,1.9vw,28px);line-height:1.55;
    font-weight:400;color:var(--ink);
  }
  .quote .who{display:flex;align-items:center;gap:20px;margin-top:34px;}
  .quote .who .av{width:64px;height:64px;border-radius:50%;background:var(--wash);flex:0 0 auto;overflow:hidden;}
  .quote .who .nm{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 4px;}
  .quote .who .rl{font-size:14px;font-weight:600;color:var(--body);margin:0;}

  .label{font-size:13px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--body);margin:0 0 22px;}

  /* ================= pre-footer + footer (shared) ================= */
  .tail{background:var(--black);color:var(--white);margin-top:calc(var(--rhythm) * 1.4);padding-top:48px;}
  .tail-label{font-size:13px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--white);margin:0 0 44px;}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:44px;}
  .tcard .thumb{overflow:hidden;background:#111;}
  .tcard img{transition:transform .9s var(--ease),opacity .6s var(--ease);opacity:.86;}
  .tcard:hover img{transform:scale(1.05);opacity:1;}
  .tcard .t{
    font-size:24px;line-height:34px;font-weight:700;color:var(--white);
    margin:22px 0 0;display:inline-block;position:relative;text-transform:uppercase;
  }
  .tcard .t::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--white);transition:width .5s var(--ease);}
  .tcard:hover .t::after{width:100%;}
  .footcta{text-align:center;padding-top:var(--rhythm);}
  .footcta .big{
    font-size:36.2px;line-height:47px;font-weight:700;color:var(--white);
    margin:0;display:inline-block;position:relative;
  }
  .footcta .big::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:1px;background:var(--white);transition:width .5s var(--ease);}
  .footcta .big:hover::after{width:100%;}
  footer{background:var(--black);color:#8A9299;padding:60px 0;margin-top:var(--rhythm);border-top:1px solid var(--rule-dark);}
  .footrow{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;}
  .footrow .brand{color:var(--white);font-weight:700;letter-spacing:0.22em;}
  .footrow a{transition:color .3s var(--ease);}
  .footrow a:hover{color:var(--white);}

  /* ---------- reveal ---------- */
  .rise{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease);}
  .rise.in{opacity:1;transform:none;}
  .rise.d1{transition-delay:.12s;}
  .mask{overflow:hidden;display:block;}
  .mask > span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease);}
  .mask.in > span{transform:none;}

  @media (prefers-reduced-motion:reduce){
    .rise,.mask>span,.alt .pic img,.flyout,.flyout .primary li,.hero-media .slide{transition:none!important;}
    .rise{opacity:1;transform:none;}
    .mask>span{transform:none;}
    .alt .pic img{transform:none;}
    html{scroll-behavior:auto;}
  }

  @media (max-width:1180px){
    .alt{grid-template-columns:1fr;gap:34px;}
    .alt.flip .txt{order:1;}
    .alt.flip .pic{order:2;}
    .acc-wrap{grid-template-columns:1fr;gap:40px;}
    .acc-media{position:static;}
  }

  @media (max-width:900px){
    :root{--rhythm:76px;}
    .stage{padding-top:calc(78px + var(--rhythm));}
    .hero-media{margin-top:44px;}
    .band{aspect-ratio:16/10;}
    .acc-head{grid-template-columns:38px 1fr 40px;}
    .acc-body p{padding:0 0 26px 50px;}
    .footcta .big{font-size:26px;line-height:36px;}
    .pair{grid-template-columns:1fr;gap:38px;}
    .tcard .t{font-size:19px;line-height:28px;}
    .stage h1{font-size:26px;line-height:34px;margin-bottom:30px;}
    h2{font-size:26px;line-height:36px;}
    .services{margin-top:44px;gap:20px;}
    .flyout{padding:100px var(--gutter) 50px;}
    .flyout .inner{grid-template-columns:1fr;gap:36px;}
    .flyout .primary a{font-size:32px;line-height:52px;}
    .flyout .secondary{min-height:0;padding-top:0;}
    .flyout .markcol{display:none;}
  }

/* ===== portfolio grid ===== */
/* ---------- page head ---------- */
  .pagehead{padding-top:180px;}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--ink);margin:0 0 28px;}
  h1{
    font-size:62px;line-height:74px;font-weight:700;
    text-transform:uppercase;color:var(--ink);margin:0;max-width:34ch;
  }

/* ---------- category row ---------- */
  .cats{
    display:flex;flex-wrap:wrap;gap:34px;align-items:baseline;
    margin-top:70px;padding-bottom:26px;border-bottom:1px solid #E5E5E5;
  }
  .cats a{
    position:relative;font-size:14px;font-weight:600;letter-spacing:0.16em;
    text-transform:uppercase;color:var(--body);padding-bottom:6px;
    transition:color .3s var(--ease);
  }
  .cats a sup{font-size:10px;font-weight:400;margin-left:4px;top:-6px;position:relative;}
  .cats a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--ink);transition:width .45s var(--ease);}
  .cats a:hover{color:var(--ink);}
  .cats a:hover::after,.cats a.current::after{width:100%;}
  .cats a.current{color:var(--ink);}

/* ---------- grid ---------- */
  .grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    column-gap:clamp(24px, 2.6vw, 52px);
    row-gap:clamp(40px, 4.5vw, 88px);
    padding-top:clamp(56px, 6vw, 110px);
  }

  .card{display:block;position:relative;transition:opacity .5s var(--ease);}
  .card .frame{
    position:relative;overflow:hidden;background:#F2F3F4;
    box-shadow:0 0 0 rgba(0,0,0,0);
    transform:translateY(0);
    transition:box-shadow .6s var(--ease),transform .6s var(--ease);
  }
  .card:hover .frame{
    box-shadow:0 34px 72px rgba(0,0,0,.26);
    transform:translateY(-6px);
  }
  .card .frame img{transform:scale(1.04);transition:transform 1.2s var(--ease);}
  .card:hover .frame img{transform:scale(1);}
  .card .frame::after{
    content:"";position:absolute;inset:0;background:rgba(0,0,0,0);
    transition:background .55s var(--ease);
  }
  .card:hover .frame::after{background:rgba(0,0,0,0.36);}

  /* every other card fades toward the white ground while one is hovered */
  .grid:has(.card:hover) .card:not(:hover){opacity:.12;}
  .grid:has(.card:hover) .card:not(:hover) .frame{box-shadow:none;}

  /* title sits on the image, revealed on hover */
  .card .side{
    position:absolute;
    left:clamp(18px, 1.8vw, 34px);right:clamp(18px, 1.8vw, 34px);
    bottom:clamp(18px, 1.8vw, 34px);z-index:4;
    opacity:0;transform:translateY(16px);pointer-events:none;
    transition:opacity .5s var(--ease),transform .55s var(--ease);
  }
  .card:hover .side{opacity:1;transform:none;}
  .card .side .t{
    font-size:clamp(18px, 1.35vw, 28px);
    line-height:1.32;font-weight:700;color:var(--white);
    text-transform:uppercase;margin:0;
  }
  .card .side .go{
    display:inline-block;margin-top:12px;font-size:11px;font-weight:600;
    letter-spacing:0.2em;text-transform:uppercase;color:var(--white);
    border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:3px;
  }

  .card.hidden{display:none;}
  .more{padding-top:var(--rhythm);text-align:center;}
  .more a{
    display:inline-block;border:1px solid var(--ink);border-radius:999px;
    padding:15px 40px;font-size:13px;font-weight:600;letter-spacing:0.18em;
    text-transform:uppercase;color:var(--ink);
    transition:background .35s var(--ease),color .35s var(--ease);
  }
  .more a:hover{background:var(--ink);color:var(--white);}


/* ===== single project: heading sits directly above its body ===== */
.tightsec{padding-top:0!important;}
.tightsec .col{padding-top:0;}


/* image safety - a missing file must never blow out the layout */
.tcard .thumb{aspect-ratio:16/10;overflow:hidden;background:#141414;}
.tcard .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.plate img{width:100%;height:auto;display:block;}
.tcard img,.card .frame img{max-width:100%;}

/* flyout wordmark fallback when no logo file is present */
.flyout .markcol .markword{display:block;font-weight:700;font-size:26px;letter-spacing:0.22em;color:#fff;text-align:right;}
.flyout .markcol .mark img{max-width:130px;height:auto;}

/* footer link row */
.footrow .footlinks a{color:#8A9299;position:relative;display:inline-block;transition:color .3s var(--ease);}
.footrow .footlinks a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:#fff;transition:width .4s var(--ease);}
.footrow .footlinks a:hover{color:#fff;}
.footrow .footlinks a:hover::after{width:100%;}
.footrow .footlinks .sep{color:#3A3F45;margin:0 6px;}
.footrow .footmenu{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap;}

/* uniform card crop - every card the same shape regardless of source ratio */
.grid .card .frame{aspect-ratio:3/2;}
.grid .card .frame img{width:100%;height:100%;object-fit:cover;display:block;}

/* recede blur - siblings soften as the hovered card comes forward */
.grid .card{transition:opacity .5s var(--ease),filter .5s var(--ease);}
.grid:has(.card:hover) .card:not(:hover){opacity:.18;filter:blur(3px);}
.grid:has(.card:hover) .card:not(:hover) .frame{box-shadow:none;}
@media (prefers-reduced-motion:reduce){.grid:has(.card:hover) .card:not(:hover){filter:none;}}

/* grid breakpoints - these were lost when the stylesheet was assembled */
@media (max-width:1180px){
  .grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .grid{grid-template-columns:1fr;}
  .grid:has(.card:hover) .card:not(:hover){opacity:1;filter:none;}
  .grid .card .side{opacity:1;transform:none;}
  .grid .card .frame::after{background:rgba(0,0,0,.30);}
  .cats{gap:18px;}
  .cats a{font-size:12px;letter-spacing:0.1em;}
}

/* project layout - short intro copy under the title */
.statement-copy{max-width:var(--measure);margin-top:34px;}
.statement-copy p{font-size:18px;line-height:28.8px;color:var(--body);}
.stage .plate + .plate,.wrap .plate + .plate{padding-top:var(--rhythm);}