/* ---------- embedded faces ---------- */
@font-face{font-family:'Inter S';src:url(/assets/fonts/inter-s-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Inter S';src:url(/assets/fonts/inter-s-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:'Chakra S';src:url(/assets/fonts/chakra-s-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}

/* ---------- reference unit ----------
   Every measurement below is a real pixel value read off the 1280x800 reference.
   --u is the reference pixel: 1px at 1280x800, and it scales with the viewport,
   so proportions are preserved while the chrome stays anchored to the real edges. */
:root{
  --u: clamp(0.68px, min(100vw / 1280, 100vh / 800), 1.72px);
  --t: var(--u);   /* desktop: content and structure share one scale */
  --u: clamp(0.68px, min(100vw / 1280, 100dvh / 800), 1.72px);
  --line: rgba(255,255,255,.13);
  --cream:#e8d1cb;
  --ink:#15131b;
  --hair: max(1px, calc(1 * var(--u)));
  --nudge: calc(1 * var(--t));   /* Chrome centres these caps ~1px high */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#04070d;overflow:hidden;
  font-family:'Inter S',-apple-system,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}
.stage{position:fixed;inset:0;overflow:hidden}

/* ---------- hero image: graded exactly as the reference, cover, centred ---------- */
.bg{position:absolute;inset:0;background-image:url(/assets/img/scene.webp);
    background-size:cover;background-position:50% 50%;background-repeat:no-repeat}
/* the video box is sized to cover the stage at 16:9 (no object-fit crop, so it can
   move without exposing an edge). The arch sits ~4% left of centre in the clip:
   scale up 10% and shift the box right by 4.5% of its own width. */
.bg video{position:absolute;left:50%;top:50%;display:block;
          width:max(100vw, 177.78vh);height:max(100vh, 56.25vw);
          transform:translate(-45.5%,-50%) scale(1.1)}
/* one clip per chapter, stacked; the chosen one fades up over the last */
.bg video{opacity:0;transition:opacity .9s ease}
.bg video.on{opacity:1}
/* chapter change: the headline drops back into its mask and the paragraph
   settles out, the copy is swapped, and both return the way they entered */
.hero .hrise{transition:transform .5s var(--e-mask)}
.hero .blurb{transition:opacity .4s ease, transform .4s ease}
.swapping .hrise{transform:translateY(112%)}
.swapping .blurb{opacity:0;transform:translateY(calc(7*var(--t)))}

/* ---------- frame: 30u inset layout container (the hairlines and corners were removed) ---------- */
.frame{position:absolute;left:calc(30*var(--u));top:calc(30*var(--u));
       right:calc(30*var(--u));bottom:calc(31*var(--u))}

/* ---------- shared label face ---------- */
.lbl{font-family:'Chakra S','Inter S',sans-serif;font-weight:700;
     font-size:calc(10*var(--t));line-height:1;white-space:nowrap}
.t{position:relative;top:var(--nudge);display:inline-block;text-align:left;white-space:pre}
.bg{will-change:transform;transform-origin:50% 50%;backface-visibility:hidden}

/* ---------- masthead ---------- */
.logo{position:absolute;left:calc(24*var(--t));top:calc(22*var(--t));
      width:calc(163*var(--t));height:calc(19*var(--t));display:block}
.logo svg{width:100%;height:100%;display:block;fill:#fff}

.masthead{position:absolute;right:calc(11*var(--t));top:calc(12*var(--t));
          height:calc(41*var(--t));display:flex;align-items:center}
.navset{display:contents}
.links{display:flex;align-items:center;gap:calc(14.4*var(--t));margin-right:calc(18*var(--t))}
.links a{color:#e3e8f2;text-decoration:none;letter-spacing:calc(.1*var(--t));
         padding-left:calc(.1*var(--t));opacity:.94;transition:opacity .25s ease,color .25s ease}
.links a:hover{opacity:1;color:#fff}

.pill{height:calc(41*var(--t));display:flex;align-items:center;text-decoration:none;
      position:relative;cursor:pointer;border:0;padding:0}
.pill .ico{flex:none;display:block}
.enter{width:calc(87*var(--t));padding-left:calc(21*var(--t));
       background:rgba(255,250,246,.05);
       -webkit-backdrop-filter:blur(calc(12*var(--t)));backdrop-filter:blur(calc(12*var(--t)));
       transition:background .3s ease}
.enter:hover{background:rgba(255,250,246,.075)}
.enter .ico{width:calc(7*var(--t));height:calc(11*var(--t));fill:#f4f7ff}
.enter span{color:rgba(255,255,255,.93);margin-left:calc(7*var(--t));
            letter-spacing:calc(.33*var(--t))}

.menu{width:calc(90*var(--t));padding-left:calc(21*var(--t));background:var(--cream);
      clip-path:polygon(0 0, calc(100% - 15*var(--t)) 0, 100% calc(15*var(--t)), 100% 100%, 0 100%);
      transition:background .3s ease}
.menu:hover{background:var(--cream)}
.menu .ico{width:calc(10*var(--t));height:calc(10*var(--t));fill:var(--ink)}
.menu span{color:var(--ink);margin-left:calc(7*var(--t));letter-spacing:calc(.02*var(--t))}

/* ---------- section index ---------- */
.index{position:absolute;left:calc(10.5*var(--t));top:50%;transform:translateY(calc(-50% + 1.5*var(--t)));
       list-style:none;margin:0;padding:0}
.index li{height:calc(26.6*var(--t));display:flex;align-items:center;position:relative}
.index a{font-family:'Chakra S','Inter S',sans-serif;font-weight:700;font-size:calc(10*var(--t));
         line-height:1;letter-spacing:calc(1.3*var(--t));text-decoration:none;white-space:nowrap;
         color:rgba(232,238,250,.3);transition:color .3s ease}
.index a:hover{color:#e6eaf5}
.index .on a{color:#e6eaf5}
.index .on::before{content:"";position:absolute;left:calc(-13.5*var(--t));top:50%;
                   width:calc(6*var(--t));height:calc(7*var(--t));
                   transform:translateY(-50%);background:#fff}

/* ---------- hero ---------- */
.hero{position:absolute;left:0;right:0;bottom:max(7.98%, calc(59*var(--t)));
      display:flex;flex-direction:column;align-items:center;text-align:center}
.headline{margin:0;font-weight:700;font-size:calc(31.5*var(--t));line-height:calc(32*var(--t));
          letter-spacing:calc(1.53*var(--t));padding-left:calc(1.53*var(--t));
          color:#fff;text-transform:uppercase}
.blurb{margin:calc(15.56*var(--t)) 0 0;font-weight:400;font-size:calc(11.1*var(--t));
       line-height:calc(19.7*var(--t));color:rgba(224,232,245,.72);
       max-width:calc(420*var(--t))}
.cta{margin-top:calc(23*var(--t));position:relative;width:calc(190*var(--t));height:calc(41*var(--t));
     display:flex;align-items:center;justify-content:center;text-decoration:none}
.cta-glass{position:absolute;inset:0;background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(calc(12*var(--t)));backdrop-filter:blur(calc(12*var(--t)));
  clip-path:polygon(calc(3*var(--t)) 0, calc(100% - 10*var(--t)) 0, 100% calc(10*var(--t)),
                    100% calc(100% - 3*var(--t)), calc(100% - 3*var(--t)) 100%,
                    calc(10*var(--t)) 100%, 0 calc(100% - 10*var(--t)), 0 calc(3*var(--t)));
  transition:background .3s ease}
.cta:hover .cta-glass{background:rgba(255,255,255,.075)}
.cta-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cta-edge path{fill:none;stroke:rgba(255,255,255,.085);stroke-width:1;transition:stroke .3s ease}
.cta:hover .cta-edge path{stroke:rgba(255,255,255,.2)}
.cta-in{position:relative;display:flex;align-items:center}
.cta .ico{width:calc(7*var(--t));height:calc(11*var(--t));fill:#f2f6ff;flex:none}
.cta .t{margin-left:calc(6*var(--t));color:#e9eef7;letter-spacing:calc(.55*var(--t))}

/* ---------- dock ---------- */
.dock{position:absolute;left:0;right:0;bottom:0;height:calc(47*var(--t));--nudge:calc(1.6*var(--t))}
.dock .rule{position:absolute;left:0;right:0;top:0;height:var(--hair);background:var(--line)}
.dock .div{position:absolute;top:0;bottom:0;width:var(--hair);background:rgba(255,255,255,.21)}
.dock .div-l{left:calc(116*var(--t))}
.dock .div-r{right:calc(139*var(--t))}
.dock a,.dock button{display:flex;align-items:center;text-decoration:none;background:none;
      border:0;padding:0;cursor:pointer;color:rgba(255,255,255,.82);transition:color .3s ease}
.dock a:hover,.dock button:hover{color:#fff}
.watch{position:absolute;left:calc(26*var(--t));top:0;bottom:0}
.watch .ico{width:calc(14*var(--t));height:calc(11*var(--t));flex:none;fill:currentColor;stroke:currentColor}
.watch span{margin-left:calc(10*var(--t));letter-spacing:calc(.02*var(--t))}
.scroll{position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:0}
.scroll .ico{width:calc(5*var(--t));height:calc(7*var(--t));flex:none;fill:currentColor;position:relative;top:calc(-1*var(--t))}
.scroll span{margin-left:calc(10*var(--t));letter-spacing:calc(-.23*var(--t))}
.talk{position:absolute;right:calc(24*var(--t));top:0;bottom:0}
.talk span{letter-spacing:calc(.12*var(--t))}
.talk .ico{width:calc(16*var(--t));height:calc(15*var(--t));margin-left:calc(11*var(--t));
           flex:none;fill:none;stroke:currentColor;stroke-width:1.6}

/* ================= ENTRANCE =================
   One sequence, once, on load. The photograph is the stage and never moves.
   Four behaviours only:
     DRAW    the dock rule scales from its anchor
     MASK    wordmark and headline rise out of an overflow mask
     DECODE  every micro-label resolves with the site's own effect (JS)
     SETTLE  supporting copy, pills and controls arrive on a 7-unit lift

   Timeline (ms from first paint):
     160  wordmark masked rise
     300  ENTER pill, 360 MENU pill
     340  nav group, labels decoding from 360
     420  headline line 1 masked rise, 520 line 2
     600  index rail, 640 active marker, labels decoding from 660
     700  paragraph settles
     860  CTA settles, label decodes at 900
     920  dock rule draws, cells and labels follow to 1120
     ~1520 last motion ends. Nothing animates afterwards. */
:root{
  --e-mask: cubic-bezier(.16,1,.3,1);    /* expo-out: long, confident tail */
  --e-line: cubic-bezier(.65,0,.35,1);   /* a drawn stroke, not a fade */
  --e-soft: cubic-bezier(.22,.61,.36,1); /* power2-out for small settles */
}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drawY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes maskUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes settle{from{opacity:0;transform:translateY(calc(7*var(--t)))}to{opacity:1;transform:none}}
@keyframes markIn{from{transform:translateY(-50%) scaleX(0)}to{transform:translateY(-50%) scaleX(1)}}

/* MASK — the wordmark rises inside its own box, no wrapper needed */
.anim .logo{overflow:hidden}
.anim .logo svg{animation:maskUp .8s var(--e-mask) .16s both}

/* SETTLE — masthead */
.anim .enter{animation:settle .56s var(--e-soft) .3s both}
.anim .menu{animation:settle .56s var(--e-soft) .36s both}
.anim .links{animation:fadeIn .4s linear .34s both}

/* MASK — the headline is the one moment that carries weight */
.headline .hrow{display:block;overflow:hidden}
.headline .hrise{display:block}
.anim .headline .hrise{animation:maskUp .9s var(--e-mask) both}
.anim .headline .hrow:first-child .hrise{animation-delay:.42s}
.anim .headline .hrow+.hrow .hrise{animation-delay:.52s}

/* the rail arrives as one group; its stagger is carried by the decoding labels */
.anim .index{animation:fadeIn .45s linear .6s both}
.anim .index .on::before{animation:markIn .42s var(--e-soft) .64s both}

.anim .blurb{animation:settle .72s var(--e-soft) .7s both}
.anim .cta{animation:settle .62s var(--e-soft) .86s both}

/* DRAW + SETTLE — the dock closes the composition */
.anim .dock .rule{transform-origin:left center;animation:drawX .52s var(--e-line) .92s both}
.anim .dock .div{transform-origin:center top;animation:drawY .36s var(--e-line) 1.06s both}
.anim .watch{animation:settle .52s var(--e-soft) .96s both}
@keyframes settleC{from{opacity:0;transform:translate(-50%,calc(7*var(--t)))}
                   to{opacity:1;transform:translateX(-50%)}}
.anim .scroll{animation:settleC .52s var(--e-soft) 1.02s both}
.anim .talk{animation:settle .52s var(--e-soft) 1.08s both}

/* ---------- a11y ---------- */
a:focus-visible,button:focus-visible{outline:calc(1.5*var(--t)) solid #e8d1cb;outline-offset:calc(3*var(--t))}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* =================== GREEN EYES FILM ADDITIONS ===================
   Sits between the template's base rules and its responsive rules, so the
   template's breakpoints still adapt these components. */
:root{
  --dawn:#f1d3bf;           /* sunrise peach; replaces the template cream (tune to the chosen still) */
  --cream:var(--dawn);
  --vx:-50%;                /* horizontal anchor of the footage (template used -45.5% for its arch) */
  /* section panels (spec 2026-10-03 §4): a lighter slate glass for the brighter scene. Its opacity is bound by
     WCAG AA: every text token below keeps 4.5:1 even with white sky behind the glass (test/contrast.test.mjs). */
  --glass:rgba(26,38,56,.78);
  --fg:#fff;
  --body:rgba(238,242,248,.92);
  --muted:rgba(232,238,248,.84);
  --err:#ffc7bd;
}
body{background:#070b16}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:calc(1.5*var(--t)) solid var(--dawn);outline-offset:calc(3*var(--t))}

/* ---------- the scrolling page (spec 2026-10-03 §3) ----------
   The document scrolls. .stage is a fixed backdrop behind the sections and .frame (logo, masthead, rail, dock)
   is fixed above them; neither catches the pointer except through the chrome's own controls. */
html,body{height:auto}
html{min-height:100%;scrollbar-gutter:stable}
body{overflow-x:hidden;overflow-y:auto}
.stage{z-index:0;pointer-events:none}
.frame{position:fixed;z-index:3;pointer-events:none}
/* The dock is a full-width strip and the masthead a wide box, but only their links and buttons take the pointer: a control
   scrolled under the gaps stays clickable. The logo and rail hug their controls, and the open mobile menu panel is solid. */
.frame .logo,.frame .index,.frame .navset{pointer-events:auto}
.frame .masthead,.frame .dock{pointer-events:none}
.frame .masthead a,.frame .masthead button,.frame .dock a,.frame .dock button{pointer-events:auto}
main{position:relative;z-index:2;display:block}

/* the scene: the poster (scene.webp, or the section's own frame on a deep link) under the flight canvas */
.bg{left:-12vw;right:-12vw;transform:scale(1.046);background-image:var(--poster,url(/assets/img/scene.webp))}
@media (max-width:700px){.bg{background-image:var(--poster-m,url(/assets/img/scene-mobile.webp))}}
@media (min-width:701px) and (min-resolution:1.5dppx),(min-width:1746px),(min-width:701px) and (min-height:983px){.bg{background-image:var(--poster-4k,url(/assets/img/scene-4k.webp))}}
/* the canvas is boxed like the video it replaced (template-base.css:36-41): a 16:9 box covering the stage, the same
   --vx anchor and 1.1 scale. It fades in over the poster once site.js has drawn the first frame. */
.bg canvas.flight{position:absolute;left:50%;top:50%;display:block;
  width:max(100vw, 177.78vh);height:max(100vh, 56.25vw);
  transform:translate(var(--vx),-50%) scale(1.1);opacity:0;transition:opacity .35s ease}
.bg canvas.flight.on{opacity:1}
.shift{position:absolute;inset:0}   /* wrapper only: the scene never shifts */

/* legibility over the scenery: a soft scrim under the dock, hero copy and left rail (on the backdrop),
   plus a faint text shadow on the small labels */
.stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse calc(300*var(--t)) calc(120*var(--t)) at 50% calc(100% - 215*var(--t)),rgba(5,9,18,.42),transparent),
    linear-gradient(to top,rgba(5,9,18,.66) 0,rgba(5,9,18,.40) 14%,rgba(5,9,18,.16) 30%,transparent 46%),
    linear-gradient(to right,rgba(5,9,18,.34) 0,rgba(5,9,18,.14) 9%,transparent 20%)}
/* the top scrim lies over the scrolling sections and under the chrome, so the masthead reads over bright sky;
   it deepens once the page leaves the hero (as on greeneyesfilm.com) */
.frame::before,.frame::after{content:"";position:fixed;left:0;right:0;top:0;height:calc(150*var(--t));z-index:-1;pointer-events:none}
.frame::before{background:linear-gradient(rgba(5,9,18,.42),transparent)}
.frame::after{background:linear-gradient(rgba(5,9,18,.62),rgba(5,9,18,.36) 55%,transparent);opacity:0;transition:opacity .45s ease}
html:not([data-section="home"]) .frame::after{opacity:1}
@media (prefers-reduced-motion:reduce){.bg canvas.flight,.frame::after{transition:none}}
.blurb{color:rgba(232,238,250,.88);text-shadow:0 0 calc(9*var(--t)) rgba(5,9,18,.6),0 calc(1*var(--t)) calc(2*var(--t)) rgba(5,9,18,.45)}
.index a{color:rgba(232,238,250,.66);text-shadow:0 0 calc(7*var(--t)) rgba(5,9,18,.7),0 0 calc(2*var(--t)) rgba(5,9,18,.5)}
.index .on a{color:#e6eaf5}
.dock a,.dock button{text-shadow:0 0 calc(7*var(--t)) rgba(5,9,18,.55)}

.menu{background:rgba(241,211,191,.86);clip-path:polygon(0 0,calc(100% - 15*var(--t)) 0,100% calc(15*var(--t)),100% 100%,calc(15*var(--t)) 100%,0 calc(100% - 15*var(--t)))}
.menu:hover{background:rgba(241,211,191,.93)}


/* Two-line text wordmark uses the site's regular Inter face; the subtitle stays small and light. */
.logo{top:calc(13*var(--t));width:max-content;height:auto;color:#fff;text-decoration:none;text-transform:none}
.logo-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:calc(4*var(--t));font-weight:400;white-space:nowrap}
.logo-name{font-size:calc(26*var(--t));line-height:1;letter-spacing:calc(-.7*var(--t))}
.logo-subtitle{font-size:calc(9*var(--t));line-height:1.2;letter-spacing:calc(1.1*var(--t))}
.anim .logo-wordmark{animation:maskUp .8s var(--e-mask) .16s both}

/* masthead: labels longer than the template's, so pills size to content */
.enter{width:auto;padding:0 calc(19*var(--t)) 0 calc(21*var(--t))}
.cta{width:auto;padding:0 calc(22*var(--t))}
.soc-set{display:inline-flex;align-items:center;gap:calc(12*var(--t))}
.links .soc-set{margin-left:calc(4*var(--t))}
.soc{display:inline-flex;color:#e3e8f2;opacity:.94;transition:opacity .25s ease,color .25s ease}
.soc:hover{opacity:1;color:#fff}
.soc svg{width:calc(13*var(--t));height:calc(13*var(--t));display:block}

/* dock: WATCH REEL replaces AUDIO */
.dock .div-l{left:calc(132*var(--t))}
.watch .ico{width:calc(10*var(--t));height:calc(11*var(--t));stroke:none}

/* ---------- sections (spec 2026-10-03 §3–§4) ---------- */
.sec{position:relative;min-height:100vh;min-height:100svh}
/* Home is at least one screen (that .sec min-height) and its hero sits where the template put it: the frame inset plus the template's own offset */
.sec-home .hero{left:calc(30*var(--u));right:calc(30*var(--u));bottom:calc(31*var(--u) + max(7.98% - 4.87*var(--u), 59*var(--t)))}
.headline{outline:none}   /* focused by script (tabindex=-1) when a link lands on Home */
/* About and Contact: the glass panel on the right, between the masthead and the dock */
.sec-panel{display:flex;align-items:center;justify-content:flex-end;
  padding:calc(30*var(--u) + 66*var(--t)) calc(30*var(--u) + 22*var(--t)) calc(31*var(--u) + 64*var(--t))}
.panel{position:relative;width:min(46vw, calc(560*var(--t)));--c:calc(18*var(--t))}
/* Packages: wider and centred clear of the rail, so the three tiers can sit side by side */
.sec-packages{justify-content:center;padding-left:calc(30*var(--u) + 100*var(--t))}
.sec-packages .panel{width:min(100%, calc(1060*var(--t)))}
.panel-glass{position:absolute;inset:0;background:var(--glass);
  -webkit-backdrop-filter:blur(calc(16*var(--t)));backdrop-filter:blur(calc(16*var(--t)));
  clip-path:polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)))}
.pl{position:absolute;background:var(--line)}
.pl-t{top:0;left:0;right:var(--c);height:var(--hair)}
.pl-r{right:0;top:var(--c);bottom:0;width:var(--hair)}
.pl-b{bottom:0;left:var(--c);right:0;height:var(--hair)}
.pl-l{left:0;top:0;bottom:var(--c);width:var(--hair)}
.pc{position:absolute;width:var(--c);height:var(--c)}
.pc-tr{right:0;top:0;background:linear-gradient(to bottom left,transparent calc(50% - .65px),var(--line) calc(50% - .65px),var(--line) calc(50% + .65px),transparent calc(50% + .65px))}
.pc-bl{left:0;bottom:0;background:linear-gradient(to bottom left,transparent calc(50% - .65px),var(--line) calc(50% - .65px),var(--line) calc(50% + .65px),transparent calc(50% + .65px))}
.panel-body{position:relative;padding:calc(30*var(--t)) calc(34*var(--t)) calc(34*var(--t))}
.p-kicker{margin:0 0 calc(14*var(--t));color:var(--muted);letter-spacing:calc(1.3*var(--t))}
.p-title{margin:0 0 calc(18*var(--t));font-weight:700;font-size:calc(24*var(--t));line-height:calc(26*var(--t));
  letter-spacing:calc(1.2*var(--t));text-transform:uppercase;color:var(--fg);outline:none}
.p-title .hrow{display:block;overflow:hidden}
.p-title .hrise{display:block}
.p-body{margin:0 0 calc(14*var(--t));font-size:calc(12.2*var(--t));line-height:calc(20.5*var(--t));color:var(--body)}
.p-list{list-style:none;margin:0 0 calc(16*var(--t));padding:0}
.p-list li{position:relative;padding-left:calc(16*var(--t));margin:0 0 calc(8*var(--t));
  font-size:calc(11.6*var(--t));line-height:calc(19*var(--t));color:var(--body)}
.p-list li::before{content:"";position:absolute;left:0;top:calc(7*var(--t));width:calc(5*var(--t));height:calc(6*var(--t));background:var(--dawn)}
.p-list strong{color:var(--fg);font-weight:700}
.p-actions{display:flex;align-items:center;gap:calc(20*var(--t));flex-wrap:wrap;margin:calc(8*var(--t)) 0 calc(18*var(--t))}
.p-actions .cta,.tier .cta{margin-top:0}
.panel .cta{width:fit-content}   /* block-level flex would stretch the chamfered button to the card width */
button.cta{border:0;background:none;cursor:pointer;color:inherit}   /* drop the browser's default button chrome */
.p-foot{margin:calc(10*var(--t)) 0 0;font-size:calc(10*var(--t));color:var(--muted)}
.p-sub{margin:calc(6*var(--t)) 0 calc(6*var(--t));color:var(--fg);font-weight:700;font-size:calc(14*var(--t));
  letter-spacing:calc(.8*var(--t));text-transform:uppercase}
.p-note{font-size:calc(10.5*var(--t));color:var(--muted);margin:0 0 calc(10*var(--t))}

/* packages */
.tiers{display:grid;gap:calc(14*var(--t));margin:0 0 calc(24*var(--t))}
.tier{position:relative;padding:calc(18*var(--t)) calc(18*var(--t)) calc(20*var(--t));
  border:var(--hair) solid var(--line);background:rgba(255,255,255,.02)}
.tier-name{margin:0 0 calc(10*var(--t));font-size:calc(18*var(--t));line-height:1.2;color:var(--dawn);letter-spacing:calc(1.3*var(--t))}
.svcs{list-style:none;margin:0 0 calc(14*var(--t));padding:0;border-top:var(--hair) solid var(--line)}
.svc{display:flex;align-items:center;gap:calc(12*var(--t));padding:calc(12*var(--t)) 0;border-bottom:var(--hair) solid var(--line)}
.svc-name{flex:1;font-size:calc(12.2*var(--t));color:var(--fg)}
.svc-bill{color:var(--muted)}
.svc-quote{color:var(--dawn);text-decoration:none;transition:color .25s ease}
.svc-quote:hover{color:#fff}

/* contact */
.contact-grid{display:grid;gap:calc(22*var(--t))}
.cform{display:grid;gap:calc(12*var(--t))}
.fld{display:grid;gap:calc(6*var(--t));margin:0;padding:0;border:0;min-width:0}
.fld label,.fld legend{color:var(--muted);letter-spacing:calc(1*var(--t));padding:0}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{
  width:100%;font-family:inherit;font-size:calc(12.5*var(--t));color:#fff;background:rgba(255,255,255,.04);
  border:0;border-bottom:var(--hair) solid rgba(255,255,255,.28);border-radius:0;
  padding:calc(8*var(--t)) calc(10*var(--t));transition:border-color .25s ease, background .25s ease}
.cform select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#e3e8f2 50%),linear-gradient(-45deg,transparent 50%,#e3e8f2 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.cform select option{background:#0b1020;color:#fff}
.cform textarea{resize:vertical;min-height:calc(84*var(--t))}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-bottom-color:var(--dawn);background:rgba(255,255,255,.07)}
.cform [aria-invalid="true"]{border-bottom-color:#ff9b8a}
.ferr{margin:0;font-size:calc(10.5*var(--t));color:var(--err)}
.ferr:empty{display:none}
.picks{display:flex;gap:calc(8*var(--t));flex-wrap:wrap}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;height:calc(30*var(--t));padding:0 calc(14*var(--t));
  border:var(--hair) solid rgba(255,255,255,.22);color:var(--muted);transition:background .25s ease,color .25s ease,border-color .25s ease}
.pick input:checked+span{background:var(--dawn);border-color:var(--dawn);color:var(--ink)}
.pick input:focus-visible+span{outline:calc(1.5*var(--t)) solid var(--dawn);outline-offset:calc(2*var(--t))}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .cta{justify-self:start;margin-top:calc(6*var(--t));cursor:pointer;border:0;background:none}
.cform .cta[disabled]{opacity:.6;cursor:progress}
.form-status{margin:0;font-size:calc(11*var(--t));line-height:calc(17*var(--t));color:var(--err)}
.form-status:empty{display:none}
.form-note{margin:0;font-size:calc(11*var(--t));line-height:1.55;color:var(--body)}
.copy-enquiry{justify-self:start;border:0;border-bottom:1px solid currentColor;padding:6px 0;background:none;color:var(--body);cursor:pointer}
.cform[data-contact-mode="email"] .form-status{color:var(--body)}
.form-status textarea{display:block;width:100%;margin-top:10px}
.form-done{margin:0;font-size:calc(14*var(--t));line-height:calc(22*var(--t));color:#fff;outline:none}
.cdirect{display:grid;gap:calc(8*var(--t));align-content:start;font-size:calc(12*var(--t));color:var(--body)}
.cdirect a{color:#fff;text-decoration:none;justify-self:start;border-bottom:var(--hair) solid rgba(255,255,255,.25)}
.cdirect a:hover{border-bottom-color:var(--dawn)}
.cdirect .soc{border:0}

/* reel overlay */
.reel{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,13,.94);opacity:0;transition:opacity .35s ease}
.reel[hidden]{display:none}
.reel.open{opacity:1}
.reel-video{width:min(92vw, 150vh);max-height:86vh;aspect-ratio:16/9;background:#000;display:block}
.reel-close{position:absolute;top:calc(22*var(--t));right:calc(26*var(--t));display:flex;align-items:center;
  gap:calc(8*var(--t));background:none;border:0;cursor:pointer;color:rgba(255,255,255,.85);padding:calc(6*var(--t))}
.reel-close:hover{color:#fff}
.reel-close .ico{width:calc(10*var(--t));height:calc(10*var(--t));fill:none;stroke:currentColor;stroke-width:1.6}

/* ---------- tablet ----------
   The desktop architecture is one uniform scale of the 1280x800 canvas:
   u = min(100vw/1280, 100dvh/800). It holds while that scale is generous —
   at 1366x1024 (12.9" landscape) it is 1.07, at 1180x820 it is 0.92. It
   fails at u < 0.9, where the 10px labels drop under 9px and the body copy
   under 10px; that is 1152px wide. Below that the type unit is pinned and
   the boxes carrying type size to their content, so the composition stops
   being a shrinking miniature and becomes a layout at its own scale, while
   the frame keeps scaling with the viewport. At the boundary both units are
   0.9 and every content-sized box resolves to its desktop width, so the
   architectures meet without a visible step. */
@media (max-width: 1152px){
  :root{
    --u: clamp(.8px, min(100vw / 1280, 100vh / 800), 1.1px);
    --u: clamp(.8px, min(100vw / 1280, 100dvh / 800), 1.1px);
    /* type grows fluidly as the viewport narrows: 0.9 at the breakpoint,
       matching the desktop scale exactly, up to 1.12 where the phone block
       takes over at the same value — both boundaries are stepless */
    --t: max(var(--u), clamp(.9px, calc(.9px + (1152px - 100vw) * .00042), 1.12px));
  }
  /* pills and the CTA size to their label instead of to a fixed canvas width;
     the paddings are the reference's own internal measurements, so at the
     breakpoint these resolve to 87/90/190 units exactly as before */
  .enter{width:auto;padding:0 calc(19*var(--t)) 0 calc(21*var(--t))}
  .menu{width:auto;padding:0 calc(24*var(--t)) 0 calc(21*var(--t))}
  .cta{width:auto;padding:0 calc(19*var(--t))}
  /* the dock's cells become content-aware; the dividers become their edges,
     landing on the same 116/139 offsets at the breakpoint */
  .dock{display:flex;justify-content:space-between;align-items:stretch}
  .dock .div{display:none}
  .watch,.talk{position:static;height:auto}
  .watch{padding:0 min(calc(20*var(--t)),5vw) 0 min(calc(26*var(--t)),6vw);
         border-right:var(--hair) solid rgba(255,255,255,.21)}
  .talk{padding:0 min(calc(24*var(--t)),6vw) 0 min(calc(20*var(--t)),5vw);
        border-left:var(--hair) solid rgba(255,255,255,.21)}
  /* touch targets grow inside the existing boxes — nothing moves */
  .links{gap:calc(17*var(--t));align-self:stretch}
  .links a{display:flex;align-items:center;align-self:stretch}
  .index a{padding:calc(7*var(--t)) 0}
}

/* The hero image is 16:10. Once the viewport is narrower than ~6/5 the frame
   crops the mountains away and the index rail loses the dark ground it reads
   against, so the rail moves up into the sky band and the hero takes the full
   width below it. Above that ratio the rail keeps its centred desktop
   position and the hero reserves its column. */
@media (max-width: 1152px) and (min-aspect-ratio: 6/5){
  .hero{padding-inline:calc(150*var(--t))}
}
@media (max-width: 1152px) and (max-aspect-ratio: 6/5){
  .index{top:32%}
  .hero{padding-inline:calc(22*var(--t))}
}

/* ---------- navigation collapse ----------
   The bar holds logo + links + both pills while the gap between the wordmark
   and the first link stays above an eighth of the frame width. With the type
   growing as the viewport narrows that gap closes at ~830px, so from there
   the same nav set becomes a panel hung off the MENU pill — the site's own
   dots icon is the burger. No markup is duplicated: .navset is
   display:contents in the bar and a flex panel here. */
@media (max-width: 830px){
  .navset{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:calc(52*var(--t));right:0;min-width:calc(196*var(--t));
    padding:calc(16*var(--t)) calc(20*var(--t)) calc(18*var(--t));
    gap:calc(4*var(--t));
    background:rgba(11,16,26,.74);
    -webkit-backdrop-filter:blur(calc(16*var(--t)));backdrop-filter:blur(calc(16*var(--t)));
    clip-path:polygon(0 0, calc(100% - 15*var(--t)) 0, 100% calc(15*var(--t)), 100% 100%,
                      calc(15*var(--t)) 100%, 0 calc(100% - 15*var(--t)));
    opacity:0;visibility:hidden;transform:translateY(calc(-6*var(--t)));
    transition:opacity .34s ease, transform .34s cubic-bezier(.22,.61,.36,1), visibility .34s;
    z-index:6;
  }
  .nav-open .navset{opacity:1;visibility:visible;transform:none}
  .links{flex-direction:column;align-items:stretch;gap:0;margin-right:0;align-self:auto}
  .links a{padding:calc(9*var(--t)) 0;justify-content:flex-start}
  .navset .enter{width:auto;align-self:stretch;justify-content:flex-start;
    margin-top:calc(10*var(--t));height:calc(38*var(--t));
    padding:0 calc(16*var(--t));background:rgba(255,250,246,.07)}
}


/* ---------- mobile ----------
   The tablet architecture holds further than a conventional phone breakpoint
   would suggest. Measured down the range: the masthead still has 189px
   between wordmark and menu at 560, the headline keeps its two hand-set
   lines to 487, the dock keeps 200px of slack to 400. What fails first is
   the paragraph — its four hand-set lines need 452px of measure, so at
   549px the block breaks into five ragged lines with an orphan. That is the
   real breaking point, so mobile begins at 548.

   The architecture here: the hand-set breaks are released so the copy finds
   its own measure, the wordmark becomes fluid so it never crowds the menu,
   the frame margins tighten proportionally, the rail climbs clear of the
   subject as the frame crops to it, and the type scale simply carries over
   from the tablet boundary rather than shrinking — a phone is held closer,
   not read at arm's length. */
@media (max-width: 548px){
  :root{
    --u: clamp(.62px, min(100vw / 500, 100vh / 820), 1.1px);
    --u: clamp(.62px, min(100vw / 500, 100dvh / 820), 1.1px);
    /* 1.12 at the breakpoint, matching tablet exactly, easing to a 1.06 floor */
    --t: clamp(1.06px, calc(100vw / 489), 1.12px);
  }
  .frame{left:calc(22*var(--u));right:calc(22*var(--u));
         top:calc(22*var(--u));bottom:calc(22*var(--u))}
  /* the wordmark keeps its artwork and proportion, and yields width only
     when the bar actually needs it */
  .logo{left:calc(16*var(--t));top:calc(22*var(--t));
        width:min(calc(163*var(--t)), 42vw);height:auto;aspect-ratio:163 / 19}
  .masthead{right:calc(9*var(--t));top:calc(12*var(--t))}
  /* the frame now crops to the subject itself, so the rail stops floating
     beside the composition and docks under the wordmark, in the sky band —
     the one region that stays dark at every phone crop. Its rhythm tightens
     just enough to clear the stone, and the inactive items carry slightly
     more weight to hold up against a brighter backdrop. */
  .index{top:calc(70*var(--t));transform:none}
  .index li{height:calc(24*var(--t))}
  .index a{color:rgba(232,238,250,.42)}
  .hero{bottom:max(9%, calc(59*var(--t)));padding-inline:calc(18*var(--t))}
  .headline{text-wrap:balance}
  .blurb{max-width:calc(400*var(--t))}
  .blurb br{display:none}
  /* the headline wraps freely here, so it lifts as one block instead of per line */
  .headline .hrow{display:inline;overflow:visible}
  .headline .hrise{display:inline}
  .anim .headline .hrise{animation:none}
  .anim .headline{animation:settle .8s var(--e-mask) .42s both}
  .hero .headline{transition:opacity .4s ease}
  .swapping .headline{opacity:0}
}
/* ---------- narrow mobile ----------
   Measured: the dock's three cells hold one row down to 365px, where the
   centre cue meets the contact control. Below that the cue takes a row of
   its own — the two controls split the row above it, keeping the same
   hairline language — rather than the labels being shrunk or dropped. */
@media (max-width: 370px){
  .dock{height:auto;flex-wrap:wrap}
  .watch,.talk{flex:1 1 0;justify-content:center;height:calc(44*var(--t))}
  .scroll{position:static;transform:none;order:1;flex:1 0 100%;
          justify-content:center;height:calc(40*var(--t));
          border-top:var(--hair) solid rgba(255,255,255,.13)}
  .anim .scroll{animation-name:settle}
  .hero{bottom:calc(96*var(--t))}
}

/* last resort only: on a screen too short to hold the whole composition the
   supporting paragraph steps aside rather than the layout clipping */
@media (max-height: 560px),
       (max-width: 370px) and (max-height: 640px){ .blurb{display:none} }


/* =================== GREEN EYES FILM RESPONSIVE =================== */
/* Portrait phones: fit the complete Zeppelin into a shallower scenic window, as the live reference does.
   The sky/water fade continues the dawn behind the copy; poster and canvas share exactly the same box. */
@media (max-width:700px) and (orientation:portrait){
  .stage{background:linear-gradient(#9baeba 0%,#adb8bd 28%,#526776 58%,#203747 100%)}
  .bg{inset:8svh 0 auto;height:min(78svh,110vw);transform:none!important;
    background-position:50% 50%;
    -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 78%,transparent);
    mask-image:linear-gradient(transparent,#000 10%,#000 78%,transparent)}
  .bg canvas.flight{inset:0;width:100%;height:100%;transform:none}
}
@media (max-width:370px) and (max-height:650px) and (orientation:portrait){
  .bg{top:2svh;height:90vw}
}
@media (max-width: 1152px){
  .panel{width:min(56vw, calc(520*var(--t)))}
  /* the rail steps aside while Packages is the active section, so the three tiers keep their columns down to 830px */
  .sec-packages{padding-left:calc(30*var(--u) + 22*var(--t))}
  .sec-packages .panel-body{padding-left:calc(26*var(--t));padding-right:calc(26*var(--t))}
  .index{transition:opacity .4s ease, visibility .4s}
  html[data-section="packages"] .index{opacity:0;visibility:hidden}
}
/* our tagline is longer than the template's; keep ~640px for the two hand-set rows */
@media (max-width: 1152px) and (min-aspect-ratio: 6/5){
  .hero{padding-inline:clamp(calc(22*var(--t)), calc((100vw - 640px) / 2), calc(150*var(--t)))}
}
/* Packages: the three tiers side by side from 830px (spec 2026-10-03 §4), stacked below that */
@media (min-width: 830px){
  .sec-packages .tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sec-packages .tier{padding-left:calc(14*var(--t));padding-right:calc(14*var(--t))}
  .sec-packages .tier .cta{padding:0 calc(14*var(--t))}
}
/* narrow screens: the sections become full-width glass sheets inside the frame; past the hero the rail steps
   aside and the MENU pill carries the navigation, as it did while a panel was open */
@media (max-width: 830px){
  .sec-panel{padding:calc(30*var(--u) + 60*var(--t)) calc(30*var(--u) + 14*var(--t)) calc(31*var(--u) + 56*var(--t))}
  .panel,.sec-packages .panel{width:100%}
  html:not([data-section="home"]) .index{opacity:0;visibility:hidden}
}
@media (max-width: 548px){
  .logo{top:calc(14*var(--t));width:max-content;height:auto;aspect-ratio:auto}
  .logo-name{font-size:clamp(20px,5.8vw,calc(24*var(--t)))}
  .sec-home .hero{left:calc(22*var(--u));right:calc(22*var(--u));bottom:calc(22*var(--u) + max(9% - 3.96*var(--u), 59*var(--t)))}
  .sec-panel{padding:calc(22*var(--u) + 58*var(--t)) calc(22*var(--u) + 8*var(--t)) calc(22*var(--u) + 52*var(--t))}
  .panel{--c:calc(14*var(--t))}
  .panel-body,.sec-packages .panel-body{padding:calc(26*var(--t)) calc(20*var(--t))}
}
@media (max-width: 370px){
  /* Keep the complete subtitle clear of the menu on 320px phones. */
  .logo-subtitle{letter-spacing:calc(.5*var(--t))}
  .sec-home .hero{bottom:calc(22*var(--u) + 96*var(--t))}
  .sec-panel{padding-bottom:calc(22*var(--u) + 92*var(--t))}
}

/* Rounded oval-style section borders. */
.sec-panel .panel { border-radius: 12% / 72px; }
.sec-panel .panel-glass { clip-path:none; border-radius:inherit; border:1px solid rgba(241,211,191,.3); }
.sec-panel .pl,.sec-panel .pc { display:none; }
.sec-panel .panel-body { padding-top:48px; padding-bottom:48px; }
.sec-packages .tier { border-radius: 18% / 44px; padding:30px 26px; }
@media(max-width:600px){
.sec-panel .panel { border-radius: 12% / 48px; }
.sec-panel .panel-body { padding:36px 24px; }
.sec-packages .tier { border-radius:16% / 36px; padding:28px 20px; }
}