/* BuiltFirst 3D. Sora + Newsreader on paper, warm-black stages where the 3D lives. One accent: red. */
:root{
  --paper:#f4ece0;--card:#fbf6ee;--ink:#1b1613;--deep:#2f2a24;--muted:#6b5d4c;--line:#ded0bb;--red:#b33d17;--acc:#FF6A3D;
  --stage:#14110f;--stage2:#1d1916;--sline:#3a322b;--stext:#efe6d8;--smuted:#a89a87;
  --wrap:1240px;--gut:28px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.55 Newsreader,Georgia,serif;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sans{font-family:Sora,system-ui,sans-serif}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;font:600 14px/1 Sora,sans-serif;z-index:50}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* nothing on the site can be dragged out or saved from a long press */
img,video,canvas,model-viewer,picture{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
img,video,canvas,model-viewer{-webkit-user-select:none;user-select:none}

/* header: name and place, the phone as a button, the websites link */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.who{font:700 16px/1.2 Sora,sans-serif;letter-spacing:.005em;text-decoration:none;white-space:nowrap;color:var(--ink)}
.who span{color:var(--red);margin:0 8px}
.top nav{display:flex;align-items:center;gap:10px}
.top nav a{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 Sora,sans-serif;text-decoration:none;padding:12px 15px;border-radius:4px;border:1px solid var(--ink);white-space:nowrap}
.top nav a svg{width:14px;height:14px;flex:none}
.top nav a.tel{background:var(--ink);color:var(--paper)}
.top nav a.tel:hover{background:var(--red);border-color:var(--red)}
.top nav a.ext{background:transparent;color:var(--ink)}
.top nav a.ext:hover{background:var(--ink);color:var(--paper)}

/* type */
.kick{font:600 12px/1.2 Sora,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
h1{font:700 clamp(46px,7.6vw,104px)/.95 Sora,sans-serif;letter-spacing:-.03em;margin:0}
h2{font:700 clamp(30px,3.8vw,50px)/1.03 Sora,sans-serif;letter-spacing:-.02em;margin:0}
h3{font:700 22px/1.2 Sora,sans-serif;letter-spacing:-.01em;margin:0 0 6px}
.lede{font-size:22px;line-height:1.5;color:var(--deep);margin:0}
p{margin:0 0 14px}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 20px;border-radius:4px;font:600 15px/1 Sora,sans-serif;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--paper)}
.btn svg{width:16px;height:16px;flex:none}
.stage .btn.line,.dark .btn.line{color:var(--stext);background:transparent;border-color:rgba(239,230,216,.45)}
.stage .btn.line:hover,.dark .btn.line:hover{background:var(--stext);color:var(--stage)}
.stage .btn,.dark .btn{background:var(--stext);color:var(--stage);border-color:var(--stext)}
.stage .btn:hover,.dark .btn:hover{background:var(--red);border-color:var(--red);color:var(--stext)}
button.btn{font:600 15px/1 Sora,sans-serif}

