@charset "utf-8";
/* Auto Tint Castle Rock
   Visual language derived from the approved AT mark: diagonal separations,
   open white cuts, aligned planes, controlled layers, strong black forms.
   Palette and type are fixed by the brand guide. No accent colour is introduced. */

/* ---------- fonts ---------- */
@font-face{font-family:'Barlow Semi Condensed';src:url('../fonts/barlow-semicondensed-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'InterVar';src:url('../fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --black:#000;
  --white:#fff;
  --charcoal:#232629;
  --gray:#F2F3F3;
  --line:#d8dadb;
  --muted:#5b6166;

  --head:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif;
  --body:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* the logo's own clear-space unit: X = 4.29% of visible lockup width */
  --logo-visible:320px;
  --logo-asset:calc(var(--logo-visible) / 0.9209);
  --mono-visible:64px;
  --mono-asset:calc(var(--mono-visible) / 0.8125);

  --gut:clamp(20px,4vw,56px);
  --stack:clamp(56px,7vw,112px);
  --maxw:1280px;
  --measure:68ch;

  --hdr:104px;                 /* measured at runtime, this is the fallback */
  --cut:12deg;                 /* the AT diagonal, used sparingly */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:180ms;
  --t-mid:220ms;
  --t-slow:420ms;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--white);color:var(--charcoal);
  font-family:var(--body);font-size:17px;line-height:1.55;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;}
img,svg,video{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:var(--black);text-underline-offset:.22em;text-decoration-thickness:1px;}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.06;
  letter-spacing:.005em;text-wrap:balance;margin:0;color:var(--black);}
p{margin:0 0 1.05em;text-wrap:pretty;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0 0 1.05em;padding-left:1.15em;}
li{margin:0 0 .4em;}
hr{border:0;border-top:1px solid var(--line);margin:0;}

:focus-visible{outline:3px solid var(--black);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);color:#fff;
  padding:14px 20px;font-weight:700;}
.skip:focus{left:0;}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- scale ---------- */
.t-display{font-size:clamp(40px,6.2vw,76px);line-height:1.02;text-transform:uppercase;}
.t-h2{font-size:clamp(30px,3.9vw,48px);line-height:1.08;text-transform:uppercase;}
.t-h3{font-size:clamp(21px,2vw,27px);line-height:1.16;}
.t-h4{font-size:clamp(18px,1.5vw,20px);line-height:1.2;}
.lede{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--charcoal);}
.label{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);}
.small{font-size:14.5px;line-height:1.5;color:var(--muted);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.section{padding-block:var(--stack);}
.section--gray{background:var(--gray);}
.section--black{background:var(--black);color:#e9ebec;}
.section--black h2,.section--black h3,.section--black h4{color:#fff;}
.section--black .label{color:#9aa1a6;}
.section--black a{color:#fff;}

/* centred section heads, per the heading-integrity rule */
.head{max-width:60ch;margin-inline:auto;text-align:center;}
.head .label{display:block;margin-bottom:14px;}
.head p{margin-top:16px;color:var(--muted);}
.section--black .head p{color:#b4babe;}

/* the open white cut: a thin rule that echoes the logo's inset lines */
.cutline{height:2px;background:var(--black);width:56px;margin:22px auto 0;}
.section--black .cutline{background:#fff;}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--line);}
.masthead__in{display:flex;align-items:center;gap:clamp(20px,2.4vw,46px);
  min-height:104px;max-width:1600px;margin:0 auto;padding-inline:var(--gut);}
.brand{display:block;flex:0 0 auto;line-height:0;}
.brand img{width:var(--logo-asset);height:auto;}
.brand--mono{display:none;}
.brand--mono img{width:var(--mono-asset);}

.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(16px,1.7vw,28px);}
.nav a{font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:.085em;
  text-transform:uppercase;text-decoration:none;padding:10px 0;position:relative;
  white-space:nowrap;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--black);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease);}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}

.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;background:var(--black);color:#fff;
  font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;border:2px solid var(--black);
  border-radius:2px;cursor:pointer;transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease);}
.btn:hover{background:var(--white);color:var(--black);}
.btn--ghost{background:transparent;color:var(--black);}
.btn--ghost:hover{background:var(--black);color:#fff;}
.btn--light{background:#fff;color:#000;border-color:#fff;}
.btn--light:hover{background:transparent;color:#fff;}
.btn--wide{width:100%;}

.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;
  margin-left:auto;background:none;border:2px solid var(--black);border-radius:2px;cursor:pointer;}
.menu-btn span{display:block;width:20px;height:2px;background:var(--black);position:relative;}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--black);}
.menu-btn span::before{top:-6px;}
.menu-btn span::after{top:6px;}

.panel{position:fixed;inset:0;z-index:90;background:var(--white);
  display:flex;flex-direction:column;padding:var(--gut);
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility var(--t-mid);}
.panel[data-open="true"]{transform:none;opacity:1;visibility:visible;}
.panel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.panel__close{width:48px;height:48px;border:2px solid var(--black);background:none;
  border-radius:2px;cursor:pointer;font-size:22px;line-height:1;}
.panel nav{display:flex;flex-direction:column;margin-top:14px;}
.panel nav a{font-family:var(--head);font-size:34px;text-transform:uppercase;
  text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);}
