/* ============================================================
   THE LAMHA COLLECTIVE
   Shared design system. Imported by both pages.

   Type:  Playfair Display (editorial serif) + Hanken Grotesk
          (humanist grotesque for UI, body, metadata).
   Glass: selective, over photography only. Forest-tinted, gold
          hairline, reduced-transparency fallback to solid.
   Motion: IntersectionObserver blur-up reveals + CSS scroll-driven
          drift. No scroll listeners.
   ============================================================ */

@import url('fonts/fonts.css');

:root{
  /* palette */
  --forest:#102E27;
  --forest-deep:#0B211C;
  --heritage:#29483E;
  --ivory:#F3EBDD;
  --ivory-2:#EAE0CE;
  --gold:#B8955A;
  --gold-lift:#D9BC85;
  --terracotta:#A55F42;
  --charcoal:#29251F;

  --ink:var(--charcoal);
  --ink-soft:rgba(41,37,31,0.60);
  --ink-faint:rgba(41,37,31,0.38);
  --paper:var(--ivory);
  --paper-2:var(--ivory-2);

  --on-dark:rgba(243,235,221,0.98);
  --on-dark-soft:rgba(243,235,221,0.62);
  --on-dark-faint:rgba(243,235,221,0.40);

  --rule:rgba(41,37,31,0.13);
  --rule-dark:rgba(184,149,90,0.24);

  /* glass — forest-tinted, never pure black */
  --glass-fill:rgba(14,38,32,0.44);
  --glass-fill-strong:rgba(11,29,25,0.86);
  --glass-blur:blur(20px) saturate(135%);
  --glass-highlight:inset 0 1px 0 rgba(243,235,221,0.16);
  --glass-shadow:0 24px 60px -28px rgba(6,20,16,0.72);
  --glass-edge:linear-gradient(145deg,
      rgba(217,188,133,0.42) 0%,
      rgba(243,235,221,0.16) 38%,
      rgba(217,188,133,0.10) 66%,
      rgba(243,235,221,0.30) 100%);

  --serif:'Playfair Display','Iowan Old Style',Georgia,serif;
  --sans:'Hanken Grotesk','Segoe UI',-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  --gutter:clamp(1.35rem,4.5vw,6rem);
  --shell:84rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-cine:cubic-bezier(.16,1,.3,1);
  --slow:1.1s;
  --nav-h:60px;

  /* Sharp editorial radius. Glass reads as a translucent caption plate,
     not a consumer-tech pill. One value across nav, panels and buttons. */
  --radius:4px;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#131E1A;
    --paper-2:#17251F;
    --ink:#E9E1D0;
    --ink-soft:rgba(233,225,208,0.62);
    --ink-faint:rgba(233,225,208,0.38);
    --rule:rgba(233,225,208,0.13);
    --heritage:#1B322A;
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,0.95rem + 0.2vw,1.0625rem);
  font-weight:300;
  line-height:1.7;
  letter-spacing:0.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, not hidden: `overflow-x:hidden` turns body into a scroll container,
     which then becomes the containing block for position:fixed descendants
     (it traps the mobile nav overlay). clip guards against horizontal scroll
     without establishing that scroll container. */
  overflow-x:clip;
}

img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.008em;
  text-wrap:balance;
}

/* ---------- display scale ----------
   Playfair Display is an editorial high-contrast serif, but its thin
   strokes stay heavy enough to read at data sizes. Set at weight 500 so
   nothing thins out. Tracking is close to neutral; Playfair runs a touch
   wide, so only the largest sizes get a small negative. */
.d1{font-size:clamp(3rem,1.4rem + 7vw,7.25rem);line-height:1.0;letter-spacing:-0.016em;}
.d2{font-size:clamp(2.25rem,1.2rem + 4.8vw,4.75rem);line-height:1.03;letter-spacing:-0.012em;}
.d3{font-size:clamp(1.85rem,1.3rem + 2.5vw,3.3rem);line-height:1.08;letter-spacing:-0.008em;}
.d4{font-size:clamp(1.4rem,1.15rem + 1.25vw,2.05rem);line-height:1.18;letter-spacing:-0.004em;}
.serif-i{font-style:italic;}

