/* =========================================================
   POINT ELEVEN
   Palette and type per Point Eleven Brand Guidelines (Master
   Final). Values marked "derived" are production tints of the
   five brand colours, needed for hairlines, surfaces and
   legible body copy. They are not new brand colours.

   Colour strategy: Off White is the working ground. Navy is
   used deliberately — the footer, the closing call to action,
   and the viewer frames — so it reads as brand punctuation
   rather than wallpaper. Electric Blue marks only what a
   visitor can act on.
   ========================================================= */
:root{
  --navy:     #081A30;
  --blue:     #1683FF;
  --slate:    #526579;
  --offwhite: #F5F4EF;
  --black:    #0A0D12;

  --ink:        var(--navy);
  --ink-2:      #0E2440;   /* derived: raised surface on navy */
  --ink-3:      #1B3653;   /* derived: hairline on navy */
  --bg:         var(--offwhite);
  --bg-2:       #FFFFFF;   /* alternate light section */
  --rule:       rgba(8,26,48,.14);  /* derived: hairline on light */
  --rule-soft:  rgba(8,26,48,.08);

  --accent:     var(--blue);
  --accent-ink: var(--navy);        /* navy on blue = 4.7:1, passes AA */

  --text:         var(--navy);      /* headings */
  --text-body:    #3A4A61;          /* derived: body copy, 8.2:1 on off-white */
  --text-mute:    var(--slate);     /* labels, secondary, 5.4:1 */
  --text-inv:     var(--offwhite);
  --text-inv-mute:#8FA0B4;          /* derived: 6.5:1 on navy */

  --font-head: 'Montserrat','Aptos','Helvetica Neue',Arial,sans-serif;
  --font-body: 'Montserrat','Aptos',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --maxw: 1200px;
  --radius: clamp(14px,1.6vw,22px);  /* echoes the rounded-square device */
  --radius-sm: 6px;  /* buttons, inputs */
  --ease: cubic-bezier(.2,.7,.3,1);
  --pad-sec: clamp(84px,10vw,150px);
}

/* ============================ RESET ============================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;font-family:var(--font-body);color:var(--text-body);background:var(--bg);
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
img,svg,iframe{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--text);font-weight:600;margin:0 0 .55em}
h1{font-size:clamp(2.5rem,6.2vw,4.4rem);line-height:1.05;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.12;letter-spacing:-.028em}
h3{font-size:1.15rem;line-height:1.35;letter-spacing:-.01em}
h4{font-size:1rem;letter-spacing:-.005em}
p{margin:0 0 1.15em}
ul{margin:0 0 1.15em;padding-left:1.1em}
li{margin-bottom:.5em}
strong{color:var(--text);font-weight:600}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ============================ LAYOUT ============================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,40px)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 clamp(22px,4vw,40px)}
section{padding:var(--pad-sec) 0}
.sec-alt{background:var(--bg-2)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

.eyebrow{
  font-family:var(--font-head);font-size:.7rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-mute);margin:0 0 18px;display:block;
}
.lede{
  font-size:clamp(1.12rem,1.75vw,1.32rem);line-height:1.6;color:var(--text-body);
  max-width:58ch;font-weight:400;
}

/* Navy contexts: the CTA band and the (unused by default) dark section */
.sec-dark{background:var(--ink);color:var(--text-inv)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff}
.sec-dark .eyebrow,.cta-band .eyebrow{color:var(--text-inv-mute)}
.sec-dark .lede,.cta-band .lede{color:var(--text-inv-mute)}
.sec-dark p,.sec-dark li{color:var(--text-inv-mute)}
.sec-dark strong{color:#fff}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(245,244,239,.82);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--rule-soft);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;height:108px;
  transition:height .3s var(--ease);
}
.site-header.is-compact .nav{height:72px}
.brand{display:inline-flex;align-items:center;text-decoration:none}

/* The horizontal lock-up carries the name at every size, so the header simply
   settles rather than swapping artwork. */