.panel .btn{margin-top:26px;}

/* ================= HERO (Scene A) ================= */
.hero{position:relative;}
.hero__track{height:175svh;}                 /* tuned: 1.75 stable viewport heights */
/* No hard min-height: it would push the stage past the visible area on short
   screens and clip the heading. When there is genuinely not enough room the
   JS switches the hero to its static, unpinned mode instead. */
.hero__stage{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));
  overflow:hidden;background:var(--gray);}

.hero__media{position:absolute;inset:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;}

/* the film layer: black, limited to the glass by a static mask,
   swept by a transform so no layout work happens per frame */
.hero__glass{position:absolute;inset:0;pointer-events:none;
  --mask:url('/assets/hero-desktop-glassmask-1344.png');
  -webkit-mask-image:var(--mask);mask-image:var(--mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.hero__film{position:absolute;top:-12%;bottom:-12%;left:-60%;width:150%;
  background:linear-gradient(90deg,#04060a 0%,#04060a 95%,rgba(4,6,10,.45) 98.5%,rgba(4,6,10,0) 100%);
  opacity:var(--film-o,.86);
  transform:translate3d(var(--film-x,-100%),0,0) skewX(calc(var(--cut) * -1));
  will-change:transform;}

/* one precise diagonal boundary, formed where the white editorial band
   meets the image. The wedge and the band are a single white shape. */
.hero__cut{display:none;}

.hero__panel{position:absolute;left:0;right:0;bottom:0;background:var(--white);}
.hero__panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:clamp(54px,8vw,118px);background:var(--white);
  clip-path:polygon(0 100%,100% 0,100% 100%);}
.hero__panelin{max-width:var(--maxw);margin:0 auto;padding:clamp(22px,2.6vw,34px) var(--gut);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3vw,44px);align-items:end;}
.hero h1{font-size:clamp(34px,4.6vw,60px);text-transform:uppercase;max-width:15ch;}
.hero__sub{margin-top:12px;max-width:52ch;color:var(--muted);}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.hero__note{position:absolute;right:var(--gut);top:20px;z-index:3;
  background:rgba(255,255,255,.94);border:1px solid var(--line);
  padding:7px 12px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--charcoal);border-radius:2px;}

/* static and flow both drop the pin and the surplus scroll track.
   static resolves the film outright; flow keeps it scrubbed by JS. */
.hero[data-mode="static"] .hero__track,
.hero[data-mode="flow"] .hero__track{height:auto;}
.hero[data-mode="static"] .hero__stage,
.hero[data-mode="flow"] .hero__stage{position:relative;top:0;
  height:auto;min-height:0;aspect-ratio:16/11;}
/* 20% matches the end of the scrubbed range, so the static hero shows the
   same resolved composition the scroll sequence arrives at. */
.hero[data-mode="static"] .hero__film{transform:translate3d(20%,0,0) skewX(calc(var(--cut) * -1));
  opacity:.86;}

/* ================= tint viewer (Scene B) ================= */
.viewer{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr);
  gap:clamp(20px,3vw,44px);align-items:stretch;}
