/* ==========================================================================
   Linarez Roofing. Tokens.
   Palette is pulled straight off the logo: navy roofline, rust wordmark,
   copper column. The roof pitch is one number, --slope, used everywhere.
   ========================================================================== */
:root{
  /* sampled straight out of logo.png */
  --navy:#0A2848;           /* the LINAREZ wordmark navy */
  --copper:#A06040;         /* the ROOFING copper */
  --copper-light:#D89060;   /* the highlight edge in the roof mark */

  --ink:#071626;            /* navy taken down for the darkest panels */
  --navy-deep:#0C3055;      /* wordmark navy lifted a step so navy panels read apart from the near-black ones */
  --navy-light:#8FB0DC;     /* navy lifted for text on dark panels */
  --copper-deep:#854E33;    /* copper darkened for button hover */
  --bone:#F4F1EA;
  --white:#FFFFFF;
  --slate:#8A9099;
  --slate-ink:#5C6169;      /* slate darkened for text on light surfaces */
  --alert:#B3261E;          /* form errors only. not a brand color */
  --line-dark:rgba(244,241,234,.16);
  --line-light:rgba(7,22,38,.14);

  --font-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;

  --slope:5.5;                       /* percent of width. one pitch, everywhere */
  --cut:calc(var(--slope) * 1vw);    /* section scale */
  --pad-i:clamp(18px,5vw,64px);
  --sec-pad:clamp(60px,11vw,124px);
  --maxw:1240px;
  --focus:var(--copper);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg{max-width:100%;height:auto}
img{display:block}
[hidden]{display:none !important}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:1px}