.site-header .brand img{height:56px;width:auto;transition:height .3s var(--ease)}
.site-header.is-compact .brand img{height:40px}
.site-footer .brand img{height:140px}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav-links a{
  text-decoration:none;color:var(--text-mute);font-size:.92rem;font-weight:500;
  letter-spacing:-.005em;padding:9px 14px;border-radius:var(--radius-sm);
  transition:color .18s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-cta{margin-left:10px}
.nav-links a.btn-primary{color:var(--accent-ink)}
.nav-links a.btn-primary:hover{color:var(--accent-ink)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--rule);border-radius:var(--radius-sm);
  color:var(--navy);padding:11px 14px;cursor:pointer;font-size:1rem;line-height:1;
}

/* reading progress — a 2px hairline along the bottom edge of the header */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;overflow:hidden}
.scroll-progress span{
  display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;
}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-head);font-weight:600;font-size:.94rem;letter-spacing:-.005em;
  padding:14px 24px;border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#3F98FF}
.btn-dark{background:var(--navy);color:var(--offwhite)}
.btn-dark:hover{background:#0E2440}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--navy);background:rgba(8,26,48,.035)}
.cta-band .btn-ghost,.sec-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.cta-band .btn-ghost:hover,.sec-dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-lg{padding:17px 32px;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.center .btn-row{justify-content:center}

/* ============================ HERO ============================ */
/* Both columns sit inside the site container, so the media box aligns with
   every other edge on the page instead of running off the viewport. */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr);
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,40px);
}
.hero-copy,.hero-media{min-width:0}
.hero-copy{padding:clamp(48px,7vw,96px) 0 clamp(34px,4vw,56px)}
.hero-copy-inner{max-width:none;margin:0}
.hero h1{max-width:15ch;margin-bottom:.4em}
.hero .lede{max-width:50ch}
.hero-media{padding:0 0 clamp(56px,7vw,96px)}

@media (min-width:981px){
  .hero{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    align-items:center;column-gap:clamp(36px,4vw,72px);
  }
  .hero-copy{padding:clamp(76px,8vw,124px) 0}
  .hero-media{padding:clamp(40px,5vw,72px) 0}
  .hero-media .viewer{aspect-ratio:auto;height:clamp(380px,52vh,540px)}
}

/* Flythrough video, if one has been supplied. Hidden until it can actually
   play, so a missing file never leaves a black rectangle. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease);
}
.viewer.has-video .hero-video{opacity:1}
.viewer.has-video .viewer-placeholder{display:none}

.hero-badges{
  display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,44px);list-style:none;padding:0;
  margin:48px 0 0;border-top:1px solid var(--rule);
}
.hero-badges li{font-size:.82rem;letter-spacing:.005em;color:var(--text-mute);padding-top:18px;margin:0}

/* Flythrough video, if one has been supplied. Hidden until it can actually
   play, so a missing file never leaves a black rectangle. */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease);
}
.viewer.has-video .hero-video{opacity:1}
.viewer.has-video .viewer-placeholder{display:none}

/* Viewer frames stay navy: they are the digital viewport, and they give the
   light pages their contrast without flooding a whole section. */
.frame,.viewer{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--rule-soft);background:var(--ink);aspect-ratio:16/10;
  box-shadow:0 1px 2px rgba(8,26,48,.05),0 30px 70px -30px rgba(8,26,48,.35);
}
.viewer iframe{width:100%;height:100%;border:0}

/* Click-to-load tours. The third-party embed is not fetched until asked for,
   which keeps the site free of other people's cookies by default. */