.lede{
  font-size:clamp(1.05rem,1rem + 0.4vw,1.28rem);
  line-height:1.66;
  color:var(--ink-soft);
  max-width:36rem;
  font-weight:300;
}
.on-dark .lede,.lede.on-dark{color:var(--on-dark-soft);}

.micro{
  font-family:var(--sans);
  font-size:0.6875rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.5;
}
.eyebrow{color:var(--gold);}

/* Grid/flex children may shrink below their image's intrinsic width. */
.phil-grid > *, .prop-grid > *, .plates > *, .entries > *, .veh-inner > *,
.duo > *, .cols > *, .gal > *, .gal figure > *, .arc-grid > *, .fit > *,
.pack > *, .spec > *, .glance > *, .sched > *, .footer-grid > *,
.notes > *, .index-rows > *, .row > *, .rail > *{min-width:0;}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}
.measure{max-width:34rem;}
section{padding-block:clamp(4.5rem,9vh,8.5rem);}

.rule{height:1px;background:var(--rule);border:0;margin:0;}
.tick{width:2.5rem;height:1px;background:var(--gold);border:0;margin:0;}

/* ---------- glass ----------
   One reusable surface. Applied ONLY over photography or dark
   fills — glass over ivory has nothing to refract. */
.glass{
  position:relative;
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-highlight),var(--glass-shadow);
  color:var(--on-dark);
}
.glass-edge::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;background:var(--glass-edge);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--glass-fill-strong);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass-fill-strong);}
}

/* ---------- buttons ----------
   Understated by brand mandate: a word with a rule, or a flat fill.
   Never an ecommerce pill. The lift on hover is the only flourish. */
.btn{
  display:inline-flex;align-items:center;gap:0.7rem;
  font-family:var(--sans);font-size:0.6875rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  padding:1.05rem 1.9rem;border:1px solid currentColor;border-radius:var(--radius);
  transition:background-color .5s var(--ease),color .5s var(--ease),
             border-color .5s var(--ease),transform .5s var(--ease-cine);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-fill{background:var(--forest);color:var(--ivory);border-color:var(--forest);}
.btn-fill:hover{background:var(--heritage);border-color:var(--heritage);}
.btn-light{background:var(--ivory);color:var(--forest);border-color:var(--ivory);}
.btn-light:hover{background:transparent;color:var(--ivory);}
.btn-gold{background:var(--gold);color:var(--forest-deep);border-color:var(--gold);}
.btn-gold:hover{background:var(--gold-lift);border-color:var(--gold-lift);}
.btn-line{border-color:rgba(243,235,221,0.42);color:var(--ivory);}
.btn-line:hover{background:rgba(243,235,221,0.10);border-color:var(--ivory);}
.btn-dark-line{border-color:var(--rule);color:var(--ink);}
.btn-dark-line:hover{background:var(--forest);color:var(--ivory);border-color:var(--forest);}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.link-quiet{
  display:inline-block;position:relative;
  font-family:var(--sans);font-size:0.6875rem;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;padding-bottom:0.55rem;
}
.link-quiet::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform-origin:left;transition:transform .6s var(--ease-cine);
}
.link-quiet:hover::after{transform:scaleX(0.32);}
.link-quiet:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---------- nav: floating glass island ----------
   A centred pill detached from the top edge, riding over the hero.
   Solid forest fallback where blur or transparency is unavailable,
   so the links are always legible. */
.nav{
  position:fixed;z-index:80;
  top:clamp(0.6rem,1.4vw,1.1rem);
  left:clamp(0.75rem,3vw,2rem);right:clamp(0.75rem,3vw,2rem);
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:0 clamp(1rem,2vw,1.6rem);
  border-radius:var(--radius);
  color:var(--ivory);
  background:transparent;
  box-shadow:var(--glass-highlight),0 18px 44px -26px rgba(6,20,16,0.7);
}
/* Glass fill lives on ::after, NOT on .nav itself. backdrop-filter creates a
   containing block for fixed descendants; if it sat on .nav, the mobile
   fullscreen overlay (a fixed descendant) would be trapped inside the 60px
   bar instead of covering the viewport. The pseudo-element has no descendants,
   so it blurs the bar without capturing the overlay. */
