/* ============================================================
   Rubio's Fabrication
   TOKENS: sampled from the approved hero footage
   ============================================================ */
/* the hidden attribute must always hide, even when a rule sets display
   (e.g. .form{display:grid}); otherwise the sent form stays on screen */
[hidden]{display:none !important}
:root{
  --canvas:#14100E;
  --panel:#201A16;
  --accent:#F07422;
  --accent-hover:#FF8A3D;
  --accent-muted:#6B3A17;
  --steel:#594C46;
  --text-primary:#F2EAE0;
  --text-secondary:#B0A49C;

  --display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --body:"Archivo",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,4,3,.95),0 3px 12px rgba(5,4,3,.78),0 10px 44px rgba(5,4,3,.8);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#1A0E05;padding:12px 18px;
  font-size:14px;font-weight:500;text-decoration:none;
}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* the page's one environment: real steel from the footage, held still */
/* the forge environment behind the logo, held fixed behind the whole page */
.env{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(20,16,14,.60),rgba(20,16,14,.80)),
    url('steel.jpg') center/cover no-repeat var(--canvas);
}
.env::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(240,116,34,.05),rgba(240,116,34,0) 62%);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:24px;
  padding:14px clamp(16px,4vw,48px);
  background:linear-gradient(to bottom,rgba(10,8,7,.78),rgba(10,8,7,0));
}
.nav.solid{background:rgba(16,13,11,.94);border-bottom:1px solid rgba(89,76,70,.3)}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.6vw,18px)}
/* forge-theme nav buttons: sharp steel plates, one filled with the torch accent */
.nav-links a{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:14px;letter-spacing:.07em;line-height:1;text-decoration:none;
  color:var(--text-primary);
  padding:11px 22px;
  border:1px solid rgba(89,76,70,.7);
  background:linear-gradient(rgba(89,76,70,.16),rgba(89,76,70,.03));
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{
  color:var(--accent);border-color:var(--accent);
}
.nav-links a.primary{
  color:#1A0E05;border-color:var(--accent);
  background:linear-gradient(var(--accent-hover),var(--accent));
}
.nav-links a.primary:hover{
  color:#1A0E05;border-color:var(--accent-hover);
  background:linear-gradient(#FF9A52,var(--accent-hover));
}
@media (max-width:680px){
  .nav{padding:12px 16px}
  .nav-links a{font-size:13px;padding:11px 16px;white-space:nowrap}
}

/* ============================================================
   THE HERO
   ============================================================ */
.hero{position:relative;height:100vh;height:100svh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--canvas);
}
.poster,#hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background-size:cover;background-position:50% 50%;
}
#hero-video{opacity:0;transition:opacity .7s var(--ease-soft);transform:translateZ(0);will-change:transform}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 56% 48%,rgba(10,8,6,0) 32%,rgba(10,8,6,.66) 100%);
}
/* lower-third wash: lifts the centered captions and brand off the footage */
.stage::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  pointer-events:none;z-index:2;
  background:linear-gradient(to top,rgba(8,6,5,.9) 0%,rgba(8,6,5,.5) 42%,rgba(8,6,5,0) 100%);
}

.ring{
  position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);
  width:44px;height:44px;color:var(--accent);opacity:.85;
  transition:opacity .5s var(--ease-soft);
}
.ring circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .12s linear}
.stage.video-ready .ring{opacity:0}
.cue{
  position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);
  font-size:13px;font-weight:500;color:var(--text-secondary);
  opacity:0;transition:opacity .6s var(--ease-soft);text-shadow:var(--tshadow);
}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:calc(.85 * max(0, 1 - var(--draw,0) * 16))}

