/* ==========================================================================
   CRANE AERIAL & 3D IMAGING
   --------------------------------------------------------------------------
   One stylesheet, for a production company.

   THE FIVE DEVICES. Everything on this site is built from these and nothing
   else. They are borrowed from the reference and adapted to aerial work.

     1  MICRO-LABEL   9px uppercase, 0.24em tracking. Every section opens with
                      one. They sit at the edges of the frame, not centred in
                      a box.
     2  STATEMENT     A whole sentence set large in rounded sentence case.
                      Not a headline plus a subhead — one declarative line
                      that says the thing.
     3  HAIRLINE      1px. The only divider on the site. No cards, no boxes,
                      no shadows, no rounded corners except the pills.
     4  BAND          A section that flips to warm bone. Used exactly twice,
                      where the page needs to change gear.
     5  PANEL ROW     Full-bleed imagery in unequal columns. Never a grid of
                      equal cards.

   Rounded corners exist in one place: the pill button. Shadow is never used.
   Gradients are used only as legibility scrims over footage, never as decor.

   Every colour was measured against WCAG 2.1 AA before it was used and the
   ratio is written beside it. Do not swap one without re-measuring.

   Sections
     1  tokens          7  buttons and pills   13  build your shoot
     2  reset and base  8  hero                14  forms
     3  type            9  what we do          15  booking / scheduler
     4  layout          10 the work            16  agreement
     5  motion          11 why aerial          17  contact and footer
     6  film            12 (removed)           18  reduced motion / print
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
  --black:  #08090A;   /* true black — the ground                           */
  --char:   #14161A;   /* deep charcoal — a surface raised off it           */
  --hair:   #23272D;   /* hairline on black                                 */
  --bone:   #F1EEE8;   /* warm off-white — the band, and text on black  17.21:1 */
  --grey:   #9AA0A8;   /* secondary text on black                     7.56:1 */
  --ui:     #5E656E;   /* control borders on black                    3.38:1 */
  /* THE ACCENT IS ACHROMATIC. No hue is introduced anywhere: the footage
     supplies every colour on the page, and emphasis is carried by weight and
     by going to full brightness against the greys. Nothing here can read as
     orange, brown or amber, because there is no chroma to read.            */
  --signal: #F1EEE8;   /* emphasis on black — full-strength bone      17.21:1 */

  /* on the bone band */
  --ink:      #0F1114; /* primary text on bone                       16.33:1 */
  --mid:      #5A6068; /* secondary text on bone                      5.48:1 */
  --ui-l:     #848991; /* control borders on bone                     3.04:1 */
  --rule-l:   #DAD5CB; /* hairline on bone                                  */
  --signal-l: #0F1114; /* emphasis on the bone band                  16.33:1 */

  /* TWO FAMILIES, NO MORE.

     Nunito carries the headings: rounded terminals and open counters, which
     is warmer than the condensed caps this site used to run and reads as a
     company rather than a title card. It is set in SENTENCE CASE, not caps —
     a rounded face in all-caps at display size reads as a children's brand,
     and the roundness is the point.

     IBM Plex Sans does everything you read, operate or check: body, nav,
     labels, forms, buttons, the calculator, the booking fields, and every
     figure — prices included, where its plain digits beat a rounded face.

     The fallback chain is deliberately WIDER than Nunito (DejaVu Sans), not
     narrower. If the layout survives the fallback it cannot overflow once
     the real face arrives. */
  --f-display: 'Nunito', 'Varela Round', 'Trebuchet MS', 'DejaVu Sans',
               system-ui, sans-serif;
  --f-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Helvetica, Arial, sans-serif;

  /* Sized for Nunito, which is much wider than the condensed face it
     replaced — every step below came down accordingly. */
  --t-statement: clamp(1.5rem, 2.7vw, 2.4rem);
  --t-display:   clamp(1.95rem, 3.8vw, 3.4rem);
  --t-h2:        clamp(1.35rem, 2.3vw, 1.95rem);
  --t-h3:        clamp(1.1rem, 1.5vw, 1.32rem);
  --t-lead:      clamp(1.02rem, 1.15vw, 1.16rem);
  --t-body:      clamp(0.98rem, 1vw, 1.04rem);
  --t-label:     0.6875rem;

  --gut: clamp(20px, 5vw, 80px);
  --sec: clamp(76px, 10vh, 140px);
  --s1: 6px;  --s2: 12px; --s3: 18px; --s4: 26px;
  --s5: 38px; --s6: 56px; --s7: 80px; --s8: 116px;

  --micro: 180ms;
  --enter: 760ms;
  --ease:  cubic-bezier(.22, .61, .36, 1);
  --ease-o: cubic-bezier(.4, 0, .2, 1);

  --max: 1560px;
}