.viewer__stage{position:relative;overflow:hidden;background:#000;border:2px solid var(--black);}
.viewer__stage img{width:100%;height:100%;object-fit:cover;object-position:78% 46%;}
.viewer__glass{position:absolute;inset:0;background:#04060a;
  --mask:url('/assets/hero-desktop-glassmask-1344.png');
  -webkit-mask-image:var(--mask);mask-image:var(--mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  opacity:var(--vo,.45);}
.viewer__tag{position:absolute;left:0;bottom:0;background:#fff;border-top:2px solid #000;
  border-right:2px solid #000;padding:8px 14px;font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;}
.viewer__ctl{background:var(--white);border:2px solid var(--black);padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;}
.viewer__read{font-family:var(--head);font-size:clamp(30px,3.4vw,42px);text-transform:uppercase;
  line-height:1;margin:2px 0 4px;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 4px;}
.steps button{min-height:48px;padding:0 4px;background:#fff;border:2px solid var(--black);
  border-radius:2px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);}
.steps button[aria-pressed="true"]{background:var(--black);color:#fff;}
input[type=range]{width:100%;margin:22px 0 6px;accent-color:#000;height:44px;}
.viewer__foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);}

/* ================= register (Scene C) ================= */
.reg{border-top:2px solid var(--black);}
.reg__row{border-bottom:1px solid var(--line);}
.reg__btn{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,32px);align-items:center;text-align:left;
  background:none;border:0;padding:clamp(20px,2.4vw,30px) 0;cursor:pointer;}
.reg__n{font-family:var(--head);font-size:15px;color:var(--muted);letter-spacing:.08em;}
.reg__q{font-family:var(--head);font-size:clamp(19px,2.1vw,27px);line-height:1.12;color:var(--black);}
.reg__i{width:26px;height:26px;position:relative;flex:0 0 auto;}
.reg__i::before,.reg__i::after{content:"";position:absolute;background:var(--black);
  transition:transform var(--t-mid) var(--ease);}
.reg__i::before{top:12px;left:0;width:26px;height:2px;}
.reg__i::after{left:12px;top:0;width:2px;height:26px;}
.reg__btn[aria-expanded="true"] .reg__i::after{transform:scaleY(0);}
.reg__p{padding:0 0 clamp(22px,2.6vw,32px);max-width:var(--measure);}
.reg__p[hidden]{display:none;}
.reg__p .label{display:block;margin:18px 0 8px;}

/* ================= even card groups ================= */
/* every card is a grid with the same internal rows, so no card grows
   taller than its neighbours because its copy is one line longer */
.cards{display:grid;gap:2px;background:var(--line);border:2px solid var(--black);}
.cards--3{grid-template-columns:repeat(3,1fr);}
.cards--2{grid-template-columns:repeat(2,1fr);}
.card{background:var(--white);padding:clamp(22px,2.5vw,34px);
  display:grid;grid-template-rows:auto auto 1fr;gap:12px;align-content:start;}
.card__n{font-family:var(--head);font-size:14px;letter-spacing:.1em;color:var(--muted);}
.card h3{font-size:clamp(19px,1.9vw,23px);}
.card p{color:var(--muted);margin:0;}

/* ================= editorial split ================= */
.split{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);align-items:center;}
.split__a{grid-column:1/span 6;}
.split__b{grid-column:8/span 5;}
.split__media{position:relative;border:2px solid var(--black);overflow:hidden;}
.split__media img{width:100%;height:auto;}

/* diagonal plate, the one place the cut runs full-bleed */
.plate{position:relative;background:var(--black);color:#fff;overflow:hidden;
  padding-block:calc(var(--stack) + 2vw);}
.plate::before{content:"";position:absolute;top:-2px;left:0;right:0;height:clamp(50px,7vw,110px);
  background:var(--white);clip-path:polygon(0 0,100% 0,0 100%);}
.plate::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:clamp(50px,7vw,110px);
  background:var(--white);clip-path:polygon(100% 100%,100% 0,0 100%);}
.plate .wrap{position:relative;z-index:2;}

/* ================= law callout ================= */
.law{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.6vw,40px);}
.law__h{grid-column:1/span 5;}
.law__b{grid-column:7/span 6;}
.law dl{margin:0;border-top:2px solid var(--black);}
.law dt{font-family:var(--head);font-size:clamp(17px,1.7vw,20px);padding-top:18px;color:var(--black);}
.law dd{margin:6px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line);color:var(--muted);}
.cite{font-size:13.5px;color:var(--muted);margin-top:18px;}

/* ================= table ================= */
.tablewrap{overflow-x:auto;border:2px solid var(--black);}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px;}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{background:var(--black);color:#fff;font-family:var(--head);font-size:15px;
  letter-spacing:.08em;text-transform:uppercase;}
tbody tr:last-child td{border-bottom:0;}
tbody th{font-weight:700;color:var(--black);width:26%;}

/* ================= form ================= */
.quote{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);}
.quote__intro{grid-column:1/span 4;}
.quote__form{grid-column:6/span 7;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;margin-bottom:16px;}
.field label{font-weight:700;font-size:14px;margin-bottom:7px;}
.field .hint{font-size:13px;color:var(--muted);margin-bottom:7px;}
input[type=text],input[type=email],input[type=tel],select,textarea{
  min-height:52px;padding:13px 15px;background:#fff;border:2px solid var(--charcoal);
  border-radius:2px;width:100%;}
