/* ═══════════════════════════════════════════════════════════════
   MERIDIAM MARITIME — draft v5
   Positioning: trading house, not shipping company.
   Navy sampled from the wordmark (#09284D). Monochrome by design.
   Signature: the shareholding bar — the capital structure IS the
   value proposition, so it is shown rather than described.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --navy:#09284D; --navy-900:#061A33; --navy-800:#0B2544; --navy-700:#123566; --navy-600:#1A467F;
  --paper:#FFFFFF; --paper-2:#F4F6F9; --paper-3:#E9EEF4;
  --ink:#0A1F3A; --ink-2:#4C617C; --ink-3:#6B7F98;
  --ink-inv:#B6C6DA; --ink-inv-2:#7B93B0;
  --rule:#DBE2EB; --rule-dark:#1A3557; --steel:#8FAECF;
  /* Arial. It ships on Windows, macOS, iOS and Android, so the page looks the
     same almost everywhere and downloads no font files. */
  --f-sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --gutter:clamp(1.25rem,4.5vw,4.5rem); --max:1260px; --pad:clamp(3.5rem,6.5vw,6rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);
  font-size:clamp(15px,.5vw + 13.8px,17px);line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.sect{padding-block:var(--pad)}
/* Matches the pinned bar's collapsed height; JS refines it from the real
   measurement once the bar is actually compact. */
section[id]{scroll-margin-top:var(--topbar-compact-h,4rem)}

h1,h2,h3,h4{font-weight:600;letter-spacing:-.012em;margin:0;line-height:1.12}
h1{font-size:clamp(2.6rem,6vw,4.8rem);letter-spacing:-.032em;line-height:1}
h2{font-size:clamp(1.6rem,2.5vw,2.2rem)}
h3{font-size:1.15rem}
h4{font-size:1rem}
p{margin:0 0 1rem}
.lede{font-size:clamp(1rem,.7vw + .84rem,1.14rem);color:var(--ink-2);max-width:62ch}
.eyebrow{font-size:.68rem;font-weight:500;letter-spacing:.27em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1.1rem}
.sect-head{max-width:64ch;margin-bottom:2.6rem}
.sect-head h2{margin-bottom:.55em}
.btn{display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding:.95rem 1.9rem;border:1px solid currentColor;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:#fff;border-color:#fff;color:var(--navy)}

/* Film opener ------------------------------------------------ */
/* Poster as background so it paints immediately, and it stays the backdrop
   for reduced-motion, no-JS and blocked-autoplay viewers. */
/* Every child here is absolutely positioned, so the section has no height of
   its own — it comes entirely from the 16:9 ratio. A browser without
   aspect-ratio (Safari 14 and earlier, so iOS 14 and the in-app browsers
   built on it) therefore collapsed the opener to nothing and dropped the
   viewer straight into the content. The padding keeps the same ratio there;
   it is a percentage of the width, so 56.25% is 9/16. */
.film{position:relative;overflow:hidden;background:#04101F url(./poster.jpg) center/cover no-repeat;
  width:100%;padding-top:56.25%}
@supports (aspect-ratio:16/9){
  .film{padding-top:0;aspect-ratio:16/9}
}
/* Deliberately never faded in from opacity:0. WebKit only autoplays a video
   it considers visible, and pauses one that stops being visible, so waiting
   for 'playing' before revealing it prevents the very playback it waits on -
   this is why the film was a still frame on some iPhones. No fade is needed
   anyway: the poster attribute is the same frame as the CSS background, so
   the handover to live footage is already seamless. */
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Shown only when autoplay was refused - iOS Low Power Mode blocks it even
   for muted inline video. A tap is a user gesture, which is always allowed. */
.film-play{position:absolute;left:50%;top:66%;z-index:3;transform:translate(-50%,-50%);
  display:none;place-items:center;width:74px;height:74px;padding:0;cursor:pointer;
  background:rgba(4,16,31,.45);border:1px solid rgba(255,255,255,.55);border-radius:50%;
  color:#fff;transition:background .2s,border-color .2s,transform .2s}
.film.needs-tap .film-play{display:grid}
.film-play:hover{background:rgba(4,16,31,.7);border-color:#fff;transform:translate(-50%,-50%) scale(1.06)}
.film-play svg{width:26px;height:26px;margin-left:4px;fill:currentColor}
/* The cue points down the page; with no film running it is misleading. */
.film.needs-tap .film-cue{display:none}
/* Top scrim keeps the white masthead legible over bright sky; bottom fade
   carries the film into the navy hero beneath it. */
.film::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,31,.78) 0%,rgba(4,16,31,.18) 24%,
    rgba(4,16,31,0) 46%,rgba(4,16,31,.55) 100%)}
