/* =========================================================
   Pipettemann — pages.css
   Logo, navigation menu, sub-page layouts, enquiry form.
   Colours come from the tokens in style.css.
   ========================================================= */

/* ---------- Logo ---------- */
.brand{color:var(--accent-2);transition:color .5s}
.nav.on-light .brand{color:var(--accent)}
.brand__logo{display:block;width:158px;aspect-ratio:1192/144;background:currentColor;
  -webkit-mask:url(logo-wordmark.png) center/contain no-repeat;mask:url(logo-wordmark.png) center/contain no-repeat}
.loader__mark{display:block;width:132px;aspect-ratio:523/215;margin:0 auto;background:var(--accent-2);
  -webkit-mask:url(logo-mark.png) center/contain no-repeat;mask:url(logo-mark.png) center/contain no-repeat}
.wordmark-logo{width:100%;aspect-ratio:1192/307;margin-top:28px;background:linear-gradient(180deg,var(--accent-2),var(--accent));
  -webkit-mask:url(logo-lockup.png) center/contain no-repeat;mask:url(logo-lockup.png) center/contain no-repeat}

/* accent text on light surfaces uses the deeper blue for contrast */
.cell__range,.spec td:nth-child(3){color:var(--accent-deep)}
.cell--vol .cell__range,.cell--vol .spec td:nth-child(3){color:var(--accent-2)}
.cell--site .cell__range{color:var(--paper)}
.sheet h2.h2 .serif,.statement p.big .serif{color:var(--accent)}
.process__big{color:var(--accent)}
.cell__links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:12px}
.statement__meta .cell__link{align-self:flex-start}

/* ---------- Nav: current page + calibration menu ---------- */
.nav__links a[aria-current="page"]{opacity:1}
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.has-drop{position:relative}
.has-drop>a svg{width:10px;height:10px;margin-left:7px;transition:transform .45s var(--ease-out)}
.has-drop:hover>a svg,.has-drop:focus-within>a svg{transform:rotate(180deg)}
.drop{position:absolute;top:100%;left:50%;width:360px;padding-top:16px;transform:translate(-50%,10px);opacity:0;visibility:hidden;
  transition:opacity .35s,transform .55s var(--ease-out),visibility .35s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop__in{background:var(--ink-2);color:var(--paper);border:1px solid rgba(var(--paper-rgb),.1);border-radius:20px;padding:8px;box-shadow:var(--shadow-lift)}
.nav__links .drop a{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:13px;font-size:14px;opacity:1;transition:background .3s}
.nav__links .drop a::after{display:none}
.nav__links .drop a:hover,.nav__links .drop a:focus-visible{background:rgba(var(--accent-rgb),.28)}
.drop .mono{font-size:10px;color:var(--accent-2)}
.drop small{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:rgba(var(--paper-rgb),.5);white-space:nowrap}

/* overlay menu */
.menu{overflow-y:auto;justify-content:flex-start}
.menu ol{margin-bottom:24px}
.menu__sub{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.menu .menu__sub a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-size:14px;letter-spacing:0;line-height:1;border:1px solid rgba(var(--paper-rgb),.22);border-radius:999px;transform:none;opacity:0;transition:opacity .6s .3s,background .3s}
.menu-open .menu .menu__sub a{opacity:1}
.menu .menu__sub a:hover,.menu .menu__sub a:focus-visible{background:rgba(var(--accent-rgb),.3)}

/* ---------- Sub-page hero ---------- */
.phero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate;min-height:82vh;min-height:82svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(140px,20vh,220px) 0 var(--sheet-r)}
.phero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(720px circle at var(--mx,74%) var(--my,38%),rgba(var(--accent-rgb),.42),transparent 62%)}
.phero::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(var(--paper-rgb),.07) 0 1px,transparent 1px 12.5%)}
.phero__grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding-bottom:clamp(40px,6vw,80px)}
.crumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:28px;color:rgba(var(--paper-rgb),.6)}
.crumb i{width:28px;height:1px;background:var(--accent-2)}
.crumb a{min-height:44px;display:inline-flex;align-items:center;transition:color .3s}
.crumb a:hover,.crumb a:focus-visible{color:var(--paper)}
.phero h1{margin:0;font-weight:500;font-size:clamp(44px,8vw,140px);line-height:.92;letter-spacing:-.045em}
.phero h1 .serif{color:var(--accent-2)}
.phero h1 .ln{display:block;overflow:hidden;padding:.04em .08em .16em 0;margin:-.04em 0 -.16em}
.phero__lead{max-width:580px;margin:32px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:rgba(var(--paper-rgb),.72)}
.dial{position:relative;width:clamp(200px,24vw,340px);aspect-ratio:1;display:grid;place-items:center;color:var(--accent-2)}
.dial__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
.dial__motif{width:44%;height:44%}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px solid rgba(var(--paper-rgb),.14)}
.fact{padding:22px 24px 28px 0;border-right:1px solid rgba(var(--paper-rgb),.14)}
.fact+.fact{padding-left:24px}
.fact:last-child{border-right:0}
.fact dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5)}
.fact dd{margin:10px 0 0;font-family:var(--f-mono);font-size:clamp(15px,1.5vw,22px);letter-spacing:-.01em;line-height:1.3}

