/* ============================================================
   AUREMANI — REFINEMENT LAYER
   Loaded after each page's own <style>. Overrides only.
   1 type scale · 2 focus & input · 3 pointer/touch
   4 motion · 5 viewport & overflow · 6 responsive composition
   ============================================================ */

/* 1 · MICRO-TYPE SCALE
   The original labels were set at .42–.5rem (6.7–8px), below
   legible size on every device. One fluid scale replaces them
   and preserves the original tracking and colour. */
:root{
  --micro:    clamp(11px, .72vw, 13px);
  --micro-sm: clamp(10.5px, .62vw, 12px);
}
.lbl,.btn-iv,.btn-ln,.btn-sd,#hdr-enq,.h-eye span,.pv-t{font-size:var(--micro)}
.drw-nav a .n,.drw-ct,.h-counter-lbl,.stmt-dt,.stmt-sl,.qt-at,.dc-lb,.dc-st,
.ob-at,.ef-lb,.ei-lk,.sc-t,.sust-bg p,.cff label,.ft-nv a,.ft-cp{font-size:var(--micro-sm)}
.ft-cp{letter-spacing:.14em}

/* 2 · FOCUS & FORM CONTROLS */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:1px solid var(--gold-lt,#CDA75C);outline-offset:4px;border-radius:1px}
.cff input,.cff select,.cff textarea{min-height:2.4rem}
.cff select{cursor:pointer}
::selection{background:rgba(200,149,42,.22)}

/* 3 · POINTER & TOUCH */
@media (hover:none),(pointer:coarse){
  #cur,#cring{display:none!important}
  html,body,a,button,.h-dot,.drw-x,#menu-btn,.cff select,.cff input,.cff textarea{cursor:auto}
  .ei-lk{opacity:1}
  .drw-nav a{padding-block:1.05rem}
  .ft-nv a{padding-block:.55rem}
  .h-dot{position:relative}
  .h-dot::after{content:'';position:absolute;inset:-14px -20px}
}

/* 4 · MOTION */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  .rv,.rvl,.rvr{opacity:1!important;transform:none!important}
  .slide{transform:none!important}
  .h-prog{display:none}
}

/* 5 · VIEWPORT & OVERFLOW */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
img{max-width:100%}
@supports (height:100svh){
  #hero{height:100svh}
  #philosophy{min-height:100svh}
}

/* 5b · HERO LEGIBILITY
   The supplied photography is bright across the whole frame, so the
   original 160deg scrim left the headline and subhead sitting on open
   water. A directional scrim carries the type instead of dimming the
   entire image. */
#hero .h-dim{background:linear-gradient(102deg,
  rgba(8,19,43,.86) 0%, rgba(8,19,43,.62) 38%,
  rgba(8,19,43,.24) 68%, rgba(8,19,43,.10) 100%)}
#hero .h-bot{background:linear-gradient(to top,
  rgba(8,19,43,.92) 0%, rgba(8,19,43,.26) 34%, transparent 60%)}
.h-sub{color:rgba(232,220,200,.9)}
.phil-vl{background:linear-gradient(to right,
  rgba(8,19,43,.97) 0%, rgba(8,19,43,.86) 44%,
  rgba(8,19,43,.3) 72%, rgba(8,19,43,.06) 100%)}
.ob-vl{background:rgba(8,19,43,.46)}

/* 6 · RESPONSIVE COMPOSITION */
/* 6a · large desktop: widen the measure rather than leaving the
   1420px container adrift at 1920 and above. */
@media (min-width:1700px){
  .w,.ft,.h-content,.phil-in{max-width:1600px}
  .h-content{padding-bottom:9.5rem}
  .dc-img{height:340px}
}
/* 6b · laptop 1025–1200: the original only broke at 1200. */
@media (min-width:1025px) and (max-width:1200px){
  .phil-in{gap:5rem;padding-block:8rem}
  .res-tx,.nat-tx{padding-block:6rem}
  .exp-hd{margin-bottom:5rem}
}
/* 6c · tablet portrait and landscape */
@media (min-width:768px) and (max-width:1024px){
  .dev-gr{grid-template-columns:1fr 1fr}
  .exp-gr{grid-template-columns:1fr 1fr}
  .h-content{padding-bottom:7rem}
  .exp-feat,#obreak{height:52vh}
  .dc-img{height:260px}
  .sust-img{height:420px}
}
/* 6d · mobile */
@media (max-width:767px){
  #hdr{height:76px}
  .hdr-mark{width:46px;height:46px}
  #hero{min-height:600px}
  .h-hed{font-size:clamp(2.3rem,9.5vw,3.4rem);margin-bottom:1.8rem}
  .h-sub{font-size:1rem;margin-bottom:2.6rem}
  .h-ctas{flex-wrap:wrap;gap:1.4rem 2rem}
  .btn-iv{padding:1rem 2.2rem}
  .stmt-h{font-size:clamp(1.9rem,7.5vw,2.4rem)}
  .dc-img{height:clamp(210px,52vw,280px)}
  .exp-feat,#obreak{height:auto;min-height:380px}
  .exp-feat{display:flex;align-items:flex-end}
  .ef-cnt{position:static;padding:2.5rem 2rem 3rem;max-width:none}
  .sust-img{height:300px}
  .sust-bg{position:static;display:inline-block}
  .qt-tx{font-size:1.4rem}
}
@media (max-width:380px){
  .w,#hdr,.ft,.h-content,.phil-in,.res-tx,.nat-tx,.sust,.ct{
    padding-left:1.4rem;padding-right:1.4rem}
  .drw-in{padding:4.5rem 1.6rem 2.5rem}
  .drw-nav a{font-size:1.5rem}
}