.film-cue{position:absolute;left:50%;bottom:2.2rem;z-index:2;transform:translateX(-50%);
  width:26px;height:42px;border:1px solid rgba(255,255,255,.45);border-radius:13px}
.film-cue span{position:absolute;left:50%;top:9px;width:2px;height:7px;margin-left:-1px;
  background:#fff;border-radius:1px;animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:0;transform:translateY(0)}
  35%{opacity:1}70%{opacity:0;transform:translateY(12px)}}

@media (prefers-reduced-motion:reduce){.film-cue span{animation:none;opacity:.85}}

/* Used for one synchronous measurement at load; never painted. */
.no-transition *{transition:none!important}

/* Utility + header ------------------------------------------- */
/* Fixed so it travels with the scroll. Base state is the solid, logo-visible
   one, so a no-JS viewer gets a working header; JS adds .over-film on top. */
/* Fully opaque: at 94% the page ghosted through the bar, and the blur
   smeared it. Against the navy partnership section that also erased the
   boundary, so the section read as cut off rather than scrolling under. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--navy-900);border-bottom:1px solid var(--rule-dark);
  transition:background .35s ease,border-color .35s ease}
.topbar.over-film{background:transparent;border-bottom-color:transparent}
/* Utility strip collapses once the header is pinned, keeping it compact.
   grid-template-rows 1fr->0fr animates to the strip's real height, which
   max-height cannot do without hard-coding a guess. */
.util{background:transparent;border-bottom:1px solid var(--rule-dark);
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .35s ease,opacity .25s ease,border-color .35s ease}
.util>*{min-height:0;overflow:hidden}
.topbar.compact .util{grid-template-rows:0fr;opacity:0;border-bottom-color:transparent}
/* box-sizing:border-box makes padding a height floor, so it has to go too. */
.topbar.compact .util-in{padding-block:0}
.topbar.compact .masthead{padding-block:1rem}
.topbar.over-film .util{border-bottom-color:rgba(255,255,255,.15)}
.util-in{display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;justify-content:flex-end;padding-block:1rem;
  transition:padding-block .35s ease;
  font-size:.82rem;color:var(--ink-inv-2)}
.util-in a{text-decoration:none}
.util-in a:hover{color:#fff}
.util-in .live{color:var(--steel)}
header{position:relative}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.5rem}
.logo{height:34px;width:auto;transition:opacity .4s ease,transform .4s ease}
.topbar.over-film .logo{opacity:0;transform:translateY(-5px)}
.topbar.over-film .masthead>a{pointer-events:none}
.topbar.compact .logo{height:28px}
nav{display:flex;gap:1.7rem;font-size:.69rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase}
nav a{color:var(--ink-inv);text-decoration:none;padding-block:.3rem;border-bottom:1px solid transparent;transition:color .2s}
nav a:hover{color:#fff;border-bottom-color:var(--steel)}
.navtoggle{display:none;background:none;border:1px solid var(--rule-dark);color:#fff;
  font:500 .69rem/1 var(--f-sans);letter-spacing:.18em;text-transform:uppercase;padding:.7rem .95rem;cursor:pointer}
@media (max-width:1000px){
  nav{position:absolute;top:100%;right:var(--gutter);flex-direction:column;gap:0;background:var(--navy-800);
    border:1px solid var(--rule-dark);min-width:210px;display:none}
  nav.open{display:flex}
  nav a{padding:.85rem 1.2rem;border-bottom:1px solid var(--rule-dark)}
  nav a:last-child{border-bottom:0}
  .navtoggle{display:block}
}

/* Hero ------------------------------------------------------- */
.hero{position:relative;min-height:clamp(560px,88vh,880px);display:flex;align-items:flex-end;
  background:var(--navy-900);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0;overflow:hidden}
/* Video sits above the animated sea and fades in only once it is actually playing.
   If the file is missing, blocked, or the viewer prefers reduced motion, the sea stays. */
.sea{position:absolute;inset:0;
  background:linear-gradient(180deg,#04101F 0%,#061A33 42%,#0B2544 74%,#0D2C56 100%)}
/* Horizon haze */
.sea::before{content:"";position:absolute;left:0;right:0;top:36%;height:26%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(143,174,207,.16),transparent 70%)}
.grat{position:absolute;inset:0;width:100%;height:100%;opacity:.5;
  animation:gratdrift 120s linear infinite}
.grat line,.grat path{fill:none;stroke:#1B4680;stroke-width:1;vector-effect:non-scaling-stroke}
.grat .prime{stroke:var(--steel);stroke-width:1.2;opacity:.55}
/* Parallax swell — three bands, each tiling at half its own width */
.wave{position:absolute;left:0;width:200%;height:auto}
.w1{bottom:26%;opacity:.5;animation:tide 41s linear infinite}
.w2{bottom:12%;opacity:.7;animation:tide 29s linear infinite}
.w3{bottom:-2%;opacity:1;animation:tide 19s linear infinite}
@keyframes tide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes gratdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-60px,0,0)}}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,16,31,.9) 0%,rgba(6,26,51,.5) 38%,rgba(6,26,51,.97) 100%)}
@media (prefers-reduced-motion:reduce){.wave,.grat{animation:none}}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(3.5rem,6.5vw,6rem) clamp(3rem,6vw,5rem)}
.hero .eyebrow{color:var(--steel)}
.tagline{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:500;color:var(--steel);
  letter-spacing:-.01em;margin:0 0 1.3rem}