/* ---------- Big spec table ---------- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:left;opacity:.5;padding:0 0 14px}
.tbl td{padding:clamp(16px,2vw,26px) 0;border-top:1px solid rgba(var(--ink-rgb),.14);vertical-align:baseline;transition:padding .5s var(--ease-out),background .4s}
.tbl tbody tr:last-child td{border-bottom:1px solid rgba(var(--ink-rgb),.14)}
.tbl td:first-child{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;width:84px;opacity:.5}
.tbl td:nth-child(2){font-size:clamp(20px,2.4vw,36px);letter-spacing:-.03em;font-weight:500;line-height:1.1;padding-right:20px}
.tbl td:nth-child(2) small{display:block;margin-top:8px;font-size:14px;letter-spacing:0;font-weight:400;line-height:1.4;color:rgba(var(--ink-rgb),.58)}
.tbl td:nth-child(3),.tbl td:nth-child(4),.tbl th:nth-child(3),.tbl th:nth-child(4){padding-left:20px;white-space:nowrap}
.tbl td:nth-child(3),.tbl td:nth-child(4){font-family:var(--f-mono);font-size:clamp(13px,1.1vw,16px)}
.tbl td:nth-child(4){color:var(--accent-deep)}
.tbl tbody tr:hover td{background:rgba(var(--accent-rgb),.07)}
.tbl tbody tr:hover td:first-child{padding-left:14px}
.tbl tbody tr:hover td:last-child{padding-right:14px}
.tbl-note{margin-top:22px}

/* ---------- Method ---------- */
.method__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px)}
.method__grid h2.h2{font-size:clamp(40px,5vw,84px)}
.dlist{margin:0}
.dlist>div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:20px;padding:22px 0;border-top:1px solid rgba(var(--ink-rgb),.14)}
.dlist>div:last-child{border-bottom:1px solid rgba(var(--ink-rgb),.14)}
.dlist dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--ink-rgb),.58);padding-top:6px}
.dlist dd{margin:0;font-size:clamp(17px,1.5vw,22px);line-height:1.4;letter-spacing:-.01em}

/* ---------- Next band ---------- */
.next{display:block;position:relative;z-index:3;background:var(--ink-2);color:var(--paper);border-radius:var(--sheet-r) var(--sheet-r) 0 0;margin-top:calc(var(--sheet-r) * -1);
  padding:clamp(72px,10vw,140px) 0 calc(clamp(72px,10vw,140px) + var(--sheet-r));overflow:hidden}
.next::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease-out)}
.next:hover::before,.next:focus-visible::before{transform:scaleY(1)}
.next .wrap{position:relative}
.next__label{color:rgba(var(--paper-rgb),.6)}
.next__title{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;font-size:clamp(40px,8vw,140px);letter-spacing:-.045em;line-height:.95;font-weight:500}
.next__arrow{flex:none;width:clamp(60px,8vw,120px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(var(--paper-rgb),.34);display:grid;place-items:center;transition:transform .8s var(--ease-out),background .4s,color .4s}
.next__arrow svg{width:28%}
.next:hover .next__arrow{transform:rotate(-45deg);background:var(--paper);color:var(--accent)}

/* ---------- About ---------- */
.prose-grid{display:grid;grid-template-columns:4fr 8fr;gap:clamp(32px,6vw,96px)}
.prose p{font-size:clamp(18px,1.6vw,24px);line-height:1.45;letter-spacing:-.01em;margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.founder-name{font-size:clamp(36px,4.4vw,72px);letter-spacing:-.04em;line-height:1;font-weight:500;margin:16px 0 0}
.founder-name .serif{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:36px 0 0}
.chips li{border:1px solid rgba(var(--ink-rgb),.2);border-radius:999px;padding:8px 14px;font-size:14px;transition:background .3s,color .3s,border-color .3s}
.chips li:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vtl{position:relative;list-style:none;margin:0;padding:0}
.vtl li{display:grid;grid-template-columns:minmax(150px,4fr) 8fr;gap:24px;padding:clamp(24px,3vw,44px) 0;border-top:1px solid rgba(var(--paper-rgb),.12);align-items:baseline}
.vtl li:last-child{border-bottom:1px solid rgba(var(--paper-rgb),.12)}
.vtl__year{font-size:clamp(48px,7vw,120px);letter-spacing:-.06em;line-height:.85;font-weight:500;color:var(--accent-2);font-variant-numeric:tabular-nums}
.vtl h3{margin:0 0 8px;font-weight:500;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.02em;line-height:1.1}
.vtl p{margin:0;max-width:560px;color:rgba(var(--paper-rgb),.6)}
.dark.sec{padding-bottom:calc(var(--sec-pad) + var(--sheet-r))}

/* ---------- Certifications ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.tab{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(var(--ink-rgb),.2);font-size:14px;transition:background .3s,color .3s,border-color .3s,transform .2s}
.tab:hover{border-color:var(--ink)}
.tab:active{transform:scale(.96)}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.docs .cell{min-height:300px}
.docs .cell p{margin:0 0 18px;max-width:420px;color:rgba(var(--ink-rgb),.62)}

/* ---------- Contact + enquiry form ---------- */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.info>div{padding:22px 0;border-top:1px solid rgba(var(--ink-rgb),.14)}
.info>div:last-child{border-bottom:1px solid rgba(var(--ink-rgb),.14)}
.info h4{margin:0 0 10px;font-weight:400;color:rgba(var(--ink-rgb),.58)}
.info p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.form{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:clamp(22px,3.4vw,48px);scroll-margin-top:100px}
.form h3{margin:0 0 30px;font-weight:500;font-size:clamp(26px,2.6vw,40px);letter-spacing:-.03em;line-height:1.05}
.form h3 .serif{color:var(--accent-2)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;border:0;padding:0;margin:0}
.field--full{grid-column:1/-1}
.field>label,.field>legend{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--paper-rgb),.56);padding:0}
.field>legend{margin-bottom:10px}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field textarea{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid rgba(var(--paper-rgb),.24);
  padding:10px 0;min-height:44px;border-radius:0;outline:0;width:100%;transition:border-color .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:96px}
