/* ============================================================
   TR3ES 001 — additions
   Header, data strip, permanence statement, register, process,
   FAQ and the closing mark. Extends style.css, never replaces it.
   ============================================================ */

/* ---------- self-hosted faces: no third-party request ---------- */
@font-face{font-family:"Michroma";font-style:normal;font-weight:400;font-display:swap;
  src:url("../font/michroma.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../font/plexmono-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:200;font-display:swap;
  src:url("../font/archivo-200.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:300;font-display:swap;
  src:url("../font/archivo-300.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("../font/archivo-400.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;
  src:url("../font/archivo-500.woff2") format("woff2")}

/* ============ HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:82;height:var(--hdr-h,68px);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);
  background:linear-gradient(to bottom,rgba(5,5,6,.9),rgba(5,5,6,0));
  transform:translateY(-101%);opacity:0;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out),
             background .3s var(--ease-out),border-color .3s var(--ease-out);
  border-bottom:1px solid transparent;
}
.hdr.on{transform:none;opacity:1}
.hdr.solid{background:rgba(5,5,6,.94);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border-bottom-color:var(--hair)}
.hdr__b{display:flex;align-items:center;gap:.6rem;flex:none}
.hdr__b .mk{width:auto;height:clamp(24px,2.6vw,30px)}
.hdr__b .wd{width:auto;height:clamp(13px,1.5vw,17px);margin-bottom:1px;opacity:.9}
.hdr__n{display:none;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem)}
@media (min-width:940px){.hdr__n{display:flex}}
.hdr__n a{position:relative;padding:.55rem 0;color:var(--mute);
  transition:color .2s var(--ease-out)}
.hdr__n a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease-out)}
.hdr__n a.here{color:var(--chrome)}
.hdr__n a.here::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .hdr__n a:hover{color:var(--chrome)}
  .hdr__n a:hover::after{transform:scaleX(1)}
}
.hdr__cta{display:inline-flex;align-items:center;gap:.6rem;min-height:38px;flex:none;
  padding:0 1.05rem;border-radius:999px;border:1px solid var(--hair-2);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;
  transition:border-color .25s var(--ease-out),background .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .hdr__cta:hover{border-color:var(--hair-2);background:rgba(213,217,222,.08)}}
.hdr__cta:active{transform:scale(.98)}
.hdr__cta i{width:5px;height:5px;border-radius:50%;background:#7FC08C;flex:none}
.prog{position:fixed;top:0;left:0;height:1px;width:0;z-index:83;background:var(--ember);opacity:.9}

/* the floating brand and bottom button belong to the pre-header era */
.brand{display:none}

/* ============ STATUS PILL ============ */
.stat{display:inline-flex;align-items:center;gap:.55rem;height:30px;padding:0 .85rem 0 .7rem;
  border-radius:999px;border:1px solid rgba(213,217,222,.22);background:rgba(5,5,6,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome);margin-bottom:1rem;width:fit-content}
.stat i{width:5px;height:5px;border-radius:50%;background:#7FC08C;flex:none;
  box-shadow:0 0 0 0 rgba(127,192,140,.5);animation:live 2.8s ease-out infinite}

/* ============ DATA STRIP ============ */
.strip{border-block:1px solid var(--hair);overflow:hidden;padding-block:1.15rem;
  background:var(--black)}
.strip__t{display:flex;width:max-content;will-change:transform;
  animation:strip var(--strip-dur,52s) linear infinite}
.strip span{display:inline-flex;align-items:baseline;gap:.6rem;white-space:nowrap;
  padding-inline:clamp(1.1rem,2.6vw,2.4rem);
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute)}
.strip b{font-family:"Michroma",sans-serif;font-weight:400;font-size:.78rem;
  letter-spacing:-.01em;color:var(--chrome)}
.strip s{text-decoration:none;color:var(--hair-2)}
@keyframes strip{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--strip-w,50%) * -1),0,0)}}
@media (prefers-reduced-motion:reduce){.strip__t{animation:none}}

/* ============ PERMANENCE STATEMENT ============ */
.said{background:var(--graphite);border-block:1px solid var(--hair)}
.said .wrap{padding-block:clamp(4rem,11vh,8rem)}
.said__q{font-family:"Michroma",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,1rem + 2.3vw,3rem);line-height:1.22;letter-spacing:-.012em;
  color:#fff;max-width:16ch}
.said__s{color:var(--mute);margin-top:clamp(1.2rem,3vw,2rem);max-width:44ch}

/* ============ REGISTER — three things must agree ============ */
.agree{display:grid;gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(1.6rem,4vw,2.6rem)}
@media (min-width:760px){.agree{grid-template-columns:repeat(3,1fr)}}
.agree > div{border-top:1px solid var(--hair);padding-top:1rem}
.agree b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:.66rem;
  letter-spacing:.24em;color:var(--ember-txt);margin-bottom:.6rem}