/* The statement — Element's move: one sentence that defines the business */
/* The measure, not the size, sets how this breaks. Arial's capitals are wider
   than the face this was drawn for, and at 26ch the sentence had spilled onto
   a sixth line; 30ch puts it back on five at every width. */
.hero h1{font-size:clamp(1.35rem,2.55vw,2.15rem);line-height:1.22;text-transform:uppercase;
  letter-spacing:-.005em;max-width:30ch;margin-bottom:1.9rem}
.hero-body{max-width:64ch;margin-bottom:2.4rem}
.hero-body p{color:var(--ink-inv);font-size:clamp(.95rem,.6vw + .82rem,1.04rem);margin-bottom:1.05rem}
.hero-body p:last-child{margin-bottom:0}
.hero .btn{color:#fff}

/* Stats ------------------------------------------------------ */
/* ── SIGNATURE: partnership structure ───────────────────────── */
/* Ranges ----------------------------------------------------- */
.rngs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:900px){.rngs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rngs{grid-template-columns:1fr}}
/* Seven ranges divide evenly into neither four columns nor two, and the odd
   cell left over shows the grid's own rule colour as a grey hole. Widening
   the last card closes the row at both counts; at one column it is a no-op. */
.rngs>:last-child{grid-column:span 2}

/* Trading ranges map ----------------------------------------- */
/* The panel holds the artwork's own sea colour, so the reserved row reads as
   part of the map while the animation is still on its way down. */
.trade-map{background:#D7D9DD;border:1px solid var(--rule-dark);margin-bottom:2.6rem}
/* width/height are on the tag as well, so the row is reserved before the
   1.3 MB animation arrives and nothing below it jumps. */
.tmap{display:block;width:100%;height:auto}
.rngc{background:var(--paper);padding:1.5rem 1.4rem}
.rngc h4{margin-bottom:.4rem}
.rngc p{font-family:var(--f-sans);font-size:.71rem;color:var(--ink-3);margin:0;line-height:1.55}
.plists{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);margin-top:3rem}
@media (max-width:760px){.plists{grid-template-columns:1fr;gap:2rem}}
.plist h4{margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid var(--rule)}
.plist ul{list-style:none;margin:0;padding:0;font-family:var(--f-sans);font-size:.81rem;color:var(--ink-2)}
.plist li{padding:.4rem 0;border-bottom:1px solid var(--paper-3)}