.embed-consent{position:absolute;inset:0;display:flex}
.embed-consent iframe{width:100%;height:100%;border:0}
.embed-load{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);border:0;cursor:pointer;color:var(--text-inv-mute);
  font-family:var(--font-body);padding:30px;text-align:center;
  transition:background .2s var(--ease);
}
.embed-load:hover{background:var(--ink-2)}
.embed-load-icon{
  width:56px;height:56px;border-radius:50%;border:1px solid var(--ink-3);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;
  padding-left:4px;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.embed-load:hover .embed-load-icon{border-color:var(--accent);background:rgba(22,131,255,.12)}
.embed-load-main{font-family:var(--font-head);font-weight:600;font-size:1rem;color:#fff}
.embed-load-note{font-size:.8rem;max-width:32ch;line-height:1.5}
/* The device drawn AROUND the media, so the work sits inside the mark.
   Straight from the guidelines: the rounded square is "a spatial boundary or
   digital viewport". An outline is used rather than a wrapper element so it
   is not clipped by the media's own overflow, and it follows the radius. */
.hero-media .viewer,.split-media .viewer{
  outline:2px solid var(--navy);
  outline-offset:clamp(11px,1.5vw,20px);
  margin:clamp(14px,1.8vw,24px);
}
@media (max-width:620px){
  .hero-media .viewer,.split-media .viewer{outline-offset:9px;margin:12px}
}

/* .frame applies the brand's rounded-square device shape to any media.
   Used consistently, the silhouette becomes recognisable before the name is. */
.frame > img,.frame > video{width:100%;height:100%;object-fit:cover;display:block}
img.frame{border-radius:var(--radius);border:1px solid var(--rule-soft)}
.viewer-placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:32px;color:var(--text-inv-mute);background:var(--ink);
}
.viewer-placeholder strong{color:#fff;font-family:var(--font-head);font-size:1rem;font-weight:600}
.viewer-placeholder span{font-size:.86rem;max-width:36ch;line-height:1.6}
.viewer-caption{margin-top:16px;font-size:.82rem;color:var(--text-mute);text-align:center}

/* ---- Use-case switcher: one viewer, four reasons to care ---- */
.usecase-tabs{
  display:flex;gap:2px;margin-top:20px;border-bottom:1px solid var(--rule);
  overflow-x:auto;scrollbar-width:none;
  min-width:0;             /* without this the nowrap tabs set a page-wide floor */
  -webkit-overflow-scrolling:touch;
}
.usecase{min-width:0}
.usecase-tabs::-webkit-scrollbar{display:none}
.usecase-tabs button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:var(--font-head);font-weight:600;font-size:.82rem;letter-spacing:.005em;
  color:var(--text-mute);padding:13px 15px;cursor:pointer;margin-bottom:-1px;white-space:nowrap;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.usecase-tabs button:hover{color:var(--navy)}
.usecase-tabs button[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--accent)}
.usecase-note{
  margin:18px 0 0;font-size:.92rem;line-height:1.6;color:var(--text-mute);
  min-height:4.4em;transition:opacity .22s var(--ease);
}
.usecase-note.is-fading{opacity:0}
@media (max-width:620px){ .usecase-note{min-height:0} }

/* ============================ GRIDS & CARDS ============================ */
.grid{display:grid;gap:clamp(28px,3.4vw,46px)}
.grid > *{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Cards are hairline-ruled columns, not boxes. Fewer edges reads calmer
   and more considered than a page of outlined rectangles. */
.card{
  background:none;border:0;border-top:1px solid var(--rule);
  padding:26px 0 0;transition:border-color .25s var(--ease);
}
.card h3{margin-bottom:.5em}
.card p{font-size:.97rem;margin-bottom:0}
.card p + h3{margin-top:1.7em}
.card-link{text-decoration:none;display:block;color:inherit;position:relative}
/* the rule draws itself in across the top of the card on hover */
.card-link::after{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--accent);
  transition:width .45s var(--ease);
}
.card-link:hover::after,.card-link:focus-visible::after{width:100%}
.card-link:hover h3,.card-link:focus-visible h3{color:var(--accent)}
.sec-dark .card{border-top-color:var(--ink-3)}
.card .icon{width:24px;height:24px;color:var(--text-mute);margin-bottom:20px}
.card .icon svg{width:24px;height:24px}
.sec-dark .card .icon{color:var(--text-inv-mute)}
.card-more{
  font-family:var(--font-head);font-weight:600;font-size:.86rem;color:var(--text-mute);
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  transition:color .2s var(--ease);
}
.card-more::after{
  content:"→";display:inline-block;margin-left:2px;
  transition:transform .28s var(--ease);
}
.card-link:hover .card-more{color:var(--accent)}
.card-link:hover .card-more::after,.card-link:focus-visible .card-more::after{transform:translateX(5px)}

/* numbered process steps */
.steps{counter-reset:step;display:grid;gap:clamp(28px,3.4vw,46px);grid-template-columns:repeat(4,1fr)}
.step{position:relative;padding-top:26px;border-top:1px solid var(--rule)}
.step::after{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--navy);
  transition:width .9s var(--ease);
}
.step.is-active::after{width:100%}
.step h3,.step::before{transition:color .5s var(--ease)}
.step.is-active::before{color:var(--accent)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-head);font-weight:600;font-size:.72rem;letter-spacing:.22em;
  color:var(--text-mute);display:block;margin-bottom:16px;
}
.step h3{font-size:1.05rem}
.step p{font-size:.95rem;margin-bottom:0}