/* ---- the caption column: a centered lower-third, clear of the logo ---- */
.bands{
  position:absolute;inset:0;pointer-events:none;
  display:grid;align-items:end;justify-items:center;
  z-index:3;   /* its own stacking context so each band's scrim lands above the video */
}
.band{
  grid-area:1/1;
  position:relative;
  align-self:end;justify-self:center;
  text-align:center;
  width:min(92vw,760px);
  margin:0 auto;
  padding-bottom:clamp(40px,9vh,96px);
  opacity:0;
  text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-40% -20% -30% -20%;
  pointer-events:none;z-index:-1;
  opacity:calc(.25 + .75*var(--k,1));
  /* a soft pool under the lower-third title, tuned against each band's worst frame */
  background:radial-gradient(ellipse 70% 78% at 50% 72%,
    rgba(6,5,4,.86) 0%,rgba(6,5,4,.6) 52%,rgba(6,5,4,0) 86%);
}
.band h2,.band p{margin:0}
.band h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,3.6vw,52px);
  line-height:.96;letter-spacing:.005em;text-transform:uppercase;
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.w{display:inline-block;white-space:nowrap}
.w + .w{margin-left:.26em}
.c{display:inline-block;will-change:transform,opacity}

/* the cut-in: characters arrive in reading order, each one cooling as it lands */
.b-cut .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3.4,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*-.22em));
  color:color-mix(in srgb,var(--accent) calc((1 - var(--kc))*100%),var(--text-primary));
}
/* scatter: sparks settling into words */
.b-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* cool-down: words drift down and cool from ember to bone */
.b-cool .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
  color:color-mix(in srgb,var(--accent) calc((1 - var(--kc))*100%),var(--text-primary));
}
/* the settle: the line rises word by word, then the buttons */
.b-settle .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px));
}
/* the brand reveal: RUBIO'S flanks the logo left, FABRICATION right, in cut steel */
.b-settle{
  align-self:stretch;justify-self:stretch;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
}
/* the brand reveal centers on the logo, not a lower-third caption, so the soft
   radial pool the other bands use would just sit as a dark bubble behind it */
.b-settle::before{display:none}
.b-settle .lockup{position:absolute;inset:0;margin:0}
.b-settle .brandword{
  position:absolute;top:50%;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  /* size to the room beside the logo: big on wide screens (up to 76px, larger
     than before), auto-shrinks on near-square windows so FABRICATION never clips */
  font-size:clamp(24px,calc((50vw - max(36vh,20.5vw) - 30px) / 4.7),76px);
  line-height:.9;letter-spacing:.01em;
  white-space:nowrap;
}
/* Anchor each word to the logo's real edge. object-fit:cover scales the mark
   by viewport height (or width on ultrawide), so its half-width from center is
   max(36vh,20.5vw). The words sit just outside that, clear of the ring, on any window. */
.b-settle .bw-left{
  right:calc(50% + max(36vh,20.5vw) + clamp(12px,2vw,30px));
  transform:translateY(-50%) translateX(calc((1 - var(--k,1))*-40px));
}
.b-settle .bw-right{
  left:calc(50% + max(36vh,20.5vw) + clamp(12px,2vw,30px));
  transform:translateY(-50%) translateX(calc((1 - var(--k,1))*40px));
}
.b-settle .tag{
  position:absolute;left:0;right:0;bottom:clamp(38px,8vh,84px);
  text-align:center;margin:0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(14px,1.5vw,20px);letter-spacing:.26em;
  color:var(--accent);
  opacity:clamp(0,(var(--k,0) - .5)*3,1);
}