/* hero: headline, then the reel directly under it (phone: poster with a play button), then the words */
.hero{padding:44px 0 34px}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;grid-template-areas:"h t" "r r" "c c";gap:0 48px;align-items:end}
.hero-h{grid-area:h}
.hero-t{grid-area:t}
.hero .lede{max-width:520px}
.hero .btns{margin-top:22px}
h1{font-size:clamp(42px,6.6vw,92px)}
.reel{grid-area:r;margin-top:34px;background:var(--stage);border-radius:6px;overflow:hidden;position:relative;aspect-ratio:16/9}
.reel video,.reel .reel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--stage)}
.reel video{display:none}
.reel-play{all:unset;position:absolute;inset:0;cursor:pointer;display:block;z-index:2}
.reel-play .disc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;background:rgba(244,236,224,.94);color:var(--ink);display:grid;place-items:center;transition:transform .25s ease,background .25s ease}
.reel-play .disc svg{width:30px;height:30px;margin-left:5px}
.reel-play:hover .disc,.reel-play:focus-visible .disc{background:var(--red);color:var(--paper);transform:translate(-50%,-50%) scale(1.06)}
.reel-play .lbl{position:absolute;left:14px;bottom:14px;font:600 14px/1 Sora,sans-serif;color:var(--paper);background:rgba(20,17,15,.72);padding:9px 11px 8px;border-radius:3px}
.reel-play .lbl small{font:400 13px/1 Sora,sans-serif;color:#cdbfae;margin-left:6px}
.reel-cap{grid-area:c;margin:12px 0 0;font:400 14px/1.5 Sora,sans-serif;color:var(--muted)}
.hero-t{margin-top:30px}
.status{margin:0;padding:14px 16px;border-left:3px solid var(--red);background:var(--card);font:400 15px/1.55 Sora,sans-serif;color:var(--deep);max-width:820px}

/* the work grid: four tiles, two across */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}
.tile{display:block;text-decoration:none}
.tile .thumb{position:relative;border-radius:5px;overflow:hidden;background:var(--stage);aspect-ratio:16/9}
.tile .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover .thumb img{transform:scale(1.03)}
.tile .play{position:absolute;left:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(244,236,224,.94);color:var(--ink);display:grid;place-items:center;transition:background .25s ease,color .25s ease}
.tile .play svg{width:14px;height:14px;margin-left:2px}
.tile:hover .play{background:var(--red);color:var(--paper)}
.tile h2,.tile h3{font:700 clamp(18px,1.9vw,24px)/1.2 Sora,sans-serif;letter-spacing:-.01em;margin:14px 0 0;color:var(--ink)}
.tile:hover h2,.tile:hover h3{color:var(--red)}
section.block.work{border-top:0;padding-top:26px}
@media (min-width:901px){.reel video{display:block}}