.agree p{color:var(--chrome);font-size:.95rem;max-width:26ch}

/* ============ PROCESS — enquiry, viewing, handover ============ */
.flow{display:grid;gap:0;margin-top:clamp(1.8rem,4.5vw,3rem);
  border-top:1px solid var(--hair)}
@media (min-width:820px){.flow{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}}
.flow > div{border-bottom:1px solid var(--hair);padding-block:1.35rem}
@media (min-width:820px){.flow > div{border-bottom:0;padding-block:1.5rem 0}}
.flow__n{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.24em;
  color:var(--low);display:block;margin-bottom:.85rem}
.flow__t{font-family:"Michroma",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:.86rem;letter-spacing:-.01em;color:#fff;display:block;margin-bottom:.5rem}
.flow p{color:var(--mute);font-size:.92rem;max-width:30ch}

/* ============ FAQ ============ */
.faq{display:grid;margin-top:clamp(1.8rem,4.5vw,3rem);border-top:1px solid var(--hair)}
.faq__i{border-bottom:1px solid var(--hair)}
.faq__q{display:flex;align-items:center;gap:1.2rem;width:100%;text-align:left;
  padding:1.25rem 0;color:var(--chrome);font-size:clamp(.98rem,.94rem + .3vw,1.1rem);
  font-weight:300;transition:color .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.faq__q:hover{color:#fff}}
.faq__q span{flex:1}
.faq__s{position:relative;width:12px;height:12px;flex:none}
.faq__s::before,.faq__s::after{content:"";position:absolute;background:var(--mute);
  transition:transform .26s var(--ease-drawer),background .2s var(--ease-out)}
.faq__s::before{top:5.5px;left:0;width:12px;height:1px}
.faq__s::after{left:5.5px;top:0;width:1px;height:12px}
.faq__q[aria-expanded="true"] .faq__s::after{transform:scaleY(0)}
.faq__q[aria-expanded="true"] .faq__s::before{background:var(--ember)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease-drawer)}
.faq__i.open .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{color:var(--mute);max-width:52ch;padding-bottom:1.4rem;font-size:.95rem}

/* ============ CLOSING MARK ============ */
.mark-end{text-align:center;padding-block:clamp(4.5rem,13vh,9rem);
  border-top:1px solid var(--hair)}
.mark-end h2{font-family:"Michroma",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,1rem + 4.6vw,5.4rem);line-height:1.06;letter-spacing:-.02em;
  color:#fff}
.mark-end img{width:clamp(120px,17vw,190px);height:auto;margin:clamp(2rem,5vw,3.4rem) auto 0;
  opacity:.6}

/* ============ FORM — rebuilt ============ */
.form{display:grid;gap:0;max-width:640px;margin-top:clamp(2rem,5vw,3.2rem)}
.field{display:grid;gap:.4rem;border-bottom:1px solid var(--hair);padding-block:1.15rem .2rem;
  transition:border-color .22s var(--ease-out)}
.field:focus-within{border-bottom-color:var(--hair-2)}
.field input,.field textarea{width:100%;background:none;border:0;outline:0;color:#fff;
  font-family:inherit;font-weight:300;font-size:1rem;padding:.25rem 0 .95rem;resize:none}
.field textarea{min-height:92px}
.field input::placeholder,.field textarea::placeholder{color:#4A4E53}
.pick{border:0;padding:1.5rem 0 .2rem;display:grid;gap:.55rem}
.pick legend{padding:0;margin-bottom:.9rem}
.pick label{display:flex;align-items:center;gap:.8rem;cursor:pointer;color:var(--mute);
  font-size:.95rem;padding:.5rem 0;transition:color .2s var(--ease-out)}
.pick input{appearance:none;width:15px;height:15px;border-radius:50%;flex:none;
  border:1px solid var(--hair-2);transition:border-color .2s var(--ease-out),
  box-shadow .2s var(--ease-out)}
.pick input:checked{border-color:var(--ember);box-shadow:inset 0 0 0 3.5px var(--ember)}
.pick label:has(input:checked){color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  min-height:52px;padding:0 2rem;margin-top:2rem;border-radius:999px;justify-self:start;
  background:var(--blossom);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .22s var(--ease-out),transform .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.send:hover{background:#A5141E}}
.send:active{transform:scale(.985)}
.send[disabled]{opacity:.55;pointer-events:none}
.done{display:none;margin-top:2rem;padding:1.6rem;border:1px solid var(--hair);
  background:var(--steel);max-width:640px}
.done.on{display:block}
.done p{color:var(--mute);margin-top:.7rem;max-width:46ch}

@media (prefers-reduced-motion:reduce){
  .hdr{transition-duration:.15s}
  .stat i{animation:none}
}

/* ---------- hero: the pill needs its own line above the eyebrow ---------- */
.hero__ui .stat{display:inline-flex;margin-bottom:.85rem}
.hero__ui .stat + .m{display:block;margin-bottom:.55rem}

/* the scroll cue sat mid-height on the left, where the new header makes it
   read as a stray label. It belongs next to the thing it points at. */
.cue{top:auto;bottom:clamp(1.3rem,3.4vw,2.4rem);transform:none;
  left:auto;right:var(--gut);justify-items:center}
.cue i{justify-self:center}
@media (max-width:859px){.cue{display:none}}

/* ---------- mobile menu ----------
   Below 940px the section links are hidden, which on a 11,000px page
   left the visitor with no way to reach the register or the questions
   except by scrolling the whole thing. */
.hdr__m{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;align-items:flex-end;margin-right:-.5rem;flex:none}
@media (min-width:940px){.hdr__m{display:none}}
.hdr__m i{display:block;width:20px;height:1px;background:var(--chrome);
  transition:transform .3s var(--ease-out),opacity .2s var(--ease-out)}
.hdr__m[aria-expanded="true"] i:first-child{transform:translateY(3px) rotate(45deg)}
.hdr__m[aria-expanded="true"] i:last-child{transform:translateY(-3px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:81;background:rgba(5,5,6,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:grid;align-content:center;gap:.2rem;padding:var(--gut);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility 0s linear .3s}
.menu.on{opacity:1;visibility:visible;transition-delay:0s}
.menu a{display:flex;align-items:baseline;gap:1rem;padding:1.05rem 0;
  border-bottom:1px solid var(--hair);
  font-family:"Michroma",sans-serif;font-size:1.02rem;text-transform:uppercase;
  letter-spacing:-.01em;color:#fff}
.menu a b{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:.62rem;
  letter-spacing:.22em;color:var(--low);flex:none;width:2.2rem}
.menu a:last-of-type{border-bottom:0}
.menu .m{margin-bottom:1.6rem}
body.menuopen{overflow:hidden}

/* ---------- mobile header: with the links hidden, space-between left the
     Enquire pill stranded in the middle. Group the controls right. ---------- */
@media (max-width:939px){
  .hdr__cta{margin-left:auto;margin-right:.35rem}
  .hdr__b .wd{height:14px}
}

/* the hero title bottomed out at 1.5rem on a phone, too small to lead */
@media (max-width:640px){
  .hero__t{font-size:clamp(2rem,8.6vw,3rem);max-width:11ch}
}

/* ============ THE STATEMENT — set as a quote, not a paragraph ============ */
.said{background:var(--graphite);border-block:1px solid var(--hair);position:relative;
  overflow:hidden}
.said .wrap{padding-block:clamp(5rem,15vh,11rem);position:relative;z-index:2}
.quote{position:relative;margin:0;display:grid;justify-items:center;text-align:center}
/* the mark collided with the first line when it sat above it — it works as a
   watermark centred behind the whole quote instead */
.quote__mk{position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);
  font-family:"Bodoni Moda",Georgia,serif;
  font-size:clamp(16rem,38vw,34rem);line-height:1;color:var(--chrome);opacity:.038;
  pointer-events:none;user-select:none;z-index:1}
.quote__b{margin:0;display:grid;gap:.06em;position:relative;z-index:2}
.quote__b span{display:block;font-family:"Michroma",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-.015em;line-height:1.16;
  font-size:clamp(1.25rem,.55rem + 3.4vw,3.4rem);color:var(--chrome)}
.quote__hi{color:#fff!important;
  background:linear-gradient(160deg,#fff 0%,#C3C9CF 22%,#7A8188 44%,#fff 57%,#8F969D 74%,#F4F7F9 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.quote__c{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
  margin-top:clamp(1.8rem,4.5vw,3rem)}
.quote__rule{width:clamp(28px,5vw,56px);height:1px;background:var(--ember);flex:none}
.quote__s{color:var(--mute);max-width:52ch;margin:clamp(2.4rem,6vw,4rem) auto 0;
  text-align:center}
@media (max-width:620px){.quote__b span{font-size:clamp(1.15rem,6.4vw,1.8rem)}}

/* Bodoni is loaded for the quotation mark alone */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;
  src:url("../font/bodoni-400.woff2") format("woff2")}

/* ============ PLATES — regrid ============
   The old 12-column map put both red macros on one row and both silver
   ones on the next. This map mixes every row and steps the sizes, and
   the offsets are small enough not to open holes in the column. */
@media (min-width:860px){
  .plates{grid-template-columns:repeat(12,1fr);
    gap:clamp(2.4rem,4.5vw,4rem) clamp(1.2rem,3vw,2.6rem);
    align-items:start}
  .p-a{grid-column:1/8}                    /* canopy — red, wide */
  .p-b{grid-column:9/13;margin-top:16%}    /* structure — silver, dropped */
  .p-c{grid-column:1/6}                    /* trunk — silver, small */
  .p-d{grid-column:7/13;margin-top:-6%}    /* the whole work — object, wide */
  .p-e{grid-column:1/7;margin-top:-2%}     /* leaf — red */
  .p-f{grid-column:8/13;margin-top:10%}    /* branch — silver, dropped */
}
.wide{margin-top:clamp(2.6rem,6vw,5rem)}
.plates figure{align-self:start}
.plates figcaption{display:grid;gap:.35rem}

/* ---------- section intros: a short line alone at far left left two thirds
     of the row empty. Pair it with the supporting text. ---------- */
.split{display:grid;gap:clamp(1rem,2.5vw,2rem);align-items:start}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    gap:clamp(2rem,6vw,6rem)}
  .split .lede{max-width:18ch}
  .split .txt{max-width:52ch;padding-top:.45rem}
}

/* ============ FORM — as a panel, not a stack of loose lines ============ */
.form{display:block;max-width:720px;margin-top:clamp(2.4rem,6vw,3.6rem);
  background:var(--black);border:1px solid var(--hair)}
.form__head{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.1rem clamp(1.2rem,3vw,2.2rem);border-bottom:1px solid var(--hair);
  background:var(--steel)}
.form__body{padding:.4rem clamp(1.2rem,3vw,2.2rem) 1.8rem}
.form__row{display:grid;gap:0}
@media (min-width:640px){.form__row{grid-template-columns:1fr 1fr;gap:0 clamp(1.2rem,3vw,2rem)}}

/* the fine print sat directly beneath the button, reading like a disclaimer
   glued to it. It gets its own bay, separated by a rule. */
.form__foot{display:grid;gap:1.2rem;align-items:center;
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.2rem,3vw,2.2rem);
  border-top:1px solid var(--hair);background:var(--steel)}
@media (min-width:640px){
  .form__foot{grid-template-columns:auto 1fr;gap:clamp(1.4rem,4vw,2.6rem)}
}
.form__foot .send{margin-top:0;justify-self:start}
.form__foot .fine{color:var(--low);font-size:.78rem;line-height:1.65;margin:0}

.pick{padding:1.6rem 0 .4rem}
.pick__set{display:grid;gap:.5rem}
@media (min-width:560px){.pick__set{grid-template-columns:repeat(3,1fr);gap:.5rem}}
.pick label{border:1px solid var(--hair);border-radius:999px;padding:.62rem 1rem;
  justify-content:flex-start;gap:.62rem;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out),
             background .2s var(--ease-out)}
.pick label:has(input:checked){border-color:var(--hair-2);background:rgba(213,217,222,.05)}
@media (hover:hover) and (pointer:fine){
  .pick label:hover{border-color:var(--hair-2)}
}
.pick input{width:13px;height:13px}
.pick label span{font-size:.9rem}

/* ============ FOOTER — the questions live down here now ============ */
.foot__q{border-top:1px solid var(--hair);padding-block:clamp(3.5rem,9vw,6.5rem)}
.foot__qh{font-family:"Michroma",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.1rem,.8rem + 1.4vw,1.9rem);letter-spacing:-.012em;color:#fff;
  margin-top:.7rem;line-height:1.1}
.foot__q .faq{margin-top:clamp(2rem,5vw,3.2rem)}
.foot__q .split .txt{padding-top:1.6rem}

/* ============ ACQUISITION — form and process side by side ============
   On a wide screen the form panel left two thirds of the row empty.
   The three steps belong next to it, not stacked above. */
.acq{display:grid;gap:clamp(2.4rem,5vw,4rem);margin-top:clamp(2.4rem,6vw,3.6rem);
  align-items:start}
@media (min-width:1040px){
  .acq{grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);
    gap:clamp(3rem,6vw,6rem)}
}
.acq__form .form{margin-top:1.2rem;max-width:none}
.acq__side{display:grid;gap:1.4rem;align-content:start;padding-top:1.2rem}
.flow--v{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair);
  margin-top:.4rem}
.flow--v > div{border-bottom:1px solid var(--hair);padding-block:1.15rem}
.flow--v p{max-width:34ch}
.deliver{color:var(--low);line-height:1.9;margin-top:.4rem}

/* the legend was sitting on the border of the field above it */
.pick{padding:2.4rem 0 .4rem}
.pick legend{margin-bottom:1.1rem}

/* a <legend> escapes its fieldset's padding-top, so the label was landing
   almost on the border of the field above it */
.pick{padding:.4rem 0}
.pick legend{margin:2.2rem 0 1.1rem}
.field textarea{min-height:76px}

/* legend margins don't reliably push inside a fieldset — space the fieldset */
.pick{margin-top:2.1rem;padding:0}
.pick legend{margin:0 0 1.1rem}