/* Hero: the only dark chapter besides the footer. Headline is two sentences: one large, one quiet. */
.hero{position:relative;background:var(--night)} /* covers any gap when a phone's toolbar collapses */
/* The flight pins .hero-pin, not the stage. It overhangs the top of the page by 50lvh (transparent,
   no taps, cancelled by its negative margin) because iOS 26 Safari otherwise takes the screen-sized
   pinned stage as the edge container and keeps its dark colour under the glass toolbar after the
   flight; WebKit skips fixed containers taller than 105% of the viewport. Verified in the iOS Simulator. */
.motion .hero-pin{margin-top:-50lvh;padding-top:50lvh;pointer-events:none}
.motion .hero-pin>.hero-stage{pointer-events:auto}
.hero-stage{position:relative;height:100svh;min-height:420px;overflow:hidden;isolation:isolate;background:var(--night);color:var(--bone)}
.hero-poster,.hero-canvas{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero-canvas{opacity:0;transition:opacity .6s var(--ease)}
/* Portrait phones: show the whole first frame (as the canvas does), not a cropped strip. */
@media (max-aspect-ratio:1/1.15){
  /* The flight (sharp frame over its own blurred fill) covers the screen; the copy sits on a darker lower third. */
  .hero-shade{background:linear-gradient(180deg,oklch(0.17 0.006 70/.6) 0%,transparent 14%,transparent 38%,oklch(0.17 0.006 70/.92) 80%)}
}
[data-flight-loaded=true] .hero-canvas{opacity:1}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(0.17 0.006 70/.7) 0%,oklch(0.17 0.006 70/.15) 20%,oklch(0.17 0.006 70/.1) 40%,oklch(0.17 0.006 70/.88) 100%)}
.hero-copy{position:absolute;inset:auto 0 clamp(32px,7vh,72px);display:grid;gap:clamp(20px,3.2vh,32px)}
.hero-title{display:grid;gap:.6rem;max-width:min(100%,24ch);font-weight:600}
.hero-line1{display:block;font-size:min(var(--step-4),9.5svh);line-height:1.02;letter-spacing:-.035em}
.hero-line1 em{font-style:normal;color:var(--gold)}
.hero-line2{display:block;max-width:34ch;color:var(--bone-2);font-size:var(--step-2);font-weight:400;line-height:1.25;letter-spacing:-.015em}
.hero-foot{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px}
.hero-sub{max-width:52ch;color:var(--bone-2);font-size:15px;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.hero-actions .btn-text{color:var(--bone)}
/* Scene name replaces the copy while the camera flies (shown by hero-flight.mjs). */
.hero-scenes{position:absolute;left:max(var(--gutter),(100% - 1200px) / 2);right:var(--gutter);bottom:clamp(32px,7vh,72px);opacity:0;transition:opacity .5s var(--ease)}
.hero-scenes strong{display:block;font-size:var(--step-2);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.hero-scenes p{max-width:46ch;margin-top:10px;color:var(--bone-2);font-size:15px;line-height:1.5}
.hero-scenes li{display:none}
.hero-scenes li[data-active=true]{display:block}
[data-flying=true] .hero-scenes{opacity:1}
/* Entrance is pure CSS so the headline paints at first render, not after the animation libraries load. */
.motion .hero-line1,.motion .hero-line2,.motion .hero-foot>*{animation:hero-rise 1s var(--ease) both}
.motion .hero-line2{animation-delay:.12s}
.motion .hero-foot>*{animation-delay:.24s}
.motion .hero-foot>*+*{animation-delay:.32s}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}}
@media (max-width:860px){
  .hero-copy,.hero-scenes{bottom:calc(92px + env(safe-area-inset-bottom))}
  [data-solid=false] ~ main .hero-copy,[data-solid=false] ~ main .hero-scenes,.js .site-header:not([data-solid]) ~ main .hero-copy{bottom:calc(28px + env(safe-area-inset-bottom))}
  .hero-shade{background:linear-gradient(180deg,oklch(0.17 0.006 70/.75) 0%,oklch(0.17 0.006 70/.2) 22%,oklch(0.17 0.006 70/.55) 45%,oklch(0.17 0.006 70/.94) 75%)}
  .hero-sub{font-size:14px}
}