/* ---------- type ---------- */
.display{
  font-family:var(--font-display);
  font-weight:800;                 /* the weight the wordmark is set in */
  line-height:1.03;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1.display{font-size:clamp(33px,8.2vw,74px)}
h2.display{font-size:clamp(28px,6.2vw,55px)}
.h2-sm.display{font-size:clamp(25px,5.2vw,41px)}
h3{font-family:inherit;font-weight:600;font-size:clamp(17px,4.2vw,20px);line-height:1.3;letter-spacing:.002em}
p{max-width:64ch}
.lede{font-size:clamp(16.5px,4.1vw,20px);line-height:1.55}
/* the letterspaced label, lifted straight off ROOFING in the lockup */
.mono{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.185em;
  font-size:clamp(10.5px,2.7vw,12.5px);
  line-height:1.5;
}
.mono--tight{letter-spacing:.1em}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--navy);margin-bottom:18px}
.eyebrow::before{content:"";width:clamp(18px,7vw,44px);height:2px;background:currentColor;flex:0 0 auto}
.panel-dark .eyebrow{color:var(--navy-light)}
.panel-navy .eyebrow{color:var(--copper-light)}
.wrapany{overflow-wrap:anywhere}
.mark-accent{color:var(--copper)}
.panel-dark .mark-accent,.panel-navy .mark-accent{color:var(--copper-light)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-i)}
.wrap > *{min-width:0}
.stack > * + *{margin-top:var(--gap,18px)}
.grid{display:grid;gap:var(--gap,18px)}
.grid > *{min-width:0}
.row{display:flex;flex-wrap:wrap;gap:var(--gap,14px)}
.row > *{min-width:0}
section,[id]{scroll-margin-top:96px}
.panel{position:relative;padding-block:var(--sec-pad)}
.panel-dark{background:var(--ink);color:var(--bone);--focus:#F4F1EA}
.panel-navy{background:var(--navy-deep);color:var(--bone);--focus:#F4F1EA}
.panel-light{background:var(--bone);color:var(--ink)}
.muted{color:var(--slate-ink)}
.panel-dark .muted,.panel-navy .muted{color:var(--slate)}

/* ---------- roof pitch edges. one angle, three treatments ---------- */
.cut-top{
  clip-path:polygon(0 var(--cut),100% 0,100% 100%,0 100%);
  margin-top:calc(var(--cut) * -1);
  padding-top:calc(var(--sec-pad) + var(--cut));
}
.cut-bottom{
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);
  padding-bottom:calc(var(--sec-pad) + var(--cut));
}
/* curved return. the shape fills the full width at the bottom so the two
   sections meet on the curve itself, never on a straight seam. */
.curve{position:absolute;left:0;right:0;bottom:-1px;line-height:0;pointer-events:none}
.curve svg{display:block;width:100%;height:clamp(44px,8vw,110px);shape-rendering:geometricPrecision}
.has-curve{padding-bottom:calc(var(--sec-pad) + clamp(44px,8vw,110px))}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;
  font-family:inherit;font-weight:600;
  font-size:clamp(13px,3.3vw,15px);
  letter-spacing:.012em;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  border:2px solid transparent;border-radius:2px;background:none;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn--copper{background:var(--copper);color:#fff;border-color:var(--copper)}
.btn--copper:hover{background:var(--copper-deep);border-color:var(--copper-deep);transform:translateY(-2px)}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover{transform:translateY(-2px);background:rgba(244,241,234,.08)}
.panel-light .btn--ghost:hover{background:rgba(7,22,38,.06)}
.btn--solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn--solid:hover{transform:translateY(-2px);background:var(--navy-deep);border-color:var(--navy-deep)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* Phosphor icons are filled shapes on a 256 grid, so they take currentColor
   as a fill rather than a stroke. */
.icon{width:20px;height:20px;flex:0 0 auto;fill:currentColor;stroke:none}
.icon--sm{width:16px;height:16px}
.icon--lg{width:26px;height:26px}
/* brand marks bring their own colors, so nothing here recolors them */
.brand-icon{width:24px;height:24px;flex:0 0 auto;display:block}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:8px;top:8px;z-index:200;
  transform:translateY(-160%);
  background:var(--navy);color:#fff;padding:12px 16px;border-radius:2px;
  text-decoration:none;font-weight:600;
  transition:transform .18s ease;
}
.skip:focus{transform:translateY(0)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  color:var(--ink);
  border-bottom:1px solid var(--line-light);
}
.hdr__bar{
  display:flex;align-items:center;gap:8px;
  max-width:var(--maxw);margin-inline:auto;
  padding:10px clamp(12px,4vw,64px);
  transition:padding .22s ease;
}
.hdr__bar > *{min-width:0}
.hdr.is-compact .hdr__bar{padding-block:8px}
/* LOGO SLOT. sized by height so the lockup keeps its own aspect ratio.
   one size at every scroll position, so no compact override here.
   while the slot is empty it holds the lockup's footprint open, so nothing
   shifts on the page when the real file drops in. */
.logoslot{
  flex:0 0 auto;
  display:flex;align-items:center;
  height:clamp(72px,17vw,98px);
  margin-inline-start:clamp(6px,2vw,14px);
  text-decoration:none;
}
.logoslot:empty{aspect-ratio:1.47 / 1}
.logoslot img{height:100%;width:auto;display:block}
.hdr__spacer{flex:1 1 auto}
.hdr__nav{display:none}
.hdr .btn{min-height:44px;padding:10px 14px;font-size:clamp(11.5px,3vw,14px)}
/* the one header action: call. shown at every width */
.hdr__cta{gap:8px}
.hdr__cta .icon{width:17px;height:17px}
/* the full label needs room, so narrow screens get the short one */
.hdr__cta-long{display:none}
@media (min-width:520px){
  .hdr__cta-long{display:inline}
  .hdr__cta-short{display:none}
}
@media (min-width:620px){
  .hdr .btn{padding:12px 20px}
  .hdr__cta .icon{width:19px;height:19px}
}
@media (min-width:1000px){
  .hdr__nav{display:flex;gap:clamp(14px,2vw,26px);align-items:center;margin-inline:auto}
  .hdr__nav a{
    text-decoration:none;font-size:14px;font-weight:400;
    padding:10px 2px;white-space:nowrap;
    border-bottom:2px solid transparent;
    transition:border-color .18s ease,color .18s ease;
  }
  .hdr__nav a:hover{border-bottom-color:var(--copper);color:var(--navy)}
  .hdr__spacer{display:none}
}

/* ---------- image frames. same pitch, measured against the frame ---------- */
.frame{container-type:inline-size;position:relative}
.frame__clip{
  position:relative;overflow:hidden;
  clip-path:polygon(0 calc(var(--slope) * 1cqi),100% 0,100% calc(100% - (var(--slope) * 1cqi)),0 100%);
  background:var(--navy-deep);
}
.frame__clip img{width:100%;height:100%;object-fit:cover;will-change:transform}
.frame--tall .frame__clip{aspect-ratio:4/5}
.frame--wide .frame__clip{aspect-ratio:5/4}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(10,40,72,.62),transparent 62%),
    linear-gradient(180deg,#071626 0%,#0F2942 100%);
}
.hero__grid{display:grid;gap:clamp(30px,7vw,56px);align-items:center}
.hero__cta{--gap:12px;margin-top:26px}
.hero__cta .btn{flex:1 1 auto}
.trust{
  margin-top:26px;padding-top:16px;
  border-top:1px solid var(--line-dark);
  color:var(--slate);
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;
}
.trust li{display:flex;align-items:center;gap:12px;white-space:nowrap}
.trust li + li::before{content:"/";color:var(--copper);margin-right:2px}
.hero__art{position:relative}
.hero__art .frame__clip{aspect-ratio:1/1}
.hero__tag{
  position:absolute;left:0;bottom:clamp(-14px,-2vw,-10px);
  background:var(--copper);color:#fff;
  padding:9px 14px;max-width:calc(100% - 24px);
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,64px)}
  .hero__cta .btn{flex:0 0 auto}
  .hero__art{margin-right:calc(var(--pad-i) * -1)}  /* bleeds to the viewport edge */
  .hero__art .frame__clip{aspect-ratio:1/1}
}