/* --- 2. RESET AND BASE --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--black);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

/* Author styles beat the UA sheet, so any `display` rule on a class silently
   un-hides a [hidden] element. The unfilled contact rows rely on [hidden]. */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, figcaption, fieldset { margin: 0; }

a { color: inherit; text-decoration: none; }
a:not([class]) { text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--bone); color: var(--black); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.band :focus-visible { outline-color: var(--signal-l); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 12px 20px; background: var(--bone); color: var(--black);
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600;
  transform: translateY(-180%); transition: transform var(--micro) var(--ease-o);
}
.skip:focus { transform: none; }

/* --- 3. TYPE ------------------------------------------------------------- */
/* DEVICE 1 — the micro-label. Every section opens with one. */
.label {
  font-family: var(--f-body);
  font-size: var(--t-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--grey);
}
.label--sig { color: var(--signal); }
.band .label { color: var(--mid); }
.band .label--sig { color: var(--signal-l); }

/* DEVICE 2 — the statement. A whole sentence, set large in sentence case.
   Not uppercase: Nunito's roundness is the reason it is here, and caps
   flatten it. Tracking goes slightly negative as the size goes up, which is
   what keeps a round face from looking loose at display size. */
.statement, .display, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.015em;
}
.display   { font-size: var(--t-display);   line-height: 1.03; letter-spacing: -.022em; }
.statement { font-size: var(--t-statement); line-height: 1.14; max-width: 26ch; }
.h2        { font-size: var(--t-h2);        line-height: 1.16; }
.h3        { font-size: var(--t-h3);        line-height: 1.25; font-weight: 700; letter-spacing: -.008em; }

.lead { font-size: var(--t-lead); line-height: 1.6; max-width: 52ch; color: var(--grey); }
.band .lead { color: var(--mid); }
.dim { color: var(--grey); }
.band .dim { color: var(--mid); }
.measure { max-width: 66ch; }

/* --- 4. LAYOUT ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); position: relative; }
main, .nav, footer { position: relative; z-index: 2; }
.section > .wrap, .hero__inner, footer > .wrap { position: relative; z-index: 1; }

/* DEVICE 3 — the hairline. The only divider on the site. */
.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }
.band .rule { background: var(--rule-l); }

/* DEVICE 4 — the band. Warm bone, used where the page changes gear. */
.band { background: var(--bone); color: var(--ink); }
.band .h2, .band .h3, .band .statement, .band .display { color: var(--ink); }

/* a section head: micro-label on a hairline, then the statement */
.head { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
.head__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--hair);
}
.band .head__top { border-bottom-color: var(--rule-l); }

/* --- 5. MOTION ----------------------------------------------------------- */
/* Opacity and a small rise. The hidden state is applied ONLY after JS has
   installed both an observer and a failsafe timer (see app.js). With JS off,
   blocked or broken, everything is simply visible. */
.js [data-r][data-armed] { opacity: 0; transform: translate3d(0, 20px, 0); }
.js [data-r][data-armed].on {
  opacity: 1; transform: none;
  transition: opacity var(--enter) var(--ease), transform var(--enter) var(--ease);
}
.stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* --- 6. FILM ------------------------------------------------------------- */
/* Footage is shown, not decorated. The hero is the only place words sit on
   it, and there the scrim is tied to the copy. Everywhere else it runs
   clean, full width, at its own aspect. */
.film { position: absolute; inset: 0; z-index: 0; overflow: hidden;
        background: var(--black); pointer-events: none; }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

.reel { position: relative; width: 100%; overflow: hidden; background: var(--char); }
.reel video, .reel img { width: 100%; height: auto; }
.reel__cap {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--gut) 0;
  font-size: var(--t-label); letter-spacing: .24em; text-transform: uppercase;
  color: var(--grey);
}

/* a photograph shown whole — contained, never cropped or stretched */
.shot { position: relative; overflow: hidden; background: var(--char);
        display: grid; place-items: center; }
.shot img { width: 100%; height: 100%; object-fit: contain; }