/* Trust: three calm facts on paper, no boxes. */
.trust{padding-block:clamp(28px,3.5vw,44px);border-bottom:1px solid var(--line)}
.trust-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,4vw,56px)}
.trust-list li{display:grid;align-content:start;gap:6px}
.trust-list strong{font-size:var(--step-1);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.trust-num{color:var(--gold-ink);font-variant-numeric:tabular-nums}
.trust-list li>span{color:var(--ink-2);font-size:15px}
@media (max-width:860px){.trust-list{grid-template-columns:1fr}}

/* Services: one stacked header, then four cards with four different compositions. */
.services{padding-top:clamp(44px,4.5vw,64px)}
.section-head{display:grid;gap:16px;margin-bottom:clamp(28px,3.5vw,44px)}
.section-head h2{max-width:16ch;font-size:var(--step-3)}
.section-head p{max-width:52ch;color:var(--ink-2);font-size:var(--step-1)}
.service-stack{display:grid;gap:clamp(16px,2vw,24px);padding-bottom:clamp(48px,6vw,96px)}
.service-panel{position:relative;width:var(--wrap);margin-inline:auto;overflow:hidden;border-radius:var(--radius);background:var(--paper-2);transform-origin:50% 0}
/* Desktop cards are exactly one viewport tall (minus header) so a stacked card is never cut off. */
.service-panel .service-inner{width:auto;height:min(calc(100svh - var(--header-h) - 48px),720px);min-height:0}
.service-copy{display:grid;align-content:end;gap:clamp(10px,1.6svh,16px);padding:clamp(24px,min(4vw,6svh),56px)}
.service-copy h3{font-size:min(var(--step-3),7.5svh)}
.service-copy p{max-width:40ch;color:var(--ink-2);font-size:min(var(--step-1),3.4svh);line-height:1.5}
.service-kicker{color:var(--gold-ink);font-size:15px;font-weight:600}
.service-media{position:relative;overflow:hidden;background:var(--line)}
.service-media img{width:100%;height:100%;object-fit:cover}
.service-media figcaption{margin-top:10px;font-size:13px}

.service-panel--cover{background:var(--night)}
.service-panel--cover .service-inner{position:relative;display:grid;align-items:end}
.service-panel--cover .service-media{position:absolute;inset:0}
.service-panel--cover .service-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 15%,oklch(0.17 0.006 70/.55) 45%,oklch(0.17 0.006 70/.9) 100%),linear-gradient(90deg,oklch(0.17 0.006 70/.45),transparent 60%)}
.service-panel--cover .service-copy{position:relative;z-index:1;color:var(--bone)}
.service-panel--cover .service-copy p{color:var(--bone-2)}

.service-panel--split .service-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.service-panel--split .service-media{height:100%;min-height:0}
.service-panel--split .service-media{order:-1}
.service-panel--split .service-copy{align-content:center}

.service-panel--night{background:var(--night);color:var(--bone)}
.service-panel--night .service-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.service-panel--night .service-copy p{color:var(--bone-2)}
.service-panel--night .service-media{margin:clamp(20px,3vw,40px);background:none}
.service-panel--night .service-media img{height:auto;max-height:calc(100% - 32px);aspect-ratio:16/9;border-radius:calc(var(--radius) - 8px)}
.service-panel--night figcaption{color:var(--bone-2)}