.field input:hover,.field textarea:hover{border-color:rgba(var(--paper-rgb),.55)}
.field input:focus-visible,.field textarea:focus-visible{border-color:var(--accent-2);box-shadow:0 1px 0 var(--accent-2)}
.field input:disabled,.field textarea:disabled{opacity:.4}
.field ::placeholder{color:rgba(var(--paper-rgb),.3)}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick label{position:relative;cursor:pointer}
.pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(var(--paper-rgb),.24);border-radius:999px;font-size:14px;transition:background .3s,border-color .3s,transform .2s}
.pick label:hover span{border-color:var(--paper)}
.pick label:active span{transform:scale(.96)}
.pick input:checked+span{background:var(--accent);border-color:var(--accent)}
.pick input:focus-visible+span{outline:2px solid var(--accent-2);outline-offset:3px}
.pick input:disabled+span{opacity:.4}
.form__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.form__hint{margin-top:18px;color:rgba(var(--paper-rgb),.56);min-height:1.4em}

/* ---------- Footer ---------- */
.contact--slim{padding-top:clamp(48px,6vw,80px)}
.footnav{display:flex;flex-wrap:wrap;gap:0 24px;padding:8px 0 0;border-top:1px solid rgba(var(--paper-rgb),.12)}
.footnav a{min-height:44px;display:inline-flex;align-items:center;color:rgba(var(--paper-rgb),.62);transition:color .3s}
.footnav a:hover,.footnav a:focus-visible{color:var(--paper)}
.foot{margin-top:0}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .phero__grid{grid-template-columns:1fr}
  .dial{display:none}
  .method__grid,.prose-grid,.contact-grid{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
}
@media (max-width:700px){
  .phero{min-height:0}
  .facts{grid-template-columns:1fr}
  .fact,.fact+.fact{padding:16px 0;border-right:0;border-bottom:1px solid rgba(var(--paper-rgb),.14)}
  .fact:last-child{border-bottom:0}
  .tbl thead{display:none}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:grid;grid-template-columns:44px 1fr;padding:16px 0;border-top:1px solid rgba(var(--ink-rgb),.14)}
  .tbl tr[hidden]{display:none}
  .tbl td,.tbl tbody tr:last-child td{border:0;padding:0}
  .tbl td:first-child{width:auto;grid-row:1/4;padding-top:6px}
  .tbl td:nth-child(3),.tbl td:nth-child(4){grid-column:2;padding:8px 0 0;white-space:normal}
  .tbl td:nth-child(3)::before{content:"Range  "}
  .tbl td:nth-child(4)::before{content:"CMC ±  "}
  .tbl td:nth-child(3)::before,.tbl td:nth-child(4)::before{color:rgba(var(--ink-rgb),.5);white-space:pre}
  .tbl tbody tr:hover td:first-child{padding-left:0}
  .dlist>div{grid-template-columns:1fr;gap:6px}
  .vtl li{grid-template-columns:1fr;gap:14px}
  .fgrid{grid-template-columns:1fr}
  .form__actions .btn{flex:1 1 100%;justify-content:space-between}
  .brand__logo{width:132px}
}

/* keep the oversized pre-animation stamp from widening the page */
#certificate{overflow:hidden;overflow:clip}