/* lit-steel fill, so the words read as the same metal as the logo and stay legible */
.steel-text{
  background-image:linear-gradient(176deg,
    #FCF8F0 0%,#E6DBCB 20%,#BCAE9C 40%,#F2E9DB 54%,#AC9E8F 72%,#82766B 88%,#E0D4C4 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:
    drop-shadow(0 0 14px rgba(6,5,4,.9))
    drop-shadow(0 0 4px rgba(6,5,4,.95))
    drop-shadow(0 2px 2px rgba(0,0,0,.85))
    drop-shadow(0 8px 20px rgba(0,0,0,.55));
}

/* ---- buttons: painted steel, no glow ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;padding:14px 26px;
  background:var(--accent);color:#1A0E05;border:1px solid var(--accent);
  text-shadow:none;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;text-decoration:none;padding:14px 26px;
  background:transparent;color:var(--text-primary);border:1px solid var(--steel);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.btn-outline:hover{color:var(--accent);border-color:var(--accent)}
.btn-ghost{
  display:inline-flex;align-items:center;
  font-size:15px;font-weight:500;color:var(--text-secondary);text-decoration:none;
  border-bottom:1px solid var(--steel);padding:0 2px 3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn-ghost:hover{color:var(--text-primary);border-color:var(--accent)}
@media (pointer:coarse){
  .btn,.btn-outline,.btn-ghost{min-height:46px}
}

/* ============================================================
   THE STATIC HERO
   ============================================================ */
.static-hero{display:none}
.static-hero .inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(18px,6vw,56px) clamp(38px,9vh,76px);
}
.static-hero .place{
  font-size:14px;font-weight:500;color:var(--text-secondary);
  margin:0 0 14px;text-shadow:var(--tshadow);
}
.static-hero h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(40px,10.5vw,74px);line-height:.94;margin:0;
  max-width:14ch;text-shadow:var(--tshadow);
}
.static-hero p.sub{
  font-size:16px;color:var(--text-secondary);margin:16px 0 26px;
  max-width:32ch;text-shadow:var(--tshadow);
}
.static-hero .row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* THE FIVE GATES: these five strings match the JS list character for character */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:100vh;height:100svh}
  .bands,.ring,.cue{display:none}
  /* a purpose-built portrait still: the whole mark on its own darkness, sitting
     above the copy, because a portrait crop of the landscape frame cut it in half */
  .static-hero{
    display:block;position:absolute;inset:0;
    background-image:url('hero-mobile.jpg');
    background-size:cover;background-position:50% 0;
  }
  .static-hero::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(13,11,8,.78) 0%,rgba(13,11,8,.16) 9%,rgba(8,6,5,.03) 24%,
      rgba(8,6,5,.44) 39%,rgba(8,6,5,.9) 47%,rgba(8,6,5,.96) 100%);
  }
}
@media (min-width:721px) and (max-height:560px){.cue{display:none}}

/* ============================================================
   THE TORCH-CUT EDGE: the signature, and a real one
   ============================================================ */
/* translucent so the fixed animation frame reads through the whole page */
.after{position:relative;z-index:2;background:rgba(17,13,11,.78);margin-top:-1px}
/* weld: the section top fades out of the hero's dark so there is no seam */
.after::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(180px,26vh,360px);
  pointer-events:none;z-index:-1;
  background:linear-gradient(to bottom,#0B0806 0%,rgba(11,8,6,.6) 42%,rgba(11,8,6,0) 100%);
}
.cutedge{
  position:absolute;top:0;left:0;width:100%;height:clamp(22px,3vw,40px);
  transform:translateY(-99%);
  display:block;pointer-events:none;
}
.cutedge path{fill:var(--canvas)}
.cutedge .heat{fill:none;stroke:var(--accent-muted);stroke-width:1.4;opacity:.5}

/* ============================================================
   SECTIONS
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,6vw,64px)}
.kicker{
  font-size:14px;font-weight:600;letter-spacing:.02em;
  color:var(--accent);margin:0 0 16px;
}
h1.big,h2.big{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,64px);line-height:.96;margin:0 0 20px;
}
.lede{color:var(--text-secondary);margin:0;max-width:52ch}

.work{padding:clamp(56px,9vh,104px) 0 clamp(50px,8vh,90px)}
/* the intro: no page title fighting the art, just the story and one lit closing line */
.work-intro{margin-bottom:clamp(30px,5vh,58px);max-width:64ch}
.intro-lead{
  font-size:clamp(16px,1.7vw,20px);line-height:1.55;
  color:var(--text-secondary);margin:.55em 0 0;max-width:52ch;
}
.intro-line{
  font-family:var(--display);font-weight:800;text-transform:none;
  font-size:clamp(30px,4.8vw,58px);line-height:1.02;letter-spacing:.005em;
  color:var(--text-primary);margin:0;max-width:20ch;
}
.intro-line .spark{color:var(--accent)}
.work-intro .btn{margin-top:clamp(22px,3.4vh,32px)}