textarea{min-height:110px;resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:var(--black);}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{
  border-color:#000;background:#fff2f2;}
.err{font-size:13.5px;font-weight:700;margin-top:7px;color:#000;}
.err:empty{display:none;}
.formnote{border-left:3px solid var(--black);padding:14px 0 14px 16px;margin-bottom:24px;
  background:var(--gray);font-size:14.5px;}
.status{margin-top:18px;padding:16px;border:2px solid var(--black);font-weight:700;}
.status[hidden]{display:none;}

/* ================= footer ================= */
.foot{background:var(--black);color:#b4babe;padding-block:clamp(48px,6vw,80px) 34px;}
.foot__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,44px);}
.foot__brand{grid-column:1/span 5;}
.foot__brand img{width:calc(var(--logo-visible) * .84 / 0.9209);}
.foot__nav{grid-column:7/span 3;}
.foot__meta{grid-column:10/span 3;}
.foot h4{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;color:#fff;}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin-bottom:9px;}
.foot a{color:#e9ebec;text-decoration:none;}
.foot a:hover{text-decoration:underline;}
.foot__base{margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid #2e3336;
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:13.5px;}

/* ================= mobile action bar ================= */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--white);border-top:2px solid var(--black);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));}
.bar .btn{flex:1;min-height:52px;}
.bar__in{display:flex;gap:10px;max-width:640px;margin:0 auto;}

/* ================= reveals ================= */
.rise{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);}
.rise.is-in{opacity:1;transform:none;}

/* ================= breakpoints ================= */
/* Between these widths the logo plus a single nav row no longer fit without
   shrinking the lockup below its 320px minimum, so the header takes two rows
   instead. The logo keeps its size; the header gains height. */
@media (min-width:901px) and (max-width:1365px){
  .masthead__in{flex-wrap:wrap;row-gap:0;padding-block:14px;min-height:0;}
  .brand{flex:1 0 100%;}
  .nav{margin-left:0;width:100%;justify-content:flex-start;
    gap:clamp(18px,2.4vw,32px);padding-top:12px;margin-top:12px;
    border-top:1px solid var(--line);}
  .nav .btn{margin-left:auto;}
}

@media (max-width:1100px){
  :root{--logo-visible:260px;}
  .split__a{grid-column:1/span 12;}
  .split__b{grid-column:1/span 12;}
  .law__h,.law__b{grid-column:1/span 12;}
  .quote__intro,.quote__form{grid-column:1/span 12;}
  .foot__brand{grid-column:1/span 12;}
  .foot__nav{grid-column:1/span 6;}
  .foot__meta{grid-column:7/span 6;}
}
@media (max-width:900px){
  .masthead__in{min-height:76px;}
  .brand{display:none;}
  .brand--mono{display:block;}
  .nav{display:none;}
  .menu-btn{display:flex;}
  .hero__panelin{grid-template-columns:1fr;align-items:start;}
  /* the mobile stage shows a separately composed crop, with the mask cut
     for that frame rather than the desktop one */
  .hero__glass{--mask:url('/assets/hero-mobile-glassmask-896.png');}
  .hero__media img{object-position:50% 50%;}
  /* On a phone the heading and its actions sit in normal document flow
     beneath the image, rather than overlaying a pinned stage. */
  .hero[data-mode="static"] .hero__stage,
  .hero[data-mode="flow"] .hero__stage{aspect-ratio:auto;height:auto;overflow:visible;}
  .hero[data-mode="static"] .hero__media,
  .hero[data-mode="flow"] .hero__media{position:relative;inset:auto;
    aspect-ratio:4/5;overflow:hidden;}
  /* relative, not static: the panel still flows normally but stays the
     containing block for the diagonal wedge on its top edge */
  .hero[data-mode="static"] .hero__panel,
  .hero[data-mode="flow"] .hero__panel{position:relative;}
  /* the sticky header would clip a label pinned to the top of the stage */
  .hero__note{top:auto;bottom:14px;right:auto;left:var(--gut);}
  .viewer{grid-template-columns:1fr;}
  .cards--3{grid-template-columns:1fr;}
  .cards--2{grid-template-columns:1fr;}
  .bar{display:block;}
  body{padding-bottom:84px;}
  .foot{padding-bottom:104px;}
  /* the hero's own quote button repeats the fixed bar directly beneath it,
     so on small screens the hero keeps only the quieter route into the page */
  .hero__acts .btn:first-child{display:none;}
  .hero__panelin{padding-bottom:clamp(20px,4vw,28px);}
}
@media (max-width:560px){
  :root{--mono-visible:56px;}
  body{font-size:16.5px;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .grid2{grid-template-columns:1fr;}
  .reg__btn{grid-template-columns:minmax(0,1fr) auto;}
  .reg__n{display:none;}
  .foot__nav,.foot__meta{grid-column:1/span 12;}
}

/* short viewports cannot hold a pinned stage comfortably */
@media (max-height:620px){
  .hero[data-fit="short"] .hero__track{height:auto;}
  .hero[data-fit="short"] .hero__stage{position:relative;top:0;height:auto;
    min-height:0;aspect-ratio:16/10;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .rise{opacity:1;transform:none;}
}

@media print{
  .masthead,.bar,.panel,.hero__track{display:none;}
  body{color:#000;}
}