.nav::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
}
.nav::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;background:var(--glass-edge);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
@media (prefers-reduced-transparency:reduce){
  .nav::after{background:var(--glass-fill-strong);backdrop-filter:none;-webkit-backdrop-filter:none;}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav::after{background:var(--glass-fill-strong);}
}

.mark{
  font-family:var(--sans);font-size:0.6875rem;font-weight:600;
  letter-spacing:0.28em;text-transform:uppercase;line-height:1;
  white-space:nowrap;
}

.nav-links{display:flex;align-items:center;gap:clamp(1.25rem,2.2vw,2.3rem);}
.nav-links a{font-family:var(--sans);font-size:0.6875rem;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;opacity:.82;transition:opacity .4s var(--ease),color .4s var(--ease);}
.nav-links a:hover{opacity:1;color:var(--gold-lift);}
.nav-cta{
  border:1px solid rgba(243,235,221,0.42);padding:0.62rem 1.1rem;border-radius:var(--radius);
  opacity:1 !important;
  transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.nav-cta:hover{background:var(--ivory);color:var(--forest) !important;border-color:var(--ivory);}
.nav-toggle{display:none;font-family:var(--sans);font-size:0.6875rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;padding:.5rem 0;position:relative;z-index:2;}
.nav a:focus-visible,.nav button:focus-visible{outline:2px solid var(--gold-lift);outline-offset:3px;border-radius:2px;}

@media (max-width:62rem){
  /* Fullscreen slide-down overlay. Height is pinned to the small viewport
     (100svh), not inset:0, so it stays correct regardless of how the browser
     reports the fixed-position layout viewport. Links stay opacity 1 when open
     so they can never be stranded invisible; the panel slide is the motion. */
  .nav-links{
    position:fixed;top:0;left:0;right:0;height:100svh;border-radius:0;
    background:var(--glass-fill-strong);
    backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:1.4rem;padding:var(--gutter);overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
    transition:opacity .45s var(--ease-cine),transform .45s var(--ease-cine),visibility 0s linear .45s;
  }
  .nav-links[data-open="true"]{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:opacity .45s var(--ease-cine),transform .45s var(--ease-cine);
  }
  .nav-links a{font-size:1.15rem;letter-spacing:0.08em;opacity:1;}
  .nav-cta{margin-top:1rem;}
  .nav-toggle{display:block;}
}
@media (prefers-reduced-transparency:reduce){
  @media (max-width:62rem){
    .nav-links{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--forest);}
  }
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:7rem 0 clamp(2.75rem,7vh,4.5rem);
  overflow:clip;color:var(--ivory);
}
.hero-media{position:absolute;inset:0;z-index:0;overflow:clip;}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(6,20,16,0.92) 0%,
    rgba(6,20,16,0.64) 30%,
    rgba(6,20,16,0.34) 56%,
    rgba(6,20,16,0.16) 80%,
    rgba(6,20,16,0.42) 100%);
}
.hero-body{position:relative;z-index:1;width:100%;}
.hero .eyebrow{color:var(--gold-lift);}

/* ---------- tinted surfaces ---------- */
.on-forest{background:var(--forest);color:var(--on-dark);}
.on-forest-deep{background:var(--forest-deep);color:var(--on-dark);}
.on-heritage{background:var(--heritage);color:var(--on-dark);}
.on-paper2{background:var(--paper-2);}
.on-forest .rule,.on-heritage .rule,.on-forest-deep .rule{background:var(--rule-dark);}
.on-forest .eyebrow,.on-heritage .eyebrow,.on-forest-deep .eyebrow{color:var(--gold-lift);}