/* --- 7. BUTTONS AND PILLS ------------------------------------------------ */
/* The pill is the only rounded thing on the site. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 46px; padding: 12px 26px;
  border: 1px solid var(--ui); border-radius: 999px;
  background: transparent; color: var(--bone);
  font-family: var(--f-body); font-size: var(--t-label);
  letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--micro) var(--ease-o), color var(--micro) var(--ease-o),
              background var(--micro) var(--ease-o);
}
.btn:hover, .btn:focus-visible { border-color: var(--bone); }

.btn--solid { background: var(--bone); border-color: var(--bone); color: var(--black); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--bone); border-color: var(--bone); }

.band .btn { border-color: var(--ui-l); color: var(--ink); }
.band .btn:hover, .band .btn:focus-visible { border-color: var(--ink); }
.band .btn--solid { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.band .btn--solid:hover, .band .btn--solid:focus-visible {
  background: transparent; color: var(--ink); border-color: var(--ink);
}

.btn[disabled] { cursor: not-allowed; border-style: dashed; background: transparent; }
.btn[disabled], .btn[disabled]:hover { border-color: var(--ui); color: var(--grey); }
.band .btn[disabled], .band .btn[disabled]:hover { border-color: var(--ui-l); color: var(--mid); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* the numbered marker, a thin outlined pill */
.num {
  display: inline-flex; align-items: center; justify-content: center;
  justify-self: start;              /* or it stretches as a grid item */
  min-width: 34px; height: 22px; padding: 0 8px;
  border: 1px solid var(--ui); border-radius: 999px;
  font-size: .625rem; letter-spacing: .16em; color: var(--grey);
}
.band .num { border-color: var(--ui-l); color: var(--mid); }

/* --- 8. NAVIGATION AND HERO ---------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 14px var(--gut); color: var(--bone);
  border-bottom: 1px solid transparent;
  transition: background var(--micro) var(--ease-o), border-color var(--micro) var(--ease-o);
}
/* the clip's sky is nearly white, which put the wordmark at 1.3:1 */
.nav::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 136px;
  background: linear-gradient(180deg, rgba(8,9,10,.97) 0%, rgba(8,9,10,.93) 34%,
                                      rgba(8,9,10,.60) 68%, rgba(8,9,10,0) 100%);
  pointer-events: none; z-index: -1;
  transition: opacity var(--micro) var(--ease-o);
}
.nav[data-solid="true"]::before { opacity: 0; }
.nav[data-solid="true"] {
  background: rgba(8,9,10,.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom-color: var(--hair);
}
.nav__mark {
  display: inline-flex; align-items: center; min-height: 44px;
  /* The wordmark is the one place caps stay: it is a logotype, not a
     heading. Nunito is much wider than the old condensed face, so the size
     drops to keep the mark and the pill inside the frame. */
  font-family: var(--f-display); text-transform: uppercase; font-weight: 800;
  font-size: 1.02rem; letter-spacing: .04em; white-space: nowrap;
}
.nav__mark i { font-style: normal; color: var(--grey); margin-inline: .24em; font-weight: 500; }
.nav__links { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
/* min-width too: "Work" measures 43px, so the target cleared the height
   floor and still missed the width one. Same fix as the footer links. */
.nav__links a:not(.btn) {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  font-weight: 500; color: var(--grey);
  transition: color var(--micro) var(--ease-o);
}
.nav__links a:not(.btn):hover { color: var(--bone); }
@media (max-width: 860px) {
  .nav__links a:not(.btn) { display: none; }
  .nav__mark { font-size: 1.05rem; }
}
/* At 390px the full wordmark and the pill together overran the frame and
   the call to action was clipped. The short mark is the one that gives. */
@media (max-width: 560px) {
  .nav { padding: 12px var(--gut); gap: var(--s2); }
  .nav__tail { display: none; }
  .nav__mark { font-size: 1rem; }
  .nav .btn { padding: 11px 18px; min-height: 44px; letter-spacing: .14em; }
}

.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-block: 118px clamp(28px, 5vh, 60px); overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
/* the only scrim on the site, anchored to the copy rather than a guessed
   percentage — it covers the words wherever the layout puts them and leaves
   the sky and skyline above completely clear */
.hero__inner::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; transform: translateX(-50%); width: 100vw;
  top: -190px; bottom: -240px;
  background: linear-gradient(180deg, rgba(8,9,10,0) 0%, rgba(8,9,10,.70) 13%,
                                      rgba(8,9,10,.91) 28%, rgba(8,9,10,.95) 100%);
  pointer-events: none;
}

.hero__grid { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s7); }
}
.hero .display { max-width: 19ch; }
.hero__aside { display: grid; gap: var(--s4); align-content: end; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  padding-top: var(--s3); margin-top: var(--s6); border-top: 1px solid var(--hair);
}
.hero__meta span {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
@media (max-width: 760px) {
  .hero { padding-block: 100px clamp(22px, 4vh, 40px); }
  .hero__meta { margin-top: var(--s5); gap: 2px var(--s4); }
  .hero__grid { gap: var(--s4); }
}

/* --- 9. WHAT WE DO ------------------------------------------------------- */
/* Four categories as editorial rows on hairlines. Not a card grid. */
.svc { border-top: 1px solid var(--hair); }
.svc__row {
  display: grid; gap: var(--s2) var(--s5); align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(24px, 3vw, 44px) 0; border-bottom: 1px solid var(--hair);
}
@media (min-width: 900px) {
  /* The name column is sized to the longest name, not to a share of the row,
     so the description does not sit marooned half a screen away from it. */
  .svc__row { grid-template-columns: 3.5rem minmax(200px, .62fr) minmax(0, 1.25fr); }
}
.svc__n { padding-top: .55em; }
.svc__name {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1.12; letter-spacing: -.018em;
  transition: color var(--micro) var(--ease-o);
}
.svc__row:hover .svc__name { color: var(--signal); }
.svc__line { color: var(--grey); max-width: 48ch; }
.svc__list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s2); }
.svc__list li {
  font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--grey);
}
.svc__list li + li::before { content: '· '; color: var(--ui); }