/* Positions -------------------------------------------------- */
.positions{background:var(--navy-900);color:#fff}
.positions .eyebrow{color:var(--steel)}
.positions .lede{color:var(--ink-inv)}
.board{border:1px solid var(--rule-dark);background:var(--navy-800);margin-top:2.4rem}
/* Five columns, the last one for the particulars download. It is a fixed
   width on purpose: the heading row and the vessel rows are separate grids,
   so an auto track sized itself to each one's own contents — the word
   DETAILS in the header, the PDF button in the rows — and the two sets of
   columns drifted apart. A fixed track makes both resolve identically. */
.prow{display:grid;grid-template-columns:minmax(0,1.6fr) .7fr 1.1fr 1fr 4.5rem;gap:1rem;align-items:baseline;
  padding:.9rem 1.2rem;border-bottom:1px solid var(--rule-dark);font-size:.8rem;color:var(--ink-inv)}
.prow:last-of-type{border-bottom:0}
.prow.h{font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-inv-2)}
.prow .v{font-weight:600;font-size:1rem;color:#fff}
.prow .flag{color:#fff;font-weight:500}
.prow .pdf{text-align:right}
.prow .pdf a{display:inline-block;color:#fff;text-decoration:none;
  font-size:.64rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  padding:.3rem .6rem;border:1px solid var(--rule-dark);transition:border-color .2s,background .2s}
.prow .pdf a:hover{border-color:var(--steel);background:var(--navy-700)}
@media (max-width:800px){
  .prow{grid-template-columns:1fr 1fr;gap:.25rem .9rem;padding-block:1.05rem}
  .prow.h{display:none}
  .prow .v{grid-column:1/-1;font-size:1.1rem}
  .prow .n{grid-column:1/-1;padding-top:.3rem;color:var(--ink-inv-2)}
  /* Its own line rather than squeezed against the dates. */
  .prow .pdf{grid-column:1/-1;text-align:left;padding-top:.7rem}
  .prow .pdf:empty{padding-top:0}
}

/* Team ------------------------------------------------------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:820px){.team{grid-template-columns:1fr}}
.member{background:var(--paper)}
.portrait{aspect-ratio:4/5;background:var(--paper-3);border-bottom:1px solid var(--rule);overflow:hidden}
/* The files are already 4:5, so cover only guards against a future crop. */
.portrait img{display:block;width:100%;height:100%;object-fit:cover}
.member .body{padding:1.4rem 1.4rem 1.6rem}
.member h4{margin-bottom:.2rem;font-size:1.1rem}
.member .role{font-family:var(--f-sans);font-size:.7rem;color:var(--ink-3);margin-bottom:.8rem}
.member p{font-size:.9rem;color:var(--ink-2);margin:0 0 .9rem}
.member .em{display:block;font-family:var(--f-sans);font-size:.75rem;color:var(--navy);
  text-decoration:none;word-break:break-all}
.member .em:hover{text-decoration:underline}
.member .tel{display:block;margin-top:.35rem;font-family:var(--f-sans);font-size:.75rem;
  color:var(--ink-3);text-decoration:none}
.member .tel:hover{color:var(--navy)}
/* Someone not on the desk yet. Set apart from the description so it reads as
   a status rather than as another line about what they do. */
.member .joining{display:inline-block;margin:0 0 .9rem;padding:.3rem .6rem;
  background:var(--paper-3);color:var(--navy);
  font-size:.62rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase}

/* Contact + footer ------------------------------------------- */
.contact{background:var(--navy-900);color:#fff}
.contact .eyebrow{color:var(--steel)}
.contact .lede{color:var(--ink-inv)}
/* Two desks, two numbers. Wrapping the pair carries the spacing so each
   number keeps its own line and never breaks mid-digit on a narrow screen. */
.phones{display:flex;flex-wrap:wrap;gap:.2rem 2.4rem;margin:.5rem 0 .9rem}
/* Sits directly under the number, as a second way to reach the same desks. */
.cmails{display:flex;flex-wrap:wrap;gap:.45rem 2.2rem;margin:0 0 2.6rem}
.cmails a{font-family:var(--f-sans);font-size:.88rem;color:var(--steel);text-decoration:none}
.cmails a:hover{color:#fff}
.phone{display:block;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;letter-spacing:-.02em;color:#fff;
  text-decoration:none;white-space:nowrap}
.phone:hover{color:var(--steel)}

/* Office locator --------------------------------------------- */
/* Two map panels over three address cards, all sharing one 1px rule grid. */
.offices{display:grid;gap:1px;margin-top:2.6rem;
  background:var(--rule-dark);border:1px solid var(--rule-dark)}
.office-maps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-dark)}
.office-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-dark)}
@media (max-width:820px){
  .office-maps,.office-cards{grid-template-columns:1fr}
}
/* Each panel is near the artwork's own 1.65:1 at half the row, so
   preserveAspectRatio="slice" trims only open sea. */