/* the grid: every tile the same size */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(14px,1.8vw,26px);
}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.tile{
  margin:0;
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0s);
}
.tile.in{opacity:1;transform:none}
.tile.done{transition-delay:0s !important}
.tile img{
  width:100%;height:auto;display:block;
  aspect-ratio:3/4;object-fit:cover;
  border:1px solid rgba(89,76,70,.36);
  background:var(--panel);
  /* grade the raw shots into the forge palette so the gallery reads as one set */
  filter:saturate(.82) contrast(1.06) brightness(.9) sepia(.1);
  transition:filter .5s var(--ease),border-color .4s var(--ease);
}
.tile:hover img{filter:saturate(.94) contrast(1.06) brightness(1) sepia(.05);border-color:var(--accent)}
.tile figcaption{font-size:14px;color:var(--text-secondary);padding:10px 2px 0}
/* filtering out: fade and shrink, then the grid collapses the gap */
.tile.hide{opacity:0;transform:scale(.92);pointer-events:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.tile[hidden]{display:none}

/* the portfolio style filters */
.filters{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 clamp(26px,4vh,44px);
}
.filter{
  font-family:var(--body);font-size:14px;font-weight:500;
  color:var(--text-secondary);background:transparent;
  border:1px solid rgba(89,76,70,.5);
  padding:9px 18px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}
.filter:hover{color:var(--text-primary);border-color:var(--steel)}
.filter.is-active{
  color:#1A0E05;background:var(--accent);border-color:var(--accent);font-weight:600;
}

/* the home page's short look at the work */
.peek{padding:clamp(72px,12vh,128px) 0 clamp(60px,9vh,104px)}
.peek .grid{margin:clamp(32px,5vh,54px) 0 clamp(32px,5vh,50px)}
@media (min-width:701px){.peek .grid{grid-template-columns:repeat(4,1fr)}}

/* contact */
.reach{
  padding:clamp(60px,9vh,104px) 0 clamp(60px,9vh,104px);
}
.reach-head{margin-bottom:clamp(30px,5vh,52px);max-width:52ch}
.reach-grid{
  display:grid;gap:clamp(20px,2.4vw,30px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:stretch;
}
@media (max-width:860px){.reach-grid{grid-template-columns:1fr}}

/* both sides are framed panels now, so the form reads as finished, not floating */
.form-card,.card{
  background:linear-gradient(rgba(38,31,26,.72),rgba(26,21,17,.72)),var(--panel);
  border:1px solid rgba(89,76,70,.5);
  padding:clamp(24px,3.2vw,40px);
}
.form-card{display:flex;flex-direction:column}

.card{display:flex;flex-direction:column}
.card h2,.card h3{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.card li{border-bottom:1px solid rgba(89,76,70,.22);padding-bottom:16px}
.card li:last-child{border-bottom:none;padding-bottom:0}
.card a{
  color:var(--text-primary);text-decoration:none;
  display:flex;flex-direction:column;gap:4px;
  transition:color .3s var(--ease);
}
.card ul a:hover{color:var(--accent)}
.card .lbl{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
.reach-note{
  margin:auto 0 0;padding-top:26px;
  color:var(--text-secondary);font-size:14.5px;line-height:1.5;
}
.reach-call{margin-top:18px;align-self:flex-start}

.foot{
  position:relative;z-index:2;background:var(--canvas);
  border-top:1px solid rgba(89,76,70,.28);
  padding:28px clamp(20px,6vw,64px);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  font-size:14px;color:var(--text-secondary);
}
.foot a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot .sp{margin-left:auto}
.foot:empty{display:none}

/* the privacy policy: a plain, readable legal page on the site's dark theme */
.legal{padding:clamp(56px,9vh,104px) 0 clamp(50px,8vh,90px)}
.legal .wrap{max-width:760px}
.legal h1.big{margin:0 0 6px}
.legal .updated{color:var(--text-secondary);font-size:14px;margin:0 0 30px}
.legal h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(18px,2.1vw,24px);letter-spacing:.01em;
  color:var(--text-primary);margin:34px 0 8px;
}
.legal p{color:var(--text-secondary);line-height:1.62;margin:0 0 4px;font-size:clamp(15px,1.6vw,17px)}
.legal a{color:var(--accent)}

/* section entrances */
.rise{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .tile,.rise{opacity:1;transform:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* the work page has no hero, so it needs room under the fixed nav.
   It also needs its own stacking context: the fixed environment layer sits at
   z-index 0, so unpositioned page content would paint UNDERNEATH it. */
.page{position:relative;z-index:2;background:rgba(20,16,14,.80)}
.page .work{padding-top:clamp(112px,16vh,172px)}

/* ============================================================
   THE ORDER FORM (contact section, front page)
   ============================================================ */
.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-secondary);
}
.field .opt{color:var(--steel);font-weight:500;letter-spacing:.04em}
.field input,.field textarea{
  font-family:var(--body);font-size:16px;color:var(--text-primary);
  background:rgba(9,7,6,.6);border:1px solid rgba(89,76,70,.5);
  padding:14px 15px;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--steel)}
.field input:hover,.field textarea:hover{border-color:rgba(89,76,70,.85)}
.field input:focus,.field textarea:focus{
  border-color:var(--accent);background:rgba(9,7,6,.8);
  box-shadow:0 0 0 3px rgba(240,116,34,.15);outline:none;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#D2553A}
.field .err{font-size:13px;color:#E8836B;min-height:0}
.form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

/* the honeypot: off-screen for eyes, still reachable for a bot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-foot{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:8px}
.form-foot .btn{flex:1 1 220px;padding:15px 26px}
.form-note{font-size:13.5px;color:var(--text-secondary);margin:0}
.form-note a{color:var(--accent);text-decoration:none}
.form-note a:hover{text-decoration:underline}
.sent a{color:var(--accent);text-decoration:none}
.sent a:hover{text-decoration:underline}
.form-msg{
  font-size:15px;padding:14px 16px;margin:0;
  border:1px solid rgba(89,76,70,.5);background:var(--panel);
}
.form-msg.bad{border-color:#7A3A2A;color:#F0C4B8}
.form-msg a{color:var(--accent)}
.form button[disabled]{opacity:.6;cursor:progress}

/* the sent state replaces the form rather than sitting under it */
.sent{
  border:1px solid var(--accent-muted);background:var(--panel);
  padding:clamp(24px,4vw,36px);
}
.sent h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3vw,36px);line-height:1;margin:0 0 12px;
}
.sent p{color:var(--text-secondary);margin:0 0 6px}

/* ============================================================
   THE WORK: category tiles on the home page
   ============================================================ */
.worktiles{padding:clamp(56px,10vh,120px) 0 clamp(40px,7vh,80px)}
.worktiles .lede{margin-top:14px}
.worktiles .tiles{
  display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(30px,5vh,52px);
}
@media (max-width:760px){.worktiles .tiles{grid-template-columns:1fr;max-width:460px}}
.wtile{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/2;
  border:1px solid rgba(89,76,70,.42);background:var(--panel);
  text-decoration:none;
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s var(--ease);
}
.wtile.in{opacity:1;transform:none}
.wtile-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease),filter .5s var(--ease);
  /* grade the raw shots into the forge palette: warm them, calm the bright sky */
  filter:saturate(.82) contrast(1.06) brightness(.94) sepia(.1);
}
/* two scrims frame the piece: the top melts the sky into the page, the bottom seats the label */
.wtile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,6,5,.92) 0%,rgba(8,6,5,.15) 46%,rgba(8,6,5,0) 72%),
    linear-gradient(to bottom,rgba(8,6,5,.6) 0%,rgba(8,6,5,.05) 40%,rgba(8,6,5,0) 60%);
}
/* an inner edge shadow so each tile reads as a framed plate, not a flat cutout */
.wtile::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),inset 0 0 60px rgba(0,0,0,.5);
}
.wtile:hover{border-color:var(--accent)}
.wtile:hover .wtile-media{filter:saturate(.92) contrast(1.06) brightness(1) sepia(.06)}
.wtile:hover .wtile-media{transform:scale(1.05)}
.wtile-label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,1.8vw,24px);
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(19px,1.9vw,26px);letter-spacing:.02em;color:var(--text-primary);
}
/* the video tile before its clip is dropped in */
.wtile.pending{background:radial-gradient(ellipse 80% 70% at 50% 42%,#2a221c 0%,#14100e 100%)}
.wtile .play{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:66px;height:66px;border:2px solid var(--accent);border-radius:50%;
  opacity:.92;transition:transform .4s var(--ease);
}
.wtile .play::after{
  content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-left:17px solid var(--accent);border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.wtile:hover .play{transform:translate(-50%,-50%) scale(1.08)}