/* --- 10. THE WORK -------------------------------------------------------- */
/* DEVICE 5 — the panel row. Unequal columns, full bleed, never a card grid. */
.panels { display: grid; gap: 1px; background: var(--hair); }
/* The columns are the two images' own aspect ratios, so each fills its cell
   exactly and nothing is cropped. Change an image, change these numbers. */
@media (min-width: 900px) { .panels { grid-template-columns: 1.878fr 2.418fr; } }
.panel { position: relative; overflow: hidden; background: var(--black); min-height: 240px; }
.panel video, .panel img { width: 100%; height: 100%; object-fit: cover; }
.panel__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s4);
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--bone);
  background: linear-gradient(180deg, rgba(8,9,10,0) 0%, rgba(8,9,10,.86) 62%);
}
/* a slot held open for a frame that has not been shot yet — labelled as
   exactly that, because an invented portfolio is worse than an empty one */
.panel--slot {
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--ui); background: var(--char); padding: var(--s5);
  min-height: 240px;
}
.panel--slot p { color: var(--grey); font-size: .9rem; max-width: 26ch; margin-top: var(--s2); }

/* --- 11. WHY AERIAL ------------------------------------------------------ */
.why { display: grid; gap: var(--s6); }
@media (min-width: 980px) { .why { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--s8); align-items: start; } }
.why__list { border-top: 1px solid var(--hair); }
.band .why__list { border-top-color: var(--rule-l); }
.why__list li {
  display: grid; gap: var(--s1) var(--s4); padding: var(--s4) 0;
  border-bottom: 1px solid var(--hair);
}
.band .why__list li { border-bottom-color: var(--rule-l); }
@media (min-width: 700px) { .why__list li { grid-template-columns: minmax(0,11rem) minmax(0,1fr); align-items: baseline; } }
.why__list b {
  font-family: var(--f-display); font-weight: 800;
  font-size: 1.06rem; letter-spacing: -.01em;
}
.why__list span { color: var(--grey); }
.band .why__list span { color: var(--mid); }

/* --- 12. WALKTHROUGHS ---------------------------------------------------- */
.flow { display: grid; gap: 1px; background: var(--hair); margin-top: var(--s6); }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow__step { background: var(--black); padding: var(--s5) var(--s4); display: grid; gap: var(--s2); align-content: start; }
.band .flow { background: var(--rule-l); }
.band .flow__step { background: var(--bone); }
.flow__step h3 { margin-top: var(--s2); }
.flow__step p { color: var(--grey); font-size: .95rem; }
.band .flow__step p { color: var(--mid); }
.flow svg { width: 100%; height: auto; display: block; }