.office-map{position:relative;background:#04101F;overflow:hidden;min-height:330px}
.map{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-sea{fill:#04101F}
.map-grat path{fill:none;stroke:#1B4680;stroke-width:1;vector-effect:non-scaling-stroke}
.map-land{fill:#0D2C56;stroke:var(--steel);stroke-width:1.4;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;transition:fill .2s}
.map-land-far{fill:#0A2145;stroke:#1B4680;stroke-width:1.2}
/* A map can carry two offices, so the pin is the link rather than the panel.
   The invisible disc gives it a finger-sized target on a phone. */
.map-pin{cursor:pointer}
.map-hit{fill:transparent}
.map-pin:hover .map-ring,.map-pin:focus-visible .map-ring{stroke:#fff}
.map-pin:hover .map-halo{opacity:.3}
.office-map a:focus-visible{outline:2px solid var(--steel);outline-offset:-3px}
.map-halo{fill:var(--steel);opacity:.14}
.map-ring{fill:none;stroke:var(--steel);stroke-width:1.6;vector-effect:non-scaling-stroke;
  transition:stroke .2s}
.map-dot{fill:#fff}
.map-cross{stroke:var(--steel);stroke-width:1.4;vector-effect:non-scaling-stroke}
/* Coastlines run under the labels wherever a city sits on a crowded coast.
   paint-order draws the stroke first, so this reads as a cut-out halo in the
   sea colour rather than an outline on the letters. */
.map-label{fill:#fff;font-family:var(--f-sans);font-size:15px;letter-spacing:.22em;
  paint-order:stroke fill;stroke:#04101F;stroke-width:4.5px;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .map-halo{animation:ping 3.4s ease-out infinite}
}
@keyframes ping{0%{transform:scale(.7);opacity:.3}70%,100%{transform:scale(1.5);opacity:0}}
.office-card{background:var(--navy-800);padding:1.7rem 1.5rem}
.office-card h3{margin-bottom:.7rem;color:#fff}
.office-card address{font-style:normal;font-size:.92rem;color:#fff;line-height:1.6}
.office-card .office-tel{display:inline-block;margin-top:.9rem;font-family:var(--f-sans);
  font-size:.8rem;color:var(--steel);text-decoration:none}
.office-card .office-tel:hover{color:#fff}
.contact .office-note{font-size:.86rem;color:var(--ink-inv-2);margin:1.2rem 0 0}
footer{background:var(--navy-900);color:var(--ink-inv);border-top:1px solid var(--rule-dark);padding-block:3rem 1.5rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--rule-dark)}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
/* Phones: four stacked blocks ran to most of a screen, and the two link
   lists each wasted half the width. Brand and office keep the full row; the
   short lists pair up. column-gap:0 lets the two hairlines meet, so each row
   is separated by one continuous rule rather than two broken ones — the
   left column takes padding-right instead of a gap. */
@media (max-width:620px){
  .fgrid{grid-template-columns:1fr 1fr;column-gap:0;row-gap:1.6rem;padding-bottom:1.8rem}
  .fgrid>*{border-top:1px solid var(--rule-dark);padding-top:1.4rem}
  .fgrid>:first-child{grid-column:1/-1;border-top:0;padding-top:0}
  .fgrid>:nth-child(2){padding-right:1.2rem}
  /* Each office is one short line now, so the block simply runs full width
     rather than being split into a column that would wrap every entry. */
  .fgrid>:last-child{grid-column:1/-1}
  footer{padding-block:2.4rem 1.2rem}
}
.flogo{height:26px;width:auto;margin-bottom:1.2rem}
.fgrid h5{font-size:.64rem;font-weight:500;letter-spacing:.21em;text-transform:uppercase;color:var(--ink-inv-2);margin:0 0 1rem}
.fgrid p,.fgrid li{font-size:.86rem;margin:0 0 .4rem}
.fgrid ul{list-style:none;padding:0;margin:0}
.fgrid a{text-decoration:none}
.fgrid a:hover{color:#fff}
/* The partner mark needs its own white ground to sit on: the artwork is a
   dark logotype, invisible against the navy footer. */
.fplate{background:#fff;border:1px solid var(--rule-dark);padding:.75rem .95rem;
  display:inline-flex;margin-top:.9rem}
.fplate img{height:30px;width:auto}
.fbot{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;padding-top:1.5rem;
  font-family:var(--f-sans);font-size:.66rem;color:var(--ink-inv-2)}

/* Film on narrow screens ------------------------------------- */
/* The film holds 16:9 everywhere, so on a phone it is only ~9/16 of the width
   tall. The utility strip wraps to three lines there and would cover most of
   it, so the masthead alone sits over the video. That contact detail is still
   in the contact section and the footer. Placed last to beat the base rule. */
@media (max-width:760px){
  .util{display:none}
  /* The film's burned-in wordmark runs from 24% to 49% of the film's height.
     At 16:9 that top edge is 13.7vw down, while the Menu button is a fixed
     height — so the narrower the phone, the tighter it gets. Trimming the
     masthead's top padding lifts the button clear. .topbar.compact .masthead
     is more specific, so the pinned bar keeps its own spacing. */
  .masthead{padding-block:.5rem 1.1rem}
  /* Likewise the play button, which would otherwise land on the wordmark. */
  .film-play{width:58px;height:58px;top:69%}
  .film-play svg{width:21px;height:21px}
}
/* Below ~400px the wordmark is only 44px down, so the button needs to be
   shorter as well as higher. */
@media (max-width:400px){
  .masthead{padding-block:.4rem .9rem}
  .navtoggle{padding:.55rem .8rem}
}