.service-panel--feature .service-inner{display:grid;grid-template-rows:auto minmax(0,1fr)}
.service-panel--feature .service-copy{align-content:start;padding-bottom:clamp(20px,2.5vw,32px)}
.metal-media{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;min-height:0;padding:0 clamp(16px,2vw,24px) clamp(16px,2vw,24px)}
@media (min-width:861px) and (max-height:760px){
  .service-panel--feature .service-inner{grid-template-rows:none;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .service-panel--feature .service-copy{align-content:center;padding-bottom:clamp(24px,6svh,56px)}
  .metal-media{padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(16px,2vw,24px) 0}
  .metal-media .service-media:last-child{margin-top:0}
}
.metal-media .service-media{height:100%;min-height:0;border-radius:calc(var(--radius) - 8px)}
@media (prefers-reduced-motion:no-preference) and (min-width:861px){.service-panel{position:sticky;top:calc(var(--header-h) + 24px)}}
@media (max-width:860px){
  .service-panel .service-inner{height:auto;min-height:0}
  .service-panel--cover .service-inner{min-height:min(78svh,560px)}
  .service-panel--split .service-inner,.service-panel--night .service-inner{grid-template-columns:minmax(0,1fr)}
  .service-panel--split .service-media{aspect-ratio:4/5}
  .metal-media{grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:auto}
  .metal-media .service-media{aspect-ratio:3/4;min-height:0}
}

/* Story */
.story{padding-block:clamp(64px,7vw,112px) clamp(48px,5vw,80px);background:var(--paper-2)}
.story-inner{display:grid;grid-template-columns:minmax(120px,.5fr) minmax(0,1.5fr);align-items:start;gap:clamp(32px,7vw,112px)}
.story-mark{position:sticky;top:calc(var(--header-h) + 48px)}
.isotipo{width:min(100%,200px);height:auto;overflow:visible}
.isotipo path{fill:var(--gold);stroke:var(--gold);stroke-width:.6}
.eyebrow{margin-bottom:24px;color:var(--gold-ink);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.story-lead{max-width:30ch;font-size:var(--step-2);font-weight:500;line-height:1.3;letter-spacing:-.02em}
.story-copy strong{color:var(--gold-ink);font-weight:600}
.story-copy p+p{max-width:56ch;margin-top:24px;color:var(--ink-2);font-size:var(--step-1);line-height:1.55}
@media (max-width:860px){.story-inner{grid-template-columns:minmax(0,1fr)}.story-mark{position:static}.isotipo{width:72px}}

/* Work: captions sit under the photos, never on them. */
.work{padding-top:clamp(40px,4vw,64px);overflow:clip}
.work-pin{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(24px,4svh,48px);padding-block:0 56px}
/* Pinned: content starts right under the header (no vertical centering, which left a band above the heading). */
.work:has(.work-track[data-pinned=true]){padding-top:0}
.work:has(.work-track[data-pinned=true]) .work-pin{min-height:100svh;align-content:start;padding-top:calc(var(--header-h) + clamp(16px,3svh,32px))}
.work-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 24px}
.work-head h2{max-width:14ch;font-size:min(var(--step-3),8svh)}
.work-controls{display:flex;align-items:center;gap:10px}
.work-progress{width:clamp(72px,10vw,150px);height:2px;margin-right:10px;overflow:hidden;border-radius:2px;background:var(--line)}
.work-progress span{display:block;height:100%;background:var(--ink);transform:scaleX(.04);transform-origin:0 50%;transition:transform .25s linear}
.work-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;transition:border-color .3s var(--ease),transform .2s var(--ease)}
.work-arrow:hover{border-color:var(--ink)}
.work-arrow:active{transform:scale(.95)}
.work-arrow svg{width:16px;height:16px}
.work-track{display:flex;align-items:start;gap:clamp(14px,1.6vw,24px);padding:6px max(var(--gutter),(100% - 1200px) / 2);scroll-padding-inline:max(var(--gutter),(100% - 1200px) / 2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.work-track::-webkit-scrollbar{display:none}
.work-track[data-pinned=true]{width:max-content;overflow:visible;scroll-snap-type:none;cursor:grab;user-select:none}
.work-track[data-dragging=true]{cursor:grabbing}
.work-track img{-webkit-user-drag:none}
/* Photo width follows the viewport height too, so a pinned strip never runs below the fold. */
.work-item{flex:none;display:grid;gap:12px;width:min(clamp(240px,24vw,360px),calc((100svh - var(--header-h) - 240px) * .75));scroll-snap-align:start;text-decoration:none}
.work-item:nth-child(3n+2){width:min(clamp(270px,30vw,460px),calc((100svh - var(--header-h) - 240px) * .8))}
.work-media{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)}
.work-item:nth-child(3n+2) .work-media{aspect-ratio:4/5}
.work-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter .8s var(--ease),transform 1.2s var(--ease)}
.work-item:hover img,.work-item:focus-visible img,.work-item[data-active=true] img{filter:none;transform:scale(1.03)}
.work-cap{color:var(--ink-2);font-size:14px;line-height:1.4}