.caveat {
  margin-top: var(--s6); padding-left: var(--s4);
  border-left: 2px solid var(--signal);
  color: var(--grey); max-width: 70ch; font-size: .95rem;
}
.band .caveat { border-left-color: var(--signal-l); color: var(--mid); }

/* --- 13. BUILD YOUR SHOOT ------------------------------------------------ */
.calc { display: grid; gap: 0; max-width: 1000px; }
.calc__bar { display: flex; gap: 4px; margin-bottom: var(--s5); }
.calc__bar i { flex: 1; height: 2px; background: var(--rule-l); transition: background var(--micro) var(--ease-o); }
.calc__bar i[data-done="true"] { background: var(--signal-l); }

.calc__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc__q { margin-bottom: var(--s5); display: grid; gap: var(--s2); }

 /* Hairlines drawn by the cells themselves, not by a coloured gap showing
    through — a gap grid leaves the unfilled cells of the last row painted
    in, which reads as two mystery blocks at the end of the options. */
.opts { display: grid; gap: 0; border-top: 1px solid var(--rule-l); border-left: 1px solid var(--rule-l); }
@media (min-width: 620px) { .opts { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); } }
.opt {
  display: grid; gap: 4px; text-align: left; padding: 16px 18px; min-height: 64px;
  background: var(--bone); color: var(--ink); cursor: pointer;
  border: 0; border-right: 1px solid var(--rule-l); border-bottom: 1px solid var(--rule-l);
  transition: background var(--micro) var(--ease-o), color var(--micro) var(--ease-o);
}
.opt:hover { background: #E7E3DB; }
.opt b { font-weight: 600; font-size: 1.02rem; }
.opt small { color: var(--mid); font-size: .84rem; line-height: 1.42; }
.opt[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.opt[aria-pressed="true"] small { color: #B9BEC5; }   /* 9.4:1 on --ink */

.calc__nav {
  display: flex; gap: var(--s2); align-items: center;
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule-l);
}
.calc__nav .spacer { margin-left: auto; }

.calc__run {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-l);
}
.calc__run-fig {
  font-family: var(--f-body); font-size: 1.6rem; font-weight: 600;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

.calc__form { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--rule-l); display: grid; gap: var(--s4); }

.est { display: grid; gap: var(--s4); }
.est__fig {
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
}
.est__from {
  font-family: var(--f-body); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--signal-l);
  vertical-align: middle; margin-left: .4em;
}
.est__grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .est__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s7); } }
.est__recap { display: grid; gap: 0; }
.est__recap div {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 8px 0; border-bottom: 1px solid var(--rule-l);
}
.est__recap span:first-child {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--mid);
}
.est__inc ul { display: grid; gap: 8px; margin-top: var(--s2); }
.est__inc li { position: relative; padding-left: 20px; color: var(--mid); font-size: .95rem; }
.est__inc li::before { content: ''; position: absolute; left: 0; top: .7em; width: 10px; height: 1px; background: var(--signal-l); }
.est__note { color: var(--mid); max-width: 62ch; font-size: .92rem; }

/* --- 14. FORMS ----------------------------------------------------------- */
.form { display: grid; gap: var(--s3); }
.row2 { display: grid; gap: var(--s3); grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 6px; }
.field > label { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); }
.band .field > label { color: var(--mid); }

.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; min-height: 48px;
  background: transparent; border: 0; border-bottom: 1px solid var(--ui);
  border-radius: 0; color: var(--bone);
  transition: border-color var(--micro) var(--ease-o);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover,
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--signal); }

.band .field input, .band .field select, .band .field textarea {
  border-bottom-color: var(--ui-l); color: var(--ink);
}
.band .field input:hover, .band .field select:hover, .band .field textarea:hover,
.band .field input:focus, .band .field select:focus, .band .field textarea:focus {
  border-bottom-color: var(--ink);
}

.field .err { font-size: .84rem; color: var(--signal); font-weight: 600; }
.band .field .err { color: var(--signal-l); }
.field [aria-invalid="true"] { border-bottom-color: var(--signal); border-bottom-width: 2px; }
.band .field [aria-invalid="true"] { border-bottom-color: var(--signal-l); }

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 34px;
}