/* sections */
section.block{padding:84px 0;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
.sec-head p{color:var(--deep);margin:0}

/* the centerpiece */
.stage{background:var(--stage);color:var(--stext)}
.stage .kick{color:#e0806f}
#one-model{position:relative;height:620vh}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.pin .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pin .fallback img{width:100%;height:100%;object-fit:cover;opacity:.9}
.pin .fallback[hidden]{display:none}
.om-head{position:absolute;left:0;right:0;top:0;padding:26px 0 0;pointer-events:none}
.om-head .wrap{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.om-head h2{font-size:clamp(22px,2.4vw,30px);color:var(--stext)}
.om-head .kick{margin:0}
.om-count{font:600 13px/1 Sora,sans-serif;letter-spacing:.12em;color:var(--smuted);white-space:nowrap;flex:none}
.panels{position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none}
.panel{position:absolute;left:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));top:50%;transform:translateY(-40%);width:min(400px,36vw);opacity:0;transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.panel.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.panel .n{font:600 12px/1 Sora,sans-serif;letter-spacing:.16em;color:#e0806f;margin:0 0 12px}
.panel h3{font:700 clamp(28px,3vw,40px)/1.04 Sora,sans-serif;letter-spacing:-.02em;margin:0 0 14px;color:var(--stext)}
.panel p{color:#d8ccbb;font-size:19px;line-height:1.5}
.panel .use{list-style:none;padding:0;margin:16px 0 0;font:400 14px/1.4 Sora,sans-serif;color:var(--smuted)}
.panel .use li{padding:8px 0;border-top:1px solid var(--sline)}
.panel .use li b{color:var(--stext);font-weight:600}
.panel .btns{margin-top:18px}
.rail{position:absolute;right:max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.rail span{width:3px;height:26px;background:var(--sline);border-radius:2px;transition:background .3s}
.rail span.on{background:#e0806f}
.labels{position:absolute;inset:0;pointer-events:none}
.labels svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.labels svg line{stroke:rgba(239,230,216,.55);stroke-width:1}
.labels svg circle{fill:var(--stext)}
.lab{position:absolute;font:600 12px/1 Sora,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--stext);background:rgba(20,17,15,.78);border:1px solid rgba(239,230,216,.28);padding:6px 8px 5px;border-radius:3px;white-space:nowrap;transform:translate(-50%,-50%)}
.om-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 14px/1 Sora,sans-serif;color:var(--smuted)}
.drag-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:600 12px/1 Sora,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--smuted);opacity:0;transition:opacity .4s}
.drag-hint.on{opacity:1}
.om-end{padding:56px 0 84px;border-top:1px solid var(--sline)}
.om-end p{max-width:760px;color:#d8ccbb;margin:0}
.om-end strong{font:700 clamp(24px,2.6vw,34px)/1.15 Sora,sans-serif;color:var(--stext);display:block;margin-bottom:12px;letter-spacing:-.015em}

/* triptych */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tri figure{margin:0}
.tri img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:var(--stage)}
.tri figcaption{font:400 14px/1.5 Sora,sans-serif;color:var(--muted);margin-top:8px}
.tri figcaption b{color:var(--ink);font-weight:600}

/* ruled lists */
.ruled{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ruled>li{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.1fr);gap:28px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
.ruled .no{font:700 15px/1.5 Sora,sans-serif;color:var(--muted)}
.ruled h3{font-size:24px}
.ruled p{margin:0;color:var(--deep)}
.ruled .small{font:400 14px/1.55 Sora,sans-serif;color:var(--muted);margin-top:8px}
.uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.uses div{padding:18px 0;border-bottom:1px solid var(--line)}
.uses b{font:600 17px/1.3 Sora,sans-serif;display:block;margin-bottom:4px}
.uses span{color:var(--deep);font-size:17px}

/* two columns */
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.two h3{font-size:20px;margin-bottom:12px}
.two ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.two li{padding:12px 0;border-bottom:1px solid var(--line);font-size:18px}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;border-top:1px solid var(--line)}
.steps li{list-style:none;padding:22px 0;border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font:700 13px/1 Sora,sans-serif;color:var(--red);display:block;margin-bottom:10px}
.steps b{font:600 18px/1.25 Sora,sans-serif;display:block;margin-bottom:6px}
.steps span{color:var(--deep);font-size:17px}
ol.steps{padding:0;margin:0}

/* about + contact */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.contact{background:var(--ink);color:var(--paper)}
.contact .wrap{padding-top:84px;padding-bottom:84px}
.contact h2{color:var(--paper);max-width:900px}
.contact p{color:#d8ccbb;max-width:640px;margin-top:16px}
.contact .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.contact .btn:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
.contact .btn.line{background:transparent;color:var(--paper);border-color:rgba(244,236,224,.45)}
.contact .btn.line:hover{background:var(--paper);color:var(--ink)}
footer.foot{padding:28px 0 56px;font:400 14px/1.6 Sora,sans-serif;color:var(--muted)}
footer.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:baseline}
footer.foot .copy{max-width:520px}
footer.foot .flinks{display:flex;flex-wrap:wrap;gap:6px 18px}
footer.foot a{text-decoration:none}
footer.foot a:hover{color:var(--red)}

/* case pages */
.case-head{padding:54px 0 28px}
.crumbs{font:400 14px/1 Sora,sans-serif;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--red)}
.case-head h1{font-size:clamp(38px,5.4vw,72px);max-width:1000px}
.case-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:20px;font:400 14px/1.4 Sora,sans-serif;color:var(--muted)}
.player{background:var(--stage);border-radius:6px;overflow:hidden}
.player video{display:block;width:100%;aspect-ratio:16/9;background:var(--stage)}
.case-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding-top:64px;padding-bottom:64px}
.case-body h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:14px}
.case-body p{color:var(--deep)}
.pipe{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pipe li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.pipe b{font:600 14px/1.5 Sora,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.pipe span{font-size:17px;color:var(--deep)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--line);margin-top:8px}
.facts div{padding:16px 0;border-bottom:1px solid var(--line)}
.facts b{display:block;font:700 26px/1.1 Sora,sans-serif;letter-spacing:-.01em}
.facts span{font:400 13px/1.4 Sora,sans-serif;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid button{all:unset;cursor:zoom-in;display:block;border-radius:4px;overflow:hidden;background:var(--stage);aspect-ratio:16/9}
.grid button img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.grid button:hover img{transform:scale(1.03)}
.grid figure{margin:0}
.grid figure video{display:block;width:100%;aspect-ratio:16/9;border-radius:4px;background:var(--stage)}
.grid figcaption{font:400 14px/1.5 Sora,sans-serif;color:var(--muted);margin-top:8px}
.next{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line)}
.next a.n{font:700 clamp(20px,2vw,26px)/1.2 Sora,sans-serif;text-decoration:none}
.next a.n:hover{color:var(--red)}
model-viewer.mv{display:block;width:100%;height:min(70vh,560px);background:var(--stage);border-radius:6px;--poster-color:transparent}

/* dialogs */
dialog{border:0;padding:0;background:transparent;max-width:min(1200px,96vw);width:100%;color:var(--stext)}
dialog::backdrop{background:rgba(18,15,13,.94)}
dialog .dbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;font:400 14px/1.4 Sora,sans-serif;color:var(--stext)}
dialog .x{all:unset;cursor:pointer;font:600 14px/1 Sora,sans-serif;padding:9px 12px;border:1px solid rgba(239,230,216,.4);border-radius:4px;color:var(--stext)}
dialog .x:focus-visible{outline:2px solid var(--stext);outline-offset:2px}
dialog video{display:block;width:100%;max-height:82vh;background:#000;border-radius:4px}
dialog img{display:block;max-width:100%;max-height:84vh;margin:0 auto;border-radius:4px}
.ar-box{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;background:var(--stage2);border-radius:6px;padding:16px}
.ar-box model-viewer{width:100%;height:min(62vh,560px);background:var(--stage);border-radius:4px}
.ar-side{font:400 15px/1.55 Sora,sans-serif;color:#d8ccbb;display:flex;flex-direction:column;gap:14px;justify-content:center}
.ar-side img{width:180px;height:180px;border-radius:6px;background:var(--paper);padding:8px;margin:0}
.ar-side b{color:var(--stext)}
.arbtn{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:600 15px/1 Sora,sans-serif;background:var(--stext);color:var(--stage);border:0;border-radius:4px;padding:14px 18px;cursor:pointer}

/* responsive */
@media (max-width:900px){
  :root{--gut:20px}
  body{font-size:18px}
  .hero{padding:26px 0 20px}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"h" "r" "c" "t";gap:0}
  .reel{margin-top:20px}
  .hero-t{margin-top:22px}
  .sec-head,.two,.about,.case-body{grid-template-columns:1fr;gap:22px}
  .tiles{gap:22px 14px}
  .tile h2,.tile h3{font-size:15px;margin-top:10px}
  .tile .play{width:30px;height:30px;left:8px;bottom:8px}
  .tile .play svg{width:11px;height:11px}
  .ruled>li{grid-template-columns:1fr;gap:8px}
  .uses{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .tri{grid-template-columns:1fr}
  .grid,.grid.two-up{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .pipe li{grid-template-columns:1fr;gap:4px}
  section.block{padding:60px 0}
  .ar-box{grid-template-columns:1fr}
  .ar-side img{display:none}
  /* centerpiece: text at the bottom over a scrim, model above it */
  .panel{left:var(--gut);right:var(--gut);width:auto;top:auto;bottom:22px;transform:translateY(12px);background:linear-gradient(to top,rgba(20,17,15,.96) 70%,rgba(20,17,15,0));padding:40px 0 4px}
  .panel.on{transform:none}
  .panel h3{font-size:26px;margin-bottom:8px}
  .panel p{font-size:16px;margin-bottom:8px}
  .panel .use{display:none}
  .rail{display:none}
  .om-head{padding-top:16px}
  .om-head h2{font-size:18px}
  .om-head .kick{display:none}
  .lab{font-size:10px;padding:4px 6px 3px}
  .drag-hint{bottom:auto;top:58px}
}
@media (max-width:640px){.top .wrap{flex-direction:column;align-items:stretch;gap:10px}.who{font-size:17px}.top nav{width:100%}.top nav a{flex:1;min-height:46px}}
@media (max-width:520px){.grid,.grid.two-up{grid-template-columns:1fr}.facts b{font-size:22px}h1{font-size:clamp(40px,12vw,56px)}.reel-play .disc{width:64px;height:64px}.reel-play .disc svg{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.panel,.tile .thumb img,.grid button img,.reel-play .disc{transition:none}}

/* ======================================================================== v6, 9 Oct 2026
   One accent across both portfolios: coral #FF6A3D for fills and for text on dark; #b33d17 (--red) for small
   text on paper (4.98:1). The 3D side keeps a warm-black header on every page; the website side is paper. */
.stage .kick,.contact .kick,.panel .n{color:var(--acc)!important}
.rail span.on{background:var(--acc)}
.btn:hover{background:var(--red);border-color:var(--red)}

/* the switch bar: identical on the website portfolio (portfolio-v5/index.html) */
.bf-switch{background:#1b1613;color:#f4ece0;font:600 13px/1 Sora,Arial,sans-serif;border-bottom:1px solid #2f2a24}
.bf-switch .bf-in{max-width:1240px;margin:0 auto;padding:7px 28px;display:flex;align-items:center;justify-content:space-between;gap:10px 18px}
.bf-switch .bf-who{color:#bcae9b;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-switch .bf-who b{color:#f4ece0;font-weight:700}
.bf-tabs{display:flex;gap:6px;flex:none}
.bf-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 16px;border-radius:4px;border:1px solid rgba(244,236,224,.32);color:#f4ece0;text-decoration:none;white-space:nowrap;font:600 13px/1 Sora,Arial,sans-serif}
.bf-tabs a:hover{background:#f4ece0;color:#1b1613;border-color:#f4ece0}
.bf-tabs a[aria-current="page"]{background:#FF6A3D;border-color:#FF6A3D;color:#1b1613;pointer-events:none}
.bf-tabs a:focus-visible{outline:3px solid #FF6A3D;outline-offset:2px}

/* the 3D header: warm black, the BuiltFirst mark, phone and text */
.top{background:var(--stage);color:var(--stext);border-bottom:1px solid var(--sline)}
.top .wrap{padding-top:12px;padding-bottom:12px}
.mark{font:800 21px/1 Sora,sans-serif;letter-spacing:-.01em;color:var(--stext);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:baseline;gap:12px}
.mark b{font-weight:800;border-bottom:4px solid var(--acc);padding-bottom:1px}
.mark .mk-sub{font:600 12px/1 Sora,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--smuted)}
.top nav a{border-color:rgba(239,230,216,.4)}
.top nav a.tel{background:transparent;color:var(--stext)}
.top nav a.tel:hover{background:var(--stext);color:var(--stage);border-color:var(--stext)}
.top nav a.txt{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.top nav a.txt:hover{background:var(--stext);border-color:var(--stext)}
.top nav a.tel .cl{display:none}

/* home hero: words on the left, the reel running on the right out to the edge of the screen. No overlap. */
.hero3{position:relative;background:var(--stage);color:var(--stext);display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);min-height:min(calc(100svh - 118px),780px);overflow:hidden}
.hero3 .reel{position:relative;grid-column:2;grid-row:1;margin:0;border-radius:0;aspect-ratio:auto;min-height:420px}
.hero3 .reel::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--stage) 0%,rgba(20,17,15,0) 18%);pointer-events:none;z-index:1}
.hero3 .reel-play{display:none}
.hero3-copy{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:2;padding:48px 40px 56px max(var(--gut),calc((100vw - var(--wrap))/2 + var(--gut)))}
.hero3-copy .wrap{max-width:none;margin:0;padding:0}
.mark .mk{display:inline}
.hero3 .kick{color:var(--acc)}
.hero3 h1{font:700 clamp(38px,4vw,62px)/1 Sora,sans-serif;letter-spacing:-.03em;max-width:16ch;color:var(--stext)}
.hero3 h1 span{display:block;color:var(--acc)}
.hero3 .lede{color:#d8ccbb;font-size:20px;margin-top:18px;max-width:560px}
.hero3 .btns{margin-top:24px}
.hero3 .btn,.work3 .btn{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.hero3 .btn:hover,.work3 .btn:hover{background:var(--stext);border-color:var(--stext);color:var(--ink)}
.hero3 .btn.line{background:rgba(20,17,15,.35);color:var(--stext);border-color:rgba(239,230,216,.55)}
.hero3 .btn.line:hover{background:var(--stext);color:var(--stage)}

/* v6.1: the reel plays on every screen; once it is moving, the big play disc steps aside for a small label */
.hero3 .reel video{display:block}
.hero3 .reel.live .reel-play .disc{opacity:0}
/* the still poster sits on top of the video in the markup; once the video is actually moving, fade the still away */
.reel .reel-poster{transition:opacity .5s ease}
.reel.live .reel-poster{opacity:0;pointer-events:none}
.reel-pause{position:absolute;right:14px;top:14px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(239,230,216,.45);background:rgba(20,17,15,.55);color:var(--stext);display:grid;place-items:center;cursor:pointer;padding:0}
.reel-pause svg{width:14px;height:14px}
.reel-pause .i-play{display:none;margin-left:2px}
.reel.held .reel-pause .i-pause{display:none}
.reel.held .reel-pause .i-play{display:block}
.reel-pause:hover{background:var(--acc);color:var(--ink);border-color:var(--acc)}
.reel-pause:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* the work: a mosaic of big frames, names on the picture, a short silent preview on hover */
.work3{background:var(--stage);color:var(--stext);padding:84px 0 90px;border-top:1px solid var(--sline)}
.work3 .kick{color:var(--acc)}
.work3 h2{color:var(--stext)}
.work3 .note3{margin:0;color:var(--smuted);font:400 15px/1.55 Sora,sans-serif;max-width:460px;justify-self:end}
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.mt{position:relative;display:block;overflow:hidden;border-radius:4px;background:var(--stage2);height:clamp(260px,30vw,440px);text-decoration:none;color:var(--stext)}
.mt.s7{grid-column:span 7}.mt.s5{grid-column:span 5}
.mt img,.mt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mt img{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
.mt video{opacity:0;transition:opacity .4s ease}
.mt.playing video{opacity:1}
.mt:hover img{transform:scale(1.035)}
.mt::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,17,15,.82),rgba(20,17,15,0) 48%);pointer-events:none}
.mt-txt{position:absolute;left:20px;right:70px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:6px}
.mt-kind{font:600 12px/1.2 Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.mt-name{font:700 clamp(22px,2.2vw,32px)/1.05 Sora,sans-serif;letter-spacing:-.02em;color:var(--stext)}
.mt .play{position:absolute;right:18px;bottom:18px;left:auto;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(244,236,224,.94);color:var(--ink);display:grid;place-items:center;transition:background .25s,color .25s}
.mt .play svg{width:15px;height:15px;margin-left:2px}
.mt:hover .play{background:var(--acc);color:var(--ink)}
.mt:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

/* the cross-link to the website portfolio */
.xlink{margin-top:44px;padding:28px 0 0;border-top:1px solid var(--sline);display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap}
.xlink .kick{margin:0 0 8px}
.xl-h{font:700 clamp(22px,2.4vw,32px)/1.15 Sora,sans-serif;letter-spacing:-.015em;margin:0;color:var(--stext);max-width:640px}
.xlink .btn svg{width:14px;height:14px}
.stage{border-top:1px solid var(--sline)}

@media (max-width:900px){
  .bf-switch .bf-in{padding:6px 12px}
  .hero3{display:block;min-height:0}
  .hero3 .reel{position:relative;aspect-ratio:16/9;min-height:0}
  .hero3-copy{padding:26px var(--gut) 40px}
  .hero3 .reel::after{display:none}
  .hero3 .reel-play{display:block}
  .hero3 h1{font-size:clamp(34px,9vw,52px)}
  .hero3 .lede{font-size:18px}
  .work3{padding:56px 0 60px}
  .work3 .note3{justify-self:start}
  .mosaic{grid-template-columns:1fr;gap:12px}
  .mt.s7,.mt.s5{grid-column:auto;height:auto;aspect-ratio:16/10}
  .mt-txt{left:14px;bottom:12px;right:60px}
  .mt-name{font-size:22px}
  .mt .play{width:36px;height:36px;right:12px;bottom:12px}
}
@media (max-width:640px){
  .bf-switch .bf-who{display:none}
  .bf-tabs{flex:1}.bf-tabs a{flex:1;min-height:42px;padding:0 8px}
  .top .wrap{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:10px}
  .top nav{width:auto}.top nav a.tel .num{display:none}.top nav a.tel .cl{display:inline}.top nav a{flex:none;min-height:44px;padding:12px 13px}
  .mark{font-size:20px}.mark .mk-sub{display:none}
  .mt::after{background:linear-gradient(to top,rgba(20,17,15,.9),rgba(20,17,15,0) 60%)}
}
@media (prefers-reduced-motion:reduce){.mt img,.mt video{transition:none}}
/* 16 Oct 2026: five-tile mosaic (4/4/4 then 6/6), tall player and tall stills for the vertical Clockworks film */
.mt.s4{grid-column:span 4}.mt.s6{grid-column:span 6}
.player.tall{background:transparent;display:flex;justify-content:center}
.player.tall video{width:min(100%,calc(82vh * 9 / 16),480px);height:auto;aspect-ratio:9/16;border-radius:6px;background:var(--stage)}
.grid.tall3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
.grid.tall3 button{aspect-ratio:9/16}
@media (max-width:900px){.mt.s4,.mt.s6{grid-column:auto;height:auto;aspect-ratio:16/10}}
@media (max-width:520px){.grid.tall3{gap:8px}}

/* ======================================================================== v7, 16 Oct 2026: one brand.
   Same header, buttons, type, colors, footer and phone bar as the BuiltFirst 3D home and the website portfolio. */
@font-face{font-family:"Sora";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Sora-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/Newsreader-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/Newsreader-italic.woff2) format("woff2")}
:root{--paper:#FAF6EE;--card:#f4ece0;--red:#b8421a;--acc:#FF6A3D;--cream:#FAF6EE;--night:#14110f;--dline:rgba(250,246,238,.14);--dmute:#b9ab98}
html{scroll-padding-top:84px}
body{background:var(--cream)}
h1{font-weight:800;letter-spacing:-.03em}
h2{font-weight:800;letter-spacing:-.025em}
.kick{font-weight:700;letter-spacing:.16em}
:focus-visible{outline-color:var(--acc)}
main :focus-visible{outline-color:var(--red)}

/* buttons: pills, like everywhere else */
.btn{border-radius:999px;min-height:50px;padding:0 22px;font:700 15px/1 Sora,system-ui,sans-serif;justify-content:center;border-width:1.5px}
.btn:hover{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.coral,.contact .btn.coral{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.btn.coral:hover,.contact .btn.coral:hover{background:#ff7f58;border-color:#ff7f58;color:var(--ink)}
button.btn{font:700 15px/1 Sora,system-ui,sans-serif}
.contact{background:var(--night)}
.contact .btn.line{background:transparent;color:var(--cream);border-color:rgba(250,246,238,.45)}
.contact .btn.line:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.contact .kick{color:var(--acc)!important}
.tile:hover .play,.mt:hover .play{background:var(--acc);color:var(--ink)}
.tile:hover h2,.tile:hover h3,.next a.n:hover,.crumbs a:hover,footer.foot a:hover{color:var(--red)}
.player,.tile .thumb,.grid button,.grid figure video,.tri img,model-viewer.mv{border-radius:14px}
dialog .x{border-radius:999px;padding:10px 14px}
.arbtn{border-radius:999px;background:var(--acc);color:var(--ink)}

/* header */
.bfh{position:sticky;top:0;z-index:50;background:rgba(20,17,15,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--dline);color:var(--cream)}
.bfh-in{max-width:1320px;margin:0 auto;height:68px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 clamp(16px,4.4vw,60px)}
.bfh .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 21px/1 Sora,system-ui,sans-serif;letter-spacing:-.02em;min-height:44px;white-space:nowrap;color:var(--cream)}
.bfh .brand i{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--acc);color:var(--ink);font:800 14px/1 Sora,system-ui,sans-serif;font-style:normal;letter-spacing:-.04em}
.bfh .brand .dept{color:var(--acc);margin-left:-.18em}
.bfh nav{display:flex;align-items:center;gap:24px}
.bfh nav a.ln{font:600 14px/1 Sora,system-ui,sans-serif;text-decoration:none;color:var(--cream);opacity:.86;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.bfh nav a.ln:hover{opacity:1;color:var(--acc)}
.bfh .tel{font:700 14px/1 Sora,system-ui,sans-serif;text-decoration:none;color:var(--cream);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.bfh .btn{min-height:42px;padding:0 18px;font-size:14px;white-space:nowrap}
.bfh .tel .short{display:none}
@media (max-width:1080px){.bfh nav a.ln{display:none}}
@media (max-width:560px){.bfh .tel .full{display:none}.bfh .tel .short{display:inline}.bfh .tel{border:1.5px solid currentColor;border-radius:999px;padding:0 16px;min-height:42px}.bfh nav{gap:8px}.bfh .brand{font-size:19px;gap:8px}}
@media (max-width:359px){.bfh .brand{font-size:17px}.bfh .brand i{width:26px;height:26px;font-size:12px}.bfh .btn,.bfh .tel{padding:0 12px}}

/* footer and phone bar */
footer.bff{background:var(--night);color:var(--dmute);padding:40px 0 calc(110px + env(safe-area-inset-bottom));border-top:1px solid var(--dline);font:400 16px/1.55 Newsreader,Georgia,serif}
footer.bff .wrap{display:grid;gap:14px}
footer.bff b{color:var(--cream);font:800 18px/1 Sora,system-ui,sans-serif}
footer.bff a{text-decoration:none;color:var(--cream)}
footer.bff a:hover{color:var(--acc)}
footer.bff .links{display:flex;flex-wrap:wrap;gap:6px 22px}
footer.bff .links a{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
@media (min-width:821px){footer.bff{padding-bottom:44px}}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(20,17,15,.95);border-top:1px solid var(--dline);transform:translateY(110%);transition:transform .3s}
.callbar.on{transform:none}
.callbar .btn{flex:1;min-height:50px}
.callbar .btn.line{color:var(--cream);border-color:rgba(250,246,238,.6)}
@media (max-width:820px){.callbar{display:flex}}
@media (max-width:640px){.bfh-in{height:64px}}

/* v7.1, 17 Oct 2026: 44px tap targets on phones and touch screens, with nothing moving.
   Plain text links get an invisible 44px hit area: the padding adds the height and the matching
   negative margin takes it back out of the layout, so lines, gaps and wrapping stay where they were. */
@media (max-width:900px),(pointer:coarse){
  .crumbs a,.ic-crumbs a,.ruled .small a,.sec-head p a,figcaption a,main .lede a{display:inline-block;padding:15px 6px;margin:-15px -6px}
  .next a.n{padding:10px 0;margin:-10px 0}
  .ic-link{min-height:44px;margin:-9px 0}
  .bfh .btn,.bfh .tel{position:relative}
  .bfh .btn::after,.bfh .tel::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
}