/* ---------- service cards ---------- */
.cards{--gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.panel-light .cards{background:var(--line-light);border-color:var(--line-light)}
.card{
  background:var(--ink);padding:clamp(22px,5vw,34px);
  display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,background-color .2s ease;
}
.panel-light .card{background:var(--bone)}
.card:hover{transform:translateY(-3px);background:#0F2740}
.panel-light .card:hover{background:#EDE8DD}
/* ICON SLOT.
   Drop any SVG inside a .iconslot span and it sizes and colors itself.
   Monochrome sets inherit the slot color through currentColor.
   Sets with their own fills keep their own fills. Any viewBox works. */
.iconslot{display:block;width:38px;height:38px;flex:0 0 auto;color:var(--navy)}
.panel-dark .iconslot{color:var(--navy-light)}
.panel-navy .iconslot{color:var(--copper-light)}
.iconslot > svg{display:block;width:100%;height:100%;fill:currentColor}
.card p{font-size:15px;color:var(--slate)}
.panel-light .card p{color:var(--slate-ink)}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}

/* ---------- material systems ---------- */
.materials{
  margin-top:clamp(46px,8vw,80px);padding-top:clamp(34px,6vw,54px);
  border-top:1px solid var(--line-light);
}
.mats{--gap:1px;background:var(--line-light);border:1px solid var(--line-light);margin-top:clamp(24px,4vw,36px)}
.mat{
  background:var(--bone);padding:clamp(20px,4.4vw,30px);
  display:flex;flex-direction:column;gap:8px;
  transition:background-color .2s ease;
}
.mat:hover{background:#EDE8DD}
.mat b{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,4.6vw,23px);line-height:1.15;letter-spacing:-.01em}
.mat span{color:var(--slate-ink);font-size:15px}
.mat .mono{color:var(--copper);font-size:clamp(10.5px,2.7vw,12.5px)}
@media (min-width:640px){.mats{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.mats{grid-template-columns:repeat(3,1fr)}}

/* ---------- story ---------- */
.story__grid{display:grid;gap:clamp(28px,6vw,52px);align-items:start}
.pull{
  font-family:var(--font-display);
  font-size:clamp(21px,5vw,33px);
  font-weight:700;line-height:1.25;letter-spacing:-.012em;
  text-wrap:balance;max-width:22ch;
  border-left:3px solid var(--copper);
  padding-left:clamp(14px,3.5vw,26px);
}
.pull cite{display:block;font-style:normal;margin-top:16px}
@media (min-width:900px){
  .story__grid{grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,72px)}
  .story__art{margin-left:calc(var(--pad-i) * -1);margin-top:calc(var(--cut) * -1.4)}
  .story__body{padding-top:clamp(10px,2vw,30px)}
}

/* ---------- guarantee ---------- */
.promise{--gap:1px;background:rgba(244,241,234,.18)}
.promise li{background:var(--navy-deep);padding:clamp(20px,4.5vw,30px);display:flex;gap:16px;align-items:flex-start}
.promise .promise__icon{
  width:clamp(30px,7vw,38px);height:clamp(30px,7vw,38px);flex:0 0 auto;
  color:var(--copper-light);
}
.promise .promise__icon svg{display:block;width:100%;height:100%;fill:currentColor}
.promise .num{
  font-family:var(--font-display);font-weight:700;letter-spacing:.18em;
  font-size:12px;color:var(--copper-light);display:block;margin-bottom:6px;
}
.promise p{font-size:clamp(15px,3.8vw,17px);max-width:38ch}
@media (min-width:760px){.promise{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1140px){.promise{grid-template-columns:repeat(4,1fr)}}
.callout{
  margin-top:clamp(26px,5vw,42px);padding:clamp(20px,4.5vw,28px);
  border:1px solid var(--line-dark);border-left:3px solid var(--copper);
  background:rgba(7,22,38,.35);
  display:flex;gap:16px;align-items:flex-start;
}
.callout .icon{width:26px;height:26px;color:var(--copper-light);margin-top:2px}

/* ---------- how it works ---------- */
.steps{--gap:0}
.step{
  display:grid;gap:6px 20px;
  padding:clamp(20px,4.5vw,30px) 0;
  border-top:1px solid var(--line-dark);
  grid-template-columns:auto 1fr;
}
.step:last-child{border-bottom:1px solid var(--line-dark)}
.step .num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,8vw,58px);line-height:.85;
  color:var(--copper);grid-row:span 2;
}
.step p{color:var(--slate);font-size:15px;max-width:52ch}
@media (min-width:820px){
  .step{grid-template-columns:auto 1fr 1.4fr;align-items:baseline}
  .step .num{grid-row:auto}
  .step p{margin-top:0}
}

/* ---------- reviews ---------- */
.rev__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;justify-content:space-between;margin-bottom:clamp(22px,4vw,34px)}
.rev__nav{display:flex;gap:8px}
.iconbtn{
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--line-light);background:transparent;border-radius:2px;cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
.panel-dark .iconbtn,.panel-navy .iconbtn{border-color:var(--line-dark)}
.iconbtn:hover{background:var(--ink);color:var(--bone);transform:translateY(-2px)}
.iconbtn .icon{width:22px;height:22px}
.rev__viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.rev__viewport::-webkit-scrollbar{display:none}
.rev__track{display:flex;gap:16px;padding-bottom:4px;width:max-content}
.rev__card{
  flex:0 0 auto;width:min(84vw,400px);min-height:250px;
  background:#fff;color:var(--ink);border:1px solid var(--line-light);
  padding:clamp(22px,5vw,32px);
  display:flex;flex-direction:column;gap:16px;
}
.stars{display:flex;gap:3px;color:var(--copper)}
.stars .icon{width:17px;height:17px;fill:currentColor;stroke:none}
.rev__quote{font-size:16px;line-height:1.55}
.rev__mark{width:26px;height:26px;color:var(--copper);opacity:.5}
.rev__mark svg{display:block;width:100%;height:100%;fill:currentColor}
.rev__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-light);display:flex;align-items:center;gap:10px;color:var(--slate-ink)}
.rev__meta .gmark{width:18px;height:18px;flex:0 0 auto;display:block}
.rev__where{margin-left:auto;white-space:nowrap}