/* what the site says when it could not send — never a false success */
.notice { padding: var(--s4); border: 1px solid var(--ui); display: grid; gap: var(--s3); }
.band .notice { border-color: var(--ui-l); }
.notice__h { font-family: var(--f-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.012em; }
.notice pre {
  margin: 0; padding: var(--s3); background: rgba(0,0,0,.3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto;
}
.band .notice pre { background: rgba(15,17,20,.06); }

/* --- 15. BOOKING / SCHEDULER --------------------------------------------- */
.sched { display: grid; gap: var(--s2); margin-top: var(--s4); }
.sched__frame { position: relative; margin-top: var(--s3); border: 1px solid var(--ui-l); background: var(--bone); overflow: hidden; }
.sched__frame iframe { display: block; width: 100%; border: 0; min-height: 420px; }
.sched__wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; color: var(--mid); pointer-events: none; }
.sched__frame[data-state="ready"] .sched__wait { display: none; }
.sched__frame[data-state="blocked"] { border-style: dashed; }
.sched__note { padding: var(--s4); color: var(--mid); font-size: .93rem; max-width: 62ch; }
.sched__sep { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule-l); }

/* --- 16. AGREEMENT ------------------------------------------------------- */
.agree { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule-l); display: grid; gap: var(--s3); }
.agree__doc {
  border: 1px solid var(--rule-l); padding: var(--s4);
  max-height: 320px; overflow: auto; background: rgba(15,17,20,.03);
  font-size: .9rem; line-height: 1.6; color: var(--mid);
}
.agree__doc h4 {
  font-family: var(--f-body); text-transform: uppercase; font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; color: var(--ink); margin-bottom: var(--s2);
}
.agree__doc dl { display: grid; gap: 4px; margin: 0 0 var(--s3); }
.agree__doc dl div { display: flex; justify-content: space-between; gap: var(--s3); padding: 4px 0; border-bottom: 1px solid var(--rule-l); }
.agree__doc dt { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; }
.agree__doc dd { margin: 0; color: var(--ink); text-align: right; }
.agree__doc ol { display: grid; gap: 8px; counter-reset: t; }
.agree__doc ol li { position: relative; padding-left: 24px; counter-increment: t; }
.agree__doc ol li::before {
  content: counter(t); position: absolute; left: 0; top: 0;
  font-size: .7rem; color: var(--signal-l); font-weight: 600;
}
.agree__check { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.agree__check input {
  width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--signal-l); border: 1px solid var(--ui-l); padding: 0;
}
.agree__check span { font-size: .93rem; color: var(--ink); max-width: 62ch; }
.agree__check .err { flex-basis: 100%; margin-top: 4px; }
.agree__check [aria-invalid="true"] { outline: 2px solid var(--signal-l); outline-offset: 2px; }

/* --- 17. CONTACT AND FOOTER ---------------------------------------------- */
.contact__grid { display: grid; gap: var(--s7); }
@media (min-width: 980px) { .contact__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: var(--s8); align-items: start; } }
.contact__facts { display: grid; gap: var(--s5); align-content: start; }
.fact { display: grid; gap: 4px; }
.fact a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-body); font-weight: 600;
  font-size: 1.42rem; letter-spacing: -.01em; color: var(--bone);
  transition: color var(--micro) var(--ease-o);
}
.fact a:hover { color: var(--signal); }

/* the closing call, set as a statement */
.close { display: grid; gap: var(--s5); justify-items: start; }

.foot { padding-block: var(--s6) var(--s5); border-top: 1px solid var(--hair); display: grid; gap: var(--s4); }
@media (min-width: 760px) { .foot { grid-template-columns: 1fr auto; align-items: end; } }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s4); }
/* min-width as well as min-height: "Work" and "Book" set to 43 and 40
   pixels wide, so the targets were tall enough and still too thin to hit.
   Centred, so the short labels stay aligned with the long ones. */
.foot__links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--grey);
}
.foot__links a:hover { color: var(--bone); }
.foot small { color: var(--grey); font-size: .8rem; }

/* --- 18. REDUCED MOTION AND PRINT ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js [data-r][data-armed] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav, .skip, .film, .reel, .panels, .btn-row, .calc__bar, .calc__nav { display: none !important; }
  body, .band { background: #fff !important; color: #000 !important; }
  .section { padding-block: 14pt; }
  .agree__doc { max-height: none; overflow: visible; border: 1px solid #999; }
  a { text-decoration: underline; }
}


/* --- 19. SERVICES, REBUILT -----------------------------------------------
   Three categories at two weights. A primary row gets a wide body column with
   the "who it is for" rows underneath; the secondary one collapses to a single
   column so ground photography reads as the smaller offer it is.          */
