/* Intro, Apple-style polish, Lusion layer (vine, skew, scramble, dot pills), brand ring, section seams */
/* ===== Intro: Ferrari-style load — ~1 second. Pure CSS timing so it isn't held up while the page parses. ===== */
.intro-screen{display:none;position:fixed;inset:0;z-index:10000;background:#000;place-items:center;cursor:pointer;will-change:opacity;animation:intro-screen-out .6s cubic-bezier(.45,0,.55,1) 1.2s forwards}
html.intro .intro-screen,.intro-screen.done{display:grid}
.intro-mark{width:clamp(150px,13vw,220px);height:auto;opacity:0;will-change:opacity,transform;animation:intro-mark 1.3s linear forwards}
@keyframes intro-mark{0%{opacity:0;transform:scale(.97);animation-timing-function:cubic-bezier(.23,1,.32,1)}27%{opacity:1;transform:none}54%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{opacity:0;transform:scale(1.01)}}
@keyframes intro-screen-out{to{opacity:0;visibility:hidden}}
.intro-screen.done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s .5s}
@media (prefers-reduced-motion:reduce){.intro-mark{animation-timing-function:step-end}}
html.intro .hero *{animation-play-state:paused !important}

/* ===== Apple-style polish layer (WWDC fluid-interface + Emil Kowalski craft rules) ===== */
:root{--spring:cubic-bezier(.32,.72,0,1);--ease-soft:cubic-bezier(.25,.1,.25,1)}
/* Typography: comfortable body measure + leading, balanced/pretty wrapping */
p{text-wrap:pretty}
.feature-copy p,.about-copy p,.hero-sub,.cap-desc,.faq-a-inner{line-height:1.6;letter-spacing:.003em}
@media (min-width:1081px){.feature-copy p,.about-copy p{font-size:17px}}
h1,h2,h3,.cap-title,.faq-q{font-optical-sizing:auto}
/* One button language: pills, press feedback on pointer-down, hover only where hover exists */
.btn,.read-more,header .btn.desktop-only,header.scrolled .btn.desktop-only,.mobile-cta{border-radius:999px}
.btn,.read-more{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease,transform .16s var(--ease-out)}
.btn:active,.read-more:active{transform:scale(.97);transition-duration:.1s}
@media (hover:none){
  .btn:hover{background:var(--green);color:var(--paper);transform:none;box-shadow:none}
  .read-more:hover{background:var(--paper);color:var(--green);border-color:var(--paper)}
  nav.links a.navlink:hover::after{transform:scaleX(0)}
}
/* Carousel arrows as round glass controls (material, not bare glyphs) */
.cap-arrow{border-radius:50%;width:46px;height:46px;background:rgba(248,246,239,.08);border:1px solid rgba(248,246,239,.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px -10px rgba(0,0,0,.55);
  transition:background-color .2s ease,border-color .2s ease,opacity .2s ease,transform .16s var(--ease-out)}
.cap-arrow svg{width:16px;height:14px}
.cap-arrow.on-light{color:var(--paper)}
@media (hover:hover) and (pointer:fine){.cap-arrow:hover{background:rgba(248,246,239,.18);border-color:rgba(248,246,239,.38)}}
@media (max-width:760px){.cap-arrow{width:40px;height:40px}.cap-arrow svg{width:14px;height:12px}}
/* Scroll reveals "materialize": rise + de-blur together, staggered */
.reveal:not(.v-card):not(.frame){filter:blur(6px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out)}
.reveal:not(.v-card):not(.frame).in{filter:blur(0)}
.reveal{transform:translateY(22px)}
.reveal.in{transform:none}
/* Wayfinding: the nav shows where you are */
nav.links a.navlink.is-active::after{transform:scaleX(1);transform-origin:0 50%}
nav.links a.navlink[aria-current="true"]{opacity:1}
/* FAQ head matches the other section heads */
.faq-head .eyebrow{display:block;margin-bottom:10px}
/* Phones: 360° product viewers sit above their copy instead of behind it */
@media (max-width:760px){
  .equipment,.drone{display:flex;flex-direction:column}
  .equipment .ronin-360,.drone .drone-360{position:relative;inset:auto;left:auto;right:auto;top:auto;transform:none;width:100%;height:auto;aspect-ratio:16/10;order:-1;margin:0 0 4px;flex:0 0 auto}
  .drone .feature-copy{text-align:left}
  .drone .feature-copy h2::after{margin-left:0;background:linear-gradient(90deg,#4a9e5c,var(--green))}
  .drone .feature-copy p{margin-left:0}
}
/* Hero recedes as you scroll past it (Apple product-page feel); transform/filter only */
.hero > .hero-eyebrow,.hero > h1,.hero > .hero-sub,.hero > .hero-cta{transform-origin:0 100%}
@media (prefers-reduced-motion:reduce){
  .reveal:not(.v-card):not(.frame){filter:none !important}
  .hero > .hero-eyebrow,.hero > h1,.hero > .hero-sub,.hero > .hero-cta{translate:none !important;scale:none !important;filter:none !important}
}
@media (prefers-reduced-transparency:reduce){.cap-arrow{background:rgba(20,19,15,.85);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ===== Lusion-inspired layer: neutral frame, loud work — ribbon, weighted scroll, velocity skew, scramble, dot pills ===== */
/* Bigger, calmer section headlines (short titles only) */
.cap-head h2,.equipment .feature-copy h2,.drone .feature-copy h2,.faq-head h2{font-size:clamp(40px,6.2vw,84px);line-height:.92;letter-spacing:-.005em}
/* One button language: pill + leading dot */
.btn::before,.read-more::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:10px;vertical-align:middle;position:relative;top:-1px;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn:hover::before,.read-more:hover::before{transform:scale(1.5)}}
/* Work cards: arrow slides in ahead of the title on hover */
.v-card .v-caption h3{display:flex;align-items:center}
.v-card .v-caption h3::before{content:'\2192';display:inline-block;width:0;opacity:0;overflow:hidden;transform:translateX(-12px);transition:width .35s var(--ease-out),opacity .25s ease,transform .35s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.v-card:hover .v-caption h3::before{width:1.3em;opacity:1;transform:none}}
/* Velocity skew target */
.v-card .frame{will-change:transform;transform-origin:50% 50%}
/* Scramble text keeps its box steady */
.scr-txt{display:inline-block;white-space:pre}
/* The ribbon: one bird-green line that draws itself through the dark sections */
section[id]{scroll-margin-top:0} /* html scroll-padding already clears the header; margin + padding were doubling up */
.has-ribbon{position:relative;isolation:isolate}
.ribbon-slice{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.ribbon-slice svg{position:absolute;left:0;overflow:visible}
.ribbon-slice .rv-stem-sh{fill:none;stroke:#020a01;stroke-linecap:round;stroke-linejoin:round;stroke-width:10px;opacity:.55;transform:translate(2px,3px)}
.ribbon-slice .rv-stem{fill:none;stroke:#2c4a26;stroke-linecap:round;stroke-linejoin:round;stroke-width:6.5px}
.ribbon-slice .rv-stem-hi{fill:none;stroke:#6f8f55;stroke-linecap:round;stroke-width:1.5px;opacity:.55;transform:translate(-1px,-1.2px)}
@media (max-width:760px){.ribbon-slice .rv-stem{stroke-width:4.6px}.ribbon-slice .rv-stem-sh{stroke-width:7px}.ribbon-slice .rv-stem-hi{stroke-width:1px}}
/* Rose vine: thorns, leaves and blooms appear as the stem grows past them */
.rv-item>g{transform:scale(.001);opacity:0;transition:transform .9s cubic-bezier(.34,1.4,.5,1),opacity .4s ease}
.rv-item.on>g{transform:none;opacity:1}
.rv-thorn path{fill:url(#rvThorn)}
.rv-leaf .petiole{fill:none;stroke:#2c4a26;stroke-width:2.2;stroke-linecap:round}
.rv-leaf .lf{fill:url(#rvLeaf);stroke:#0b1609;stroke-width:.8;stroke-linejoin:round}
.rv-leaf .lf-hi{fill:url(#rvLeafHi);opacity:.5}
.rv-leaf .rib{fill:none;stroke:#6d8a5c;stroke-width:.9;stroke-linecap:round;opacity:.7}
.rv-leaf .vein{fill:none;stroke:#557347;stroke-width:.6;stroke-linecap:round;opacity:.55}
.rv-leaf>g{filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.rv-bloom>g{transition:transform 1.6s cubic-bezier(.22,1.2,.36,1),opacity .6s ease}
.rv-bloom .p1{fill:url(#rvP1)}.rv-bloom .p2{fill:url(#rvP2)}.rv-bloom .p3{fill:url(#rvP3)}
.rv-bloom .core{fill:#f19bb0}.rv-bloom .spiral{fill:none;stroke:#7a1f37;stroke-width:1.4;stroke-linecap:round}
.rv-bloom .sepal{fill:#3d874f}.rv-bloom .twig{fill:none;stroke:#4a9e5c;stroke-width:3;stroke-linecap:round}
.rv-bloom .petals{transform-origin:0 0}
.rv-bloom.on .petals{animation:rv-sway 7s ease-in-out infinite alternate}
@keyframes rv-sway{from{transform:rotate(-4deg) scale(.985)}to{transform:rotate(4deg) scale(1.015)}}
.rv-tip>g{transition:none}
@media (prefers-reduced-motion:reduce){.rv-item>g{transition:none}.rv-bloom.on .petals{animation:none}}
@media (prefers-reduced-motion:reduce){.v-card .frame{will-change:auto;transform:none !important}}

/* ===== Clients: 3D brand ring — drag/swipe with momentum, settles on a brand, drifts when idle ===== */
.clients{overflow:hidden}
.brand-ring{--cw:clamp(150px,15vw,224px);--ch:calc(var(--cw) * .6);--lh:clamp(26px,2.7vw,42px);position:relative;height:calc(var(--ch) * 2.15);margin-top:6px;-webkit-user-select:none;user-select:none;pointer-events:none}
.brand-ring-stage{position:absolute;inset:0;perspective:1050px;perspective-origin:50% 20%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.brand-ring-track{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d}
.brand-card{position:absolute;left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);width:var(--cw);height:var(--ch);display:grid;place-items:center;border-radius:22px;
  background:linear-gradient(165deg,rgba(248,246,239,.085) 0%,rgba(248,246,239,.025) 55%,rgba(248,246,239,.04) 100%);
  border:1px solid rgba(248,246,239,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(255,255,255,.03),0 34px 60px -34px rgba(0,0,0,.9);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}
.brand-card img{width:auto;height:auto;max-width:76%;max-height:calc(var(--lh) * var(--s,1));object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.brand-ring-glow{position:absolute;left:50%;top:46%;width:min(70vw,760px);height:calc(var(--ch) * 2.2);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(74,158,92,.16),rgba(74,158,92,.05) 55%,transparent 100%)}
.brand-ring-floor{position:absolute;left:50%;top:calc(46% + var(--ch) * .72);width:min(60vw,640px);height:26px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(2px)}
.brand-ring-meta{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2px;padding:0 var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver)}
.brand-ring-name{color:var(--paper);min-width:12ch;text-align:right}
.brand-ring-count{min-width:12ch;font-variant-numeric:tabular-nums}
.brand-ring-rule{width:28px;height:1px;background:rgba(248,246,239,.35)}
@media (max-width:760px){.brand-ring{--cw:clamp(132px,40vw,170px);--lh:28px}.brand-ring-stage{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}}
@media (prefers-reduced-transparency:reduce){.brand-card{background:#22211c}}

/* Flat, straight conveyor (overrides the 3D ring) */
.brand-ring{height:calc(var(--ch) + 24px);margin-top:0}
.brand-ring-stage{perspective:1600px;perspective-origin:50% 50%}
.brand-ring-track{top:50%;transform-style:preserve-3d}
.brand-card{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.brand-ring-meta{margin-top:14px}

/* ===== Seamless, cinematic section transitions ===== */
.clients{border-top:0}
/* Seams: each dark section fades in from the colour of the one above — no hard edges */
.seam{position:relative;isolation:isolate}
.seam::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--seam-h,30vh);pointer-events:none;z-index:-1;background:var(--seam-grad)}
.portland.seam::before{z-index:1;height:clamp(56px,9vh,100px)}
.seam-bottom::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:var(--seam-h,22vh);pointer-events:none;z-index:-1;background:var(--seam-grad-b)}
/* 3D depth: section content rises toward the camera as it enters and settles back as it leaves */
.depth{perspective:1400px}
.depth > .depth-item{transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.depth > .depth-item{translate:none !important;rotate:none !important;scale:none !important}}

/* Hero → brand row: short, eased fade from the reel into the ink below (no hard edge) */
.hero .hero-overlay{background:linear-gradient(180deg,rgba(20,19,15,0) calc(100% - var(--hero-seam)),rgba(20,19,15,.35) calc(100% - var(--hero-seam) * .55),rgba(20,19,15,.75) calc(100% - var(--hero-seam) * .22),#14130F 100%),rgba(20,19,15,.62)}
.hero{--hero-seam:clamp(56px,9vh,100px)}
.clients{padding-bottom:clamp(14px,2vw,24px)}
@media (max-width:760px){.faq{padding-bottom:120px}}

/* Crowning wine-red rose (outlined, cupped bud) */
.rv-final .rw-neck{fill:none;stroke:#4a9e5c;stroke-width:7px;stroke-linecap:round}
.rv-final .rw-leaf{fill:#2f7a42;stroke:#0f2a14;stroke-width:1.6;stroke-linejoin:round}
.rv-final .rw-leaf-hi{fill:#4a9e5c;opacity:.85}
.rv-final .rw-vein{fill:none;stroke:#0f2a14;stroke-width:1.2;stroke-linecap:round}
.rv-final [class^="rw-d"],.rv-final .rw-sepal{stroke:#1c030a;stroke-width:2.6;stroke-linejoin:round}
.rv-final .rw-d1{fill:#7a1129}.rv-final .rw-d2{fill:#6a0d22}.rv-final .rw-d3{fill:#4f0818}.rv-final .rw-d4{fill:#3b0512}
.rv-final .rw-hl{fill:#94223e;opacity:.55}
.rv-final .rw-curl{fill:none;stroke:#1c030a;stroke-width:2.6;stroke-linecap:round}
.rv-final .rw-sepal{fill:#2f7a42}
.rv-final .petals{transform-origin:0 0}
.rv-final image{filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
.rv-final.on .petals{animation:rv-sway 7s ease-in-out infinite alternate}
@media (max-width:760px){.faq{padding-bottom:180px}.rv-final .rw-neck{stroke-width:5px}}