/* ---------- project gallery ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,4vw,32px) 0 clamp(20px,3.5vw,28px)}
.chip{
  min-height:42px;padding:9px 16px;cursor:pointer;
  border:1px solid var(--line-light);border-radius:2px;background:transparent;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:clamp(10.5px,2.7vw,12px);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.gal{--gap:clamp(14px,2.6vw,22px)}
.gal figure{margin:0}
.gal figcaption{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;margin-top:12px}
.gal__scope{font-weight:600;font-size:clamp(15.5px,3.8vw,17px)}
.gal__place{color:var(--slate-ink);font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(10.5px,2.7vw,12px)}
.gal .frame__clip{aspect-ratio:4/5}
.gal__empty{color:var(--slate-ink);padding:20px 0}
@media (min-width:640px){.gal{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}

/* ---------- service area ---------- */
.area__grid{display:grid;gap:clamp(28px,6vw,48px);align-items:center}
.area__note{margin-top:20px;color:var(--slate)}
.coverage{
  border:1px solid var(--line-dark);
  background:linear-gradient(180deg,rgba(10,40,72,.42) 0%,rgba(7,22,38,.25) 100%);
  padding:clamp(20px,4.5vw,32px);
}
.coverage__label{color:var(--slate);display:flex;align-items:center;gap:9px}
.coverage__list{margin-top:4px}
.coverage__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line-dark);
}
.coverage__list li .mono{color:var(--slate);white-space:nowrap}
.coverage__city{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,4.8vw,28px);line-height:1.15;letter-spacing:-.012em}
.coverage__cta{display:flex;flex-direction:column;gap:6px;margin-top:22px;text-decoration:none}
.coverage__cta .mono{color:var(--slate)}
.coverage__tel{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,5.6vw,34px);line-height:1.1;white-space:nowrap;
}
.coverage__cta:hover .coverage__tel{color:var(--copper-light)}
@media (min-width:860px){
  .area__grid{grid-template-columns:1.15fr .85fr}
}