.svc__row { align-items: start; }
.svc__head { display: grid; gap: var(--s2); align-content: start; }

/* The drawn figure. Inline SVG in currentColor, so it takes the ink of
   whatever section it sits in and needs no second colour and no file. It
   is a diagram, not an image — it carries aria-hidden and the sentence
   beside it says the same thing in words. */
.svc__art {
  width: 100%; max-width: 190px; height: auto;
  color: var(--mid);
  margin-bottom: var(--s2);
  transition: color var(--slow) var(--ease-o);
}
.svc__row:hover .svc__art { color: var(--signal); }
/* Secondary service, smaller figure — the hierarchy holds in the drawing
   as well as in the type. */
.svc__row:not(.svc__row--primary) .svc__art { max-width: 140px; }
@media (max-width: 760px) {
  .svc__art { max-width: 150px; }
  .svc__row:not(.svc__row--primary) .svc__art { max-width: 120px; }
}
.svc__body { display: grid; gap: var(--s4); }

@media (min-width: 900px) {
  .svc__row { grid-template-columns: 3.5rem minmax(220px, .7fr) minmax(0, 1.3fr); }
  .svc__row--primary { padding-block: clamp(32px, 4vw, 60px); }
}

/* who the work is for — a definition list, not a card grid */
.who { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.band .who { border-top-color: var(--rule-l); }
.who__row {
  display: grid; gap: 2px var(--s4); padding: var(--s3) 0;
  border-bottom: 1px solid var(--hair);
}
.band .who__row { border-bottom-color: var(--rule-l); }
@media (min-width: 640px) {
  .who__row { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); align-items: baseline; }
}
.who__row b {
  font-family: var(--f-body); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bone);
}
.band .who__row b { color: var(--ink); }
.who__row span { color: var(--grey); font-size: .95rem; }
.band .who__row span { color: var(--mid); }

/* the two links that close every service */
/* Row gap is 24px, not 12px, because each link below carries a 44px tall
   invisible hit area centred on 22px of text — 11px of overhang top and
   bottom. Anything under 22px of row gap and two stacked links fight over
   the same thumb. */
.svc__cta { display: flex; flex-wrap: wrap; gap: 24px var(--s4); align-items: baseline; }
.svc__cta a {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--signal);
  border-bottom: 1px solid var(--ui); padding-bottom: 3px;
  transition: border-color var(--micro) var(--ease-o);
  position: relative;
}
/* The underline is the signature, so it stays tight to the text. Padding would
   drag it 11px south; this grows the touch target instead and leaves the
   drawing alone. */
.svc__cta a::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); min-height: 44px; height: 100%;
}
.svc__cta a:hover { border-bottom-color: var(--signal); }
.svc__cta a + a { color: var(--grey); border-bottom-color: transparent; }
.svc__cta a + a:hover { color: var(--bone); border-bottom-color: var(--ui); }

/* --- 20. THE METROS ------------------------------------------------------ */
.metros { border-top: 1px solid var(--rule-l); }
.metros li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule-l);
}
.metros b {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -.02em; color: var(--ink);
}
.metros span {
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--mid);
}

/* The wordmark is two words rendered as two elements; HTML collapses the
   whitespace between them, so the gap has to be a margin, not a space. */
.nav__tail { margin-left: .3em; font-weight: 500; color: var(--grey); }

/* --- 21. THE MERGED QUOTE / BOOK / CONTACT SECTION -----------------------
   Quote, booking and contact used to be three numbered stops. They all
   answer "how do I start?", so they are one section now, with a hairline
   and real space where the halves meet instead of a section break.      */

/* The notes that used to sit in the right-hand column of the booking
   section. On their own now, full width under the calculator. */
.why__list--flat { margin-top: var(--s7); }

/* The lower half: contact. The rule is the join. */
.split {
  margin-top: var(--s8);
  padding-top: var(--s7);
  border-top: 1px solid var(--hair);
}
.band .split { border-top-color: var(--rule-l); }

/* The phone and email links are set in --bone, which is the page's light
   ink. Contact now sits inside a BAND, where the background is bone — so
   without this the two biggest links on the page render invisible. */
.band .fact a { color: var(--ink); }
.band .fact a:hover { color: var(--signal-l); }