/* ---------- footer ---------- */
.footer{background:var(--forest-deep);color:var(--on-dark);padding-block:clamp(4rem,8vh,6.5rem) 2.25rem;}
.footer-grid{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr;}
@media (min-width:54rem){.footer-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);}}
.footer-mark{font-family:var(--serif);font-size:clamp(2rem,1.2rem + 2.2vw,3rem);line-height:1.1;font-weight:500;}
.footer-say{margin-top:1.6rem;font-family:var(--serif);font-size:1.2rem;line-height:1.62;color:var(--on-dark-soft);font-weight:500;}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.8rem 2rem;align-content:start;}
.footer-nav a{font-family:var(--sans);font-size:0.8125rem;letter-spacing:0.05em;color:var(--on-dark-soft);transition:color .4s var(--ease);}
.footer-nav a:hover{color:var(--gold-lift);}
.footer-base{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.6rem;border-top:1px solid var(--rule-dark);
  display:flex;flex-wrap:wrap;gap:0.7rem 2.5rem;justify-content:space-between;
  font-size:0.75rem;color:var(--on-dark-faint);line-height:1.6;
}
/* footer social icon row */
.footer-social{display:flex;gap:0.85rem;margin-top:1.75rem;}
.footer-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  border:1px solid var(--rule-dark);color:var(--on-dark-soft);
  transition:color .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease);
}
.footer-social a:hover{color:var(--forest-deep);background:var(--gold-lift);border-color:var(--gold-lift);}
.footer-social a:focus-visible{outline:2px solid var(--gold-lift);outline-offset:3px;}
.footer-social svg{width:1.05rem;height:1.05rem;fill:currentColor;display:block;}

/* ---------- forms ---------- */
.field{margin-bottom:1.5rem;}
.field label{display:block;font-family:var(--sans);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);margin-bottom:0.5rem;}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:0.7rem 0.1rem;font:inherit;font-size:1rem;color:var(--ink);
  border-radius:0;transition:border-color .5s var(--ease);resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold);}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--gold);outline-offset:4px;}
/* glass forms invert the field colours */
.glass .field label{color:var(--on-dark-soft);}
.glass .field input,.glass .field textarea{color:var(--on-dark);border-bottom-color:rgba(243,235,221,0.24);}
.glass .field input::placeholder,.glass .field textarea::placeholder{color:var(--on-dark-faint);}
.glass .field input:focus,.glass .field textarea:focus{border-bottom-color:var(--gold-lift);}

/* ---------- motion: blur-up reveals ----------
   The hidden state is gated on `.reveal-on`, which the script adds only when
   it is about to drive the reveals. With no JS (or no IntersectionObserver)
   the class is never added, so every [data-reveal] block stays fully visible
   rather than blank. */
.reveal-on [data-reveal]{
  opacity:0;transform:translateY(1.75rem);filter:blur(6px);
  transition:opacity var(--slow) var(--ease-cine),transform var(--slow) var(--ease-cine),filter var(--slow) var(--ease-cine);
}
.reveal-on [data-reveal].seen{opacity:1;transform:none;filter:none;}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes drift{from{transform:scale(1.11) translateY(-1.6%);}to{transform:scale(1.11) translateY(1.6%);}}
    .hero-media img,.bleed img{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%;}
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;}
  [data-reveal]{opacity:1;transform:none;filter:none;}
}

/* ---------- floating WhatsApp (site-wide) ----------
   WhatsApp brand green, not the site accent, so it's instantly recognisable.
   Journey page raises it above the mobile sticky bar in that page's CSS. */
.wa-float{
  position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:75;
  width:3.5rem;height:3.5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  box-shadow:0 12px 30px -8px rgba(6,20,16,0.5),0 2px 6px rgba(6,20,16,0.3);
  transition:transform .4s var(--ease-cine),box-shadow .4s var(--ease-cine);
}
.wa-float svg{width:1.9rem;height:1.9rem;fill:currentColor;display:block;}
.wa-float:hover{transform:scale(1.07);box-shadow:0 16px 36px -8px rgba(6,20,16,0.55);}
.wa-float:active{transform:scale(0.97);}
.wa-float:focus-visible{outline:3px solid var(--gold-lift);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none;}
  .wa-float:hover{transform:none;}
}

/* ---------- utilities ---------- */
.bleed{position:relative;overflow:clip;}
.bleed img{width:100%;height:100%;object-fit:cover;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--gutter);top:1rem;z-index:100;background:var(--ivory);color:var(--forest);padding:0.75rem 1.25rem;}