/* ---------- quiz form ---------- */
.quiz{
  background:#fff;border:1px solid var(--line-light);
  padding:clamp(20px,5vw,44px);
  max-width:820px;
}
.quiz__bar{height:4px;background:rgba(7,22,38,.1);overflow:hidden}
.quiz__fill{display:block;height:100%;width:0;background:var(--copper);transition:width .3s ease}
.quiz__meta{display:flex;justify-content:space-between;gap:12px;color:var(--slate-ink);margin:12px 0 22px}
.quiz legend{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,4.8vw,28px);line-height:1.2;letter-spacing:-.012em;
  padding:0;margin-bottom:6px;text-wrap:balance;
}
.quiz fieldset{border:0;padding:0;margin:0}
.quiz__hint{color:var(--slate-ink);font-size:14.5px;margin-bottom:18px}
.opts{display:grid;gap:10px}
@media (min-width:560px){.opts--2{grid-template-columns:1fr 1fr}}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{
  display:flex;align-items:center;gap:12px;min-height:52px;
  padding:12px 16px;border:1px solid var(--line-light);
  cursor:pointer;font-size:15.5px;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease;
}
.opt span::before{
  content:"";width:16px;height:16px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--slate);transition:border-width .16s ease,border-color .16s ease;
}
.opt input:checked + span{border-color:var(--ink);background:#F6F3EC;transform:translateY(-1px)}
.opt input:checked + span::before{border-width:5px;border-color:var(--copper)}
.opt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:14.5px;font-weight:600}
.field input{
  min-height:52px;padding:12px 14px;
  border:1px solid var(--line-light);border-radius:2px;background:#fff;
  font-size:16px;width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field input:hover{border-color:var(--slate)}
.field input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,40,72,.18);outline:none}
.field input[aria-invalid="true"]{border-color:var(--alert);box-shadow:0 0 0 3px rgba(179,38,30,.16)}
.field__err{color:var(--alert);font-size:13.5px;min-height:0}
@media (min-width:620px){.fields-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}}
.quiz__err{
  color:var(--alert);font-size:14.5px;margin-top:14px;
  display:flex;gap:8px;align-items:flex-start;
}
/* consent, sits directly above the submit button */
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;cursor:pointer}
.consent input{
  width:20px;height:20px;flex:0 0 auto;margin:2px 0 0;
  accent-color:var(--copper);cursor:pointer;
}
.consent span{font-size:13.5px;line-height:1.5;color:var(--slate-ink);max-width:62ch}
.consent a{color:var(--navy);text-underline-offset:2px}
.consent input[aria-invalid="true"] + span{color:var(--alert)}
.quiz__nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-light)}
.quiz__nav .btn{flex:1 1 auto}
@media (min-width:560px){.quiz__nav .btn{flex:0 0 auto}.quiz__nav .btn--copper{margin-left:auto}}
.result{padding:clamp(6px,2vw,14px) 0}
.result h3{font-family:var(--font-display);font-size:clamp(22px,5vw,31px);font-weight:700;letter-spacing:-.012em;margin-bottom:12px}
.result__icon{width:46px;height:46px;color:var(--copper);margin-bottom:16px}
.result__icon svg{display:block;width:100%;height:100%;fill:currentColor}