/* stat figures */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px)}
.stat{border-top:1px solid var(--rule);padding-top:24px}
.stat b{
  display:block;font-family:var(--font-head);font-weight:600;
  font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.04em;
  color:var(--text);margin-bottom:12px;
}
.stat span{font-size:.88rem;color:var(--text-mute);line-height:1.5}
.sec-dark .stat{border-top-color:var(--ink-3)}
.sec-dark .stat b{color:#fff}

/* tick list */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:14px}
.ticks-2col{column-count:2;column-gap:clamp(30px,4vw,64px)}
.ticks-2col li{break-inside:avoid;margin-bottom:16px}
@media (max-width:760px){ .ticks-2col{column-count:1} }
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:13px;height:13px;background:var(--text-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.sec-dark .ticks li::before{background:var(--text-inv-mute)}

/* split feature block */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center}
.split > *{min-width:0}
.split.reverse .split-media{order:-1}

/* pull quote */
.quote{
  border:0;padding:0;margin:0;color:var(--text);
  font-family:var(--font-head);font-weight:500;
  font-size:clamp(1.4rem,2.9vw,2.05rem);line-height:1.32;letter-spacing:-.025em;
}
.quote footer{
  font-family:var(--font-body);font-size:.9rem;color:var(--text-mute);
  margin-top:22px;letter-spacing:0;font-weight:400;
}

/* ============================ FAQ ============================ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:26px 44px 26px 0;position:relative;
  font-family:var(--font-head);font-weight:600;font-size:1.04rem;letter-spacing:-.015em;
  color:var(--text);transition:color .18s var(--ease);
}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;margin-top:-6px;
  background:var(--text-mute);transition:transform .25s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{font-size:.98rem;padding-bottom:10px;max-width:68ch}

/* ============================ FORM ============================ */
.form-card{
  background:var(--bg-2);border:1px solid var(--rule-soft);border-radius:var(--radius);
  padding:clamp(28px,3.6vw,44px);
}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--font-head);font-weight:600;font-size:.84rem;
  letter-spacing:.01em;color:var(--text);margin-bottom:9px;
}
.field .hint{font-weight:400;color:var(--text-mute)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;font:inherit;font-size:.97rem;color:var(--text);
  background:var(--bg-2);border:1px solid var(--rule);border-radius:var(--radius-sm);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,131,255,.16);
}
.field textarea{min-height:140px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-note{font-size:.83rem;color:var(--text-mute);margin:18px 0 0}

/* ---- Staged enquiry form ----
   Without JS every fieldset is visible and the form is one long page, which
   works perfectly well. With JS it becomes one question at a time. */
.enquiry fieldset{border:0;margin:0;padding:0;min-width:0}
.enquiry legend{
  font-family:var(--font-head);font-weight:600;font-size:1.15rem;letter-spacing:-.015em;
  color:var(--text);padding:0;margin-bottom:22px;
}
.enquiry .step-panel + .step-panel{margin-top:34px;padding-top:30px;border-top:1px solid var(--rule)}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.form-actions .btn{flex:1 1 auto;width:auto;min-width:0}

/* staged mode */
.enquiry.is-staged .step-panel{display:none;margin-top:0;padding-top:0;border-top:0}
.enquiry.is-staged .step-panel.is-current{display:block;animation:panelIn .35s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.form-progress{margin-bottom:28px}
.form-progress-meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;
  font-family:var(--font-head);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:12px;
}
.form-step-label{min-width:0;flex:1 1 auto}
.form-step-count{flex:0 0 auto;white-space:nowrap}
.enquiry,.enquiry fieldset,.form-card{min-width:0}
.form-progress-track{height:2px;background:var(--rule);position:relative;overflow:hidden}
.form-progress-fill{
  position:absolute;inset:0;background:var(--accent);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .45s var(--ease);
}
.btn-back{background:none;border:1px solid var(--rule);color:var(--text-mute);flex:0 0 auto}
.btn-back:hover{border-color:var(--navy);color:var(--navy);background:rgba(8,26,48,.035)}
@media (prefers-reduced-motion:reduce){
  .enquiry.is-staged .step-panel.is-current{animation:none}
}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================ PAGE HEADER ============================ */
.page-head{
  padding:clamp(56px,7vw,104px) 0 clamp(48px,5.5vw,80px);
  border-bottom:1px solid var(--rule);
}
.page-head h1{max-width:18ch}
.crumbs{font-size:.82rem;color:var(--text-mute);margin-bottom:22px;letter-spacing:.01em}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--navy)}