/* Lightbox stays dark: photos read best on graphite. */
#project-dialog{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--night);color:var(--bone)}
#project-dialog::backdrop{background:var(--night)}
body.gallery-open{overflow:hidden}
.lightbox-inner{display:grid;grid-template-rows:44px minmax(0,1fr) 76px;gap:16px;height:100%;padding:20px var(--gutter) 24px}
.lightbox-top{display:flex;align-items:center;justify-content:space-between}
.lightbox-top>a{color:var(--bone-2);font-size:13px}
.lightbox-inner button{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--night-line);border-radius:50%;background:var(--night);color:var(--bone);cursor:pointer;transition:border-color .3s,color .3s}
.lightbox-inner button:hover{border-color:var(--gold);color:var(--gold)}
.lightbox-inner button span{font:300 26px/1 var(--font)}
.lightbox-stage{display:flex;align-items:center;justify-content:center;gap:24px;min-height:0}
.lightbox-media{position:relative;flex:none;height:min(100%,760px);max-width:calc(100% - 136px);aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius);background:var(--night-2)}
.lightbox-media img{width:100%;height:100%;object-fit:contain}
#project-status{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--bone-2);text-align:center}
#project-status:empty{display:none}
#project-caption{position:absolute;inset:auto 0 0;padding:44px 18px 16px;background:linear-gradient(transparent,oklch(0.17 0.006 70/.9));font-size:14px}
.lightbox-media:has(#project-image[hidden]) #project-caption{display:none}
.lightbox-thumbnails{align-self:end;justify-self:center;display:flex;gap:8px;padding:10px;border:1px solid var(--night-line);border-radius:999px}
.lightbox-inner .lightbox-thumbnails button{width:52px;height:52px;overflow:hidden;border:2px solid transparent}
.lightbox-thumbnails img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.lightbox-inner .lightbox-thumbnails button[aria-current=true]{border-color:var(--gold)}
@media (max-width:860px){
  .lightbox-inner{grid-template-rows:44px minmax(0,1fr) 64px;gap:12px;padding:12px 12px 20px}
  .lightbox-stage{position:relative;gap:0}
  .lightbox-media{width:min(100%,calc((100dvh - 160px) * .75));max-width:100%;height:auto;max-height:100%}
  .lightbox-stage>button{position:absolute;bottom:8px;z-index:1}
  .lightbox-stage>[data-gallery-prev]{left:4px}
  .lightbox-stage>[data-gallery-next]{right:4px}
  .lightbox-inner .lightbox-thumbnails button{width:40px;height:40px}
}

/* FAQ */
.faq{padding-block:clamp(72px,8vw,128px);background:var(--paper-2)}
.faq-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px)}
.faq-head h2{font-size:var(--step-3);max-width:12ch}
.faq-head p{margin-top:20px;color:var(--ink-2)}
.faq-head a{color:var(--ink);font-weight:600}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px;padding-block:18px;cursor:pointer;list-style:none;font-size:var(--step-1);font-weight:600;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 10px no-repeat,var(--paper);transition:transform .5s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(135deg)}
.faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s var(--ease) allow-discrete}
.faq-list details[open]::details-content{block-size:auto}
.faq-list details p{max-width:60ch;padding-bottom:24px;color:var(--ink-2)}
@media (max-width:860px){.faq-inner{grid-template-columns:minmax(0,1fr)}}

/* Contact: the phone number is the call to action. */
.contact{padding-block:clamp(80px,9vw,140px)}
.contact-inner{display:grid;gap:clamp(40px,5vw,72px)}
.contact-title{max-width:14ch;font-size:var(--step-4);letter-spacing:-.035em;line-height:1.02}
.contact-body{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:32px clamp(40px,8vw,140px)}
.contact-call{display:grid;gap:10px}
.contact-phone{font-size:clamp(2rem,1.1rem + 3.6vw,4rem);font-weight:600;letter-spacing:-.03em;line-height:1;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:.18em;transition:color .3s var(--ease)}
.contact-phone:hover{color:var(--gold-ink)}
.contact-bilingual{color:var(--gold-ink);font-weight:600}
.contact-lines{display:grid;gap:14px;max-width:44ch}
.contact-intro{font-size:var(--step-1);text-wrap:pretty}
.contact-label{color:var(--ink-3);font-size:13px}
.contact-email{overflow-wrap:anywhere}
.contact-area{color:var(--ink-3);font-size:14px}
@media (max-width:860px){.contact-body{grid-template-columns:minmax(0,1fr)}}

/* Footer: slim dark bookend that answers the hero. */
.site-footer{padding-top:clamp(28px,3.5vw,44px);background:var(--night);color:var(--bone-2)}
.footer-main{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.footer-brand img{width:92px;height:auto}
.footer-services{margin-right:auto;font-size:14px}
.footer-main nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14px;font-weight:500}
.footer-main nav a{color:var(--bone);text-decoration:none;transition:color .3s var(--ease)}
.footer-main nav a:hover{color:var(--gold)}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:clamp(18px,2.5vw,28px);padding-block:14px 18px;border-top:1px solid var(--night-line);color:var(--bone-2);font-size:13px}
.site-footer :focus-visible{outline-color:var(--gold)}