/* ---------- schedule page intro ---------- */
.sched{
  background:
    radial-gradient(120% 90% at 88% 8%,rgba(10,40,72,.62),transparent 62%),
    linear-gradient(180deg,#071626 0%,#0F2942 100%);
  padding-bottom:calc(var(--sec-pad) + var(--cut));
}
.sched__points{--gap:14px;margin-top:clamp(28px,5vw,40px)}
.sched__points li{
  display:flex;gap:12px;align-items:center;
  padding:14px 16px;
  border:1px solid var(--line-dark);
  background:rgba(10,40,72,.35);
  font-size:15px;
}
.sched__points .icon{width:24px;height:24px;color:var(--copper-light)}
@media (min-width:640px){.sched__points{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.sched__points{grid-template-columns:repeat(4,1fr)}}

/* ---------- next step, one per reading section ---------- */
.section-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(28px,5vw,44px)}
.section-cta > *{min-width:0}
.section-cta .btn{flex:1 1 auto}
.section-cta__note{flex:1 1 100%;font-size:15px;color:var(--slate-ink);max-width:46ch}
.panel-dark .section-cta__note,.panel-navy .section-cta__note{color:var(--slate)}
@media (min-width:560px){
  .section-cta .btn{flex:0 0 auto}
  .section-cta__note{flex:1 1 auto;order:2;margin-left:4px}
}
.card__cta{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  min-height:44px;font-size:15px;font-weight:600;
  color:var(--navy);text-decoration:none;
}
.panel-dark .card__cta{color:var(--navy-light)}
.card__cta .icon{transition:transform .18s ease}
.card__cta:hover{color:var(--copper)}
.panel-dark .card__cta:hover{color:var(--copper-light)}
.card__cta:hover .icon{transform:translateX(4px)}

/* ---------- booking reasons, the ramp into the form ---------- */
.startrow{margin-bottom:clamp(26px,5vw,40px)}
.startrow__label{color:var(--slate-ink);margin-bottom:12px}
.book{--gap:12px}
.bookcard{
  background:#fff;border:1px solid var(--line-light);text-align:left;cursor:pointer;color:inherit;
  padding:clamp(18px,4vw,24px);
  display:flex;flex-direction:column;gap:8px;min-height:126px;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease;
}
.bookcard:hover{transform:translateY(-3px);border-color:var(--ink)}
.bookcard[aria-pressed="true"]{border-color:var(--copper);box-shadow:inset 0 0 0 1px var(--copper)}
.bookcard .icon{width:28px;height:28px;color:var(--copper);transition:transform .2s ease}
.bookcard:hover .icon{transform:translateY(-2px) scale(1.06)}
.bookcard b{font-weight:600;font-size:clamp(16px,4vw,18px)}
.bookcard span{color:var(--slate-ink);font-size:14.5px}
@media (min-width:640px){.book{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.book{grid-template-columns:repeat(4,1fr)}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line-light);max-width:900px}
.faq details{border-bottom:1px solid var(--line-light)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:20px 0;display:flex;gap:16px;align-items:center;justify-content:space-between;
  font-size:clamp(16px,4vw,19px);font-weight:600;min-height:44px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{transition:transform .2s ease;color:var(--navy)}
.faq details[open] summary .icon{transform:rotate(90deg)}
.faq p{padding:0 0 22px;color:var(--slate-ink);max-width:70ch}
.panel-navy .faq,.panel-navy .faq details{border-color:var(--line-dark)}
.panel-navy .faq summary .icon{color:var(--copper-light)}
.panel-navy .faq p{color:var(--slate)}

/* ---------- footer ---------- */
.foot{background:var(--white);color:var(--ink)}
.foot__mark{margin:0 0 4px}
.foot__mark img{height:clamp(74px,17vw,96px);width:auto}
.foot__grid{display:grid;gap:clamp(28px,6vw,44px)}
.foot h3{font-weight:600}
.foot__title{font-size:clamp(17px,4vw,19px);margin-bottom:14px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--navy)}
.foot__tel{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,6vw,38px);line-height:1.1;white-space:nowrap;
  text-decoration:none;display:inline-block;
}
.foot__list li{color:var(--slate-ink);margin-bottom:8px}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
/* full color brand marks, so the tile stays neutral and only lifts on hover */
.social{
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line-light);background:var(--white);
  text-decoration:none;border-radius:2px;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.social:hover{border-color:var(--slate);transform:translateY(-2px);box-shadow:0 6px 16px rgba(7,22,38,.12)}