.prose h2{margin-top:2em}
.prose h3{margin-top:1.7em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}

/* ============================ CTA BAND ============================ */
/* The one full navy field per page. It closes the page and carries the ask. */
.cta-band{background:var(--ink);color:var(--text-inv);padding:clamp(76px,9vw,130px) 0}
.cta-band h2{color:#fff;max-width:20ch;margin-left:auto;margin-right:auto}

/* ============================ FOOTER ============================ */
.site-footer{
  background:var(--ink);color:var(--text-inv-mute);
  border-top:1px solid var(--ink-3);padding:76px 0 36px;font-size:.92rem;
}
/* The mark at full width, closing every page. Scale rather than repetition —
   it is the last thing a visitor sees, so it is worth the room. */
.footer-mark{
  display:block;padding-bottom:clamp(38px,5vw,60px);margin-bottom:clamp(38px,5vw,60px);
  border-bottom:1px solid var(--ink-3);
}
.footer-mark img{width:min(100%,880px);height:auto;display:block}

.footer-grid{display:grid;grid-template-columns:1.6fr .9fr .9fr .8fr 1.05fr;gap:clamp(26px,3vw,42px);margin-bottom:56px}
.site-footer h4{
  color:#fff;font-family:var(--font-head);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:var(--text-inv-mute);text-decoration:none;transition:color .16s var(--ease)}
.site-footer a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid var(--ink-3);padding-top:26px;display:flex;flex-wrap:wrap;
  gap:14px;justify-content:space-between;font-size:.82rem;
}
.socials{display:flex;gap:10px;margin-top:22px;list-style:none;padding:0}
.socials li{margin:0}
.socials a{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--ink-3);border-radius:var(--radius-sm);color:var(--text-inv-mute);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.socials a:hover{color:#fff;border-color:var(--text-inv-mute)}
.socials svg{width:19px;height:19px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:980px){
  .hero-grid,.split{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}
  .grid-4,.steps,.stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-toggle{display:inline-flex}
  .nav{height:82px}
  .site-header.is-compact .nav{height:64px}
  .site-header .brand img{height:42px}
  .site-header.is-compact .brand img{height:34px}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--bg);
    border-bottom:1px solid var(--rule);padding:14px 22px 22px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 14px;font-size:1rem}
  .nav-cta{margin:10px 0 0}
  .btn{width:100%}
  /* buttons that sit in a row share the width instead of each taking all of it */
  .btn-row .btn,.form-actions .btn{width:auto;flex:1 1 auto;min-width:0}
}
@media (max-width:620px){
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4,.steps,.stats,.field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .site-footer .brand img{height:112px}
  .hero-badges{gap:0}
  .hero-badges li{width:100%;padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =========================================================
   MOTION — applied only when JS runs (html.js-motion), so the
   site stays readable if JS fails. Deliberately restrained:
   the Matterport embed is the expensive asset on these pages.
   ========================================================= */
.js-motion [data-reveal]{
  opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js-motion [data-reveal].is-in{opacity:1;transform:none}

.js-motion [data-load]{
  opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.js-motion .is-loaded [data-load]{opacity:1;transform:none}
.js-motion .is-loaded [data-load]:nth-child(1){transition-delay:.04s}
.js-motion .is-loaded [data-load]:nth-child(2){transition-delay:.11s}
.js-motion .is-loaded [data-load]:nth-child(3){transition-delay:.18s}
.js-motion .is-loaded [data-load]:nth-child(4){transition-delay:.25s}
.js-motion .is-loaded [data-load]:nth-child(5){transition-delay:.32s}

.js-motion .viewer[data-reveal]{transform:translateY(20px) scale(.99)}
.js-motion .viewer[data-reveal].is-in{transform:none}

@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal],.js-motion [data-load]{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}

/* =========================================================
   NATIVE MOTION
   Both features below are progressive: browsers without them
   simply render the site as normal, and both are switched off
   entirely for visitors who ask for reduced motion.
   ========================================================= */

/* Cross-document view transitions — pages cross-fade instead of blinking,
   so the site reads as one application rather than separate documents. */
@view-transition{ navigation:auto; }

@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .2s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .32s var(--ease) both}
  @keyframes vtOut{to{opacity:0}}
  @keyframes vtIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* The header is the one element that should not cross-fade — it persists. */
  .site-header{view-transition-name:site-header}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Scroll-driven parallax on the hero media. Runs on the compositor via
   animation-timeline, so it costs nothing on the main thread and never
   competes with the Matterport embed. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:981px){
    .hero-media{
      animation:heroDrift linear both;
      animation-timeline:scroll(root);
      animation-range:0 70vh;
    }
    @keyframes heroDrift{to{transform:translateY(20px)}}
  }
}