.foot__legal{
  margin-top:clamp(34px,6vw,56px);padding-top:22px;
  border-top:1px solid var(--line-light);
  display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--slate-ink);
}
@media (min-width:760px){.foot__grid{grid-template-columns:1.1fr .95fr .95fr}}

/* ---------- motion ----------
   One base reveal plus four directions. Anything with .reveal starts hidden
   and animates once, the first time it crosses into view. */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal--left{transform:translateX(-34px)}
.reveal--right{transform:translateX(34px)}
.reveal--zoom{transform:scale(.94)}
.reveal--fade{transform:none}
.reveal.is-in{opacity:1;transform:none}
/* headings that wipe their rule in as the section lands */
.eyebrow::before{transform-origin:left center;transform:scaleX(0);transition:transform .6s ease .12s}
.eyebrow.is-in::before,.is-in .eyebrow::before,.reveal.is-in .eyebrow::before{transform:scaleX(1)}
/* thin read-progress rule that fills across the top as the page scrolls */
.progress{
  position:fixed;left:0;top:0;z-index:150;height:3px;width:100%;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--copper),var(--copper-light));
  pointer-events:none;
}
/* photographs and panels ease up a touch as they enter */
.lift{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.noscript{border:1px solid var(--line-light);padding:16px;margin-bottom:20px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0ms !important;
  }
  .reveal{opacity:1;transform:none}
  .eyebrow::before{transform:scaleX(1)}
  .progress{display:none}
  .btn:hover,.card:hover,.iconbtn:hover,.bookcard:hover,.social:hover{transform:none}
  .frame__clip img{transform:none !important}
}