/* =========================================================
   POINT CLOUD INTRO
   Full-screen canvas: the cloud sweeps in from beyond every
   edge and resolves into the P/11 device, then clears.
   Shown once per session, skippable, never under
   prefers-reduced-motion. The page beneath is fully rendered
   throughout — this covers content, it does not delay it.
   ========================================================= */
#intro{
  position:fixed;inset:0;z-index:9999;background:var(--navy);
  transition:opacity .68s var(--ease);
}
#intro.is-clearing{opacity:0;pointer-events:none}
#intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* The wordmark sits under the resolved mark, matching the stacked lock-up:
   94% of the device width, per the construction spec. */
#intro .intro-stack{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
#intro .intro-spacer{height:min(34vw,46vh,460px)}
#intro .intro-wordmark{
  width:calc(min(34vw,46vh,460px) * 0.94);
  margin-top:min(3.4vw,4.4vh,40px);
  opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
#intro.is-named .intro-wordmark{opacity:1;transform:none}

#intro .intro-skip{
  position:absolute;bottom:clamp(22px,4vw,40px);left:50%;transform:translateX(-50%);
  font-family:var(--font-head);font-size:.66rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--text-inv-mute);opacity:0;
  transition:opacity .5s var(--ease);background:none;border:0;cursor:pointer;padding:12px 16px;
}
#intro.is-named .intro-skip{opacity:.7}
#intro .intro-skip:hover{opacity:1;color:#fff}

@media (max-width:699px){
  #intro .intro-spacer{height:min(62vw,34vh)}
  #intro .intro-wordmark{width:calc(min(62vw,34vh) * 0.94);margin-top:min(6vw,3.4vh,30px)}
}

@media (prefers-reduced-motion:reduce){ #intro{display:none} }