/* GENERATED by mockups/site-v3/_build/sync-wp.py from mockups/site-v3/assets/site.css,
   through wpcss.py (every selector html-prefixed to outrank Elementor). Edit the source. */
/* ============================================================================
 * LIVING WATERS — DESIGN v3  (2026-09-19)
 * ----------------------------------------------------------------------------
 * The shared stylesheet for every page in mockups/site-v3/. One file, so every
 * page matches and the WordPress conversion has one source to port.
 *
 * Direction: a boutique-hospitality feel rather than a care-industry one.
 * Cormorant Garamond (display) + Manrope (text). The logo's green and blue,
 * deepened into a forest ground, with warm cream, sand and an antique gold.
 *
 * ⚠️ CONTRAST — the same rule as every previous version of this site:
 *   --brand-green / --brand-blue / --gold are GRAPHICS ONLY (dots, rules, marks).
 *   Text uses --teal, --water, --gold-dk, --ink, --ink-soft, --muted.
 *   Measured ratios are beside each token.
 * ========================================================================== */

:root{
  /* Brand — sampled from the logo */
  --brand-green:#249078;   /* graphics only */
  --brand-blue:#0C84A6;    /* graphics only */
  --teal:#1B6F5C;          /* text/links on cream   5.23:1 (measured) */
  --teal-dr:#155848;
  --water:#0A6B87;         /* text on cream          5.25:1 */

  /* Grounds */
  --cream:#F4EEE3;
  --linen:#FBF8F2;
  --sand:#EADFCC;
  --forest:#0E3A35;
  --forest-2:#0A2B27;

  /* Ink */
  --ink:#16302C;           /* 12.18:1 on cream */
  --ink-soft:#3A514D;      /*  7.38:1 on cream */
  --muted:#5A6D69;         /*  4.75:1 on cream — the floor; do not lighten */

  /* Gold */
  --gold:#B8925A;          /* graphics only */
  --gold-dk:#80602A;       /* text on cream           5.02:1 */
  --gold-lt:#E2C58F;       /* text on forest          7.53:1 */
  --mint:#A6DECD;          /* text on forest          8.33:1 */

  /* Placeholders — the gold fill-in (functional, never decorative) */
  --fill:#8A6318;
  --fill-rule:rgba(138,99,24,.5);

  --line:rgba(22,48,44,.13);
  --line-2:rgba(22,48,44,.22);
  --line-dk:rgba(255,255,255,.14);

  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --fs-hero:clamp(3.3rem,9.4vw,10.2rem);
  --fs-h2:clamp(2.55rem,5.2vw,5.3rem);
  --fs-h3:clamp(1.55rem,2.1vw,2.05rem);
  --fs-lede:clamp(1.1rem,1.35vw,1.3rem);

  --maxw:1360px;
  --gut:clamp(18px,4.4vw,64px);
  --r:18px; --r-lg:28px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --shadow:0 40px 80px -40px rgba(10,43,39,.45),0 12px 28px -16px rgba(10,43,39,.22);
  --hdr-h:84px;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:100px}
html body{margin:0;background:var(--cream);color:var(--ink-soft);font:400 17.5px/1.72 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
html img,html video{max-width:100%;display:block}
html a{color:inherit}
html p{margin:0 0 1.1em}
html h1,html h2,html h3,html h4{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0;letter-spacing:-.012em}
html h1 em,html h2 em,html h3 em{font-style:italic;font-weight:400}
html .h2{font-size:var(--fs-h2);line-height:.98}
html .h3{font-size:var(--fs-h3);line-height:1.1}
html .lede{font-size:var(--fs-lede);line-height:1.62;color:var(--ink-soft)}
html .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
html .wrap--narrow{max-width:980px}
html .sec{padding-block:clamp(96px,12vw,188px);position:relative}
html .sec--tight{padding-block:clamp(72px,8vw,120px)}
html .bg-linen{background:var(--linen)}
html .bg-cream{background:var(--cream)}
html .bg-sand{background:var(--sand)}
html .skip{position:absolute;left:-999px;top:10px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px}
html .skip:focus{left:10px}
html :focus-visible{outline:2px solid var(--brand-blue);outline-offset:4px;border-radius:6px}
html .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Dark grounds re-tokenise ink, so a component never needs its own dark rules */
html .dark{background:var(--forest);color:rgba(236,244,241,.8);
  --ink:#FFFFFF;--ink-soft:rgba(236,244,241,.82);--muted:rgba(236,244,241,.66);
  --line:var(--line-dk);--line-2:rgba(255,255,255,.26);
  --teal:var(--mint);--gold-dk:var(--gold-lt);
  --fill:#E7C27A;--fill-rule:rgba(231,194,122,.5)}
html .dark--deep{background:var(--forest-2)}

/* ---------------------------------------------------------------- placeholders
   Anything still unconfirmed is written as [bracketed text] inside .fill.
   The footer toggle previews the finished look. Never guess a value. */
html .fill{color:var(--fill);border-bottom:1.5px dotted var(--fill-rule);font-style:normal}
html body.hide-fills .fill{color:inherit;border-bottom-color:transparent}
html body.hide-fills .fill-block{display:none}

/* ---------------------------------------------------------------- eyebrow */
html .eyebrow{display:flex;align-items:center;gap:14px;margin:0 0 26px;font:600 11.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dk)}
html .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
html .dark .eyebrow::before{background:var(--gold-lt)}
html .eyebrow--center{justify-content:center}
html .eyebrow--center::after{content:"";width:34px;height:1px;background:var(--gold);flex:none}

/* ---------------------------------------------------------------- buttons */
html .btn{--bg:var(--forest);--fg:#fff;display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:8px 10px 8px 26px;border-radius:999px;background:var(--bg);color:var(--fg);font:600 15px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s,transform .5s var(--ease)}
html .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--teal-dr);transform:translateY(101%);transition:transform .6s var(--ease);z-index:-1}
html .btn:hover::before,html .btn:focus-visible::before{transform:none}
html .btn__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);flex:none;transition:transform .6s var(--ease),background .4s}
html .btn__ic svg{width:16px;height:16px}
html .btn:hover .btn__ic{transform:rotate(-45deg)}
html .btn--phone:hover .btn__ic{transform:none}
html .btn--plain{padding:8px 26px}
html .btn--phone{padding:8px 26px 8px 10px}
html .btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--line-2)}
html .btn--ghost .btn__ic{background:var(--forest);color:#fff}
html .btn--ghost::before{background:var(--forest)}
html .btn--ghost:hover{--fg:#fff;border-color:transparent}
html .btn--ghost:hover .btn__ic{background:rgba(255,255,255,.16)}
html .btn--light{--bg:#fff;--fg:var(--forest)}
html .btn--light .btn__ic{background:var(--forest);color:#fff}
html .btn--light::before{background:var(--gold-lt)}
html .dark .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.34)}
html .dark .btn--ghost .btn__ic{background:rgba(255,255,255,.14)}
html .dark .btn--ghost::before{background:rgba(255,255,255,.12)}
html .btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:40px}

html .lnk{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.3 var(--sans);color:var(--teal);text-decoration:none;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease)}
html .lnk:hover{background-size:0 1px;background-position:100% 100%}
html .lnk svg{width:16px;height:16px;transition:transform .5s var(--ease)}
html .lnk:hover svg{transform:translateX(5px)}

/* ---------------------------------------------------------------- header */
html .hdr{position:fixed;inset:0 0 auto;z-index:90;height:var(--hdr-h);transition:transform .6s var(--ease),background-color .5s,box-shadow .5s,height .5s var(--ease)}
html .hdr__in{height:100%;display:flex;align-items:center;gap:28px}
html .hdr__logo{flex:none;display:block;line-height:0}
html .hdr__logo img{height:50px;width:auto;transition:height .5s var(--ease)}
html .hdr__logo .is-light{display:none}
html .nav{margin-inline:auto}
html .nav>ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
html .nav a,html .nav__btn{display:flex;align-items:center;gap:6px;padding:10px 15px;border-radius:999px;font:500 15px/1 var(--sans);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;transition:background-color .3s,color .3s}
html .nav a:hover,html .nav__btn:hover,html .nav__btn[aria-expanded="true"]{background:rgba(22,48,44,.06)}
html .nav a[aria-current="page"]{color:var(--teal)}
html .nav__btn svg{width:12px;height:12px;transition:transform .4s var(--ease)}
html .nav__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
html .nav__dd{position:relative}
html .dd{position:absolute;left:50%;top:calc(100% + 14px);width:min(560px,90vw);translate:-50% 0;background:var(--linen);border:1px solid var(--line);border-radius:22px;padding:12px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .45s var(--ease),visibility .35s}
html .dd.is-open{opacity:1;visibility:visible;transform:none}
html .dd a{display:block;padding:16px 18px;border-radius:14px;font:500 1.35rem/1.15 var(--serif);color:var(--ink);white-space:normal}
html .dd a small{display:block;margin-top:6px;font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk)}
html .dd a:hover{background:var(--sand)}
html .hdr__act{display:flex;align-items:center;gap:18px;flex:none}
html .hdr__tel{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap}
html .hdr__tel span.ic{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:background .3s,border-color .3s}
html .hdr__tel svg{width:15px;height:15px}
html .hdr__tel:hover span.ic{background:var(--forest);border-color:var(--forest);color:#fff}
html .hdr .btn{min-height:48px;padding:6px 24px}
html .burger{display:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;flex:none}
html .burger i{display:block;width:18px;height:1.5px;background:currentColor;margin:4px auto;transition:transform .45s var(--ease),opacity .3s}
html .hdr.is-stuck{background:rgba(251,248,242,.84);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1px 0 var(--line),0 18px 40px -30px rgba(10,43,39,.5);height:72px}
html .hdr.is-stuck .hdr__logo img{height:42px}
html .hdr.is-hidden{transform:translateY(-110%)}

html .drawer{position:fixed;inset:0;z-index:85;background:var(--forest-2);color:#fff;padding:calc(var(--hdr-h) + 24px) var(--gut) 40px;display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
html .drawer a{color:#fff;text-decoration:none}
html .drawer__nav{display:flex;flex-direction:column}
html .drawer__nav a{font:500 clamp(2rem,8vw,2.8rem)/1.2 var(--serif);padding:8px 0;border-bottom:1px solid var(--line-dk);transform:translateY(20px);opacity:0;transition:transform .7s var(--ease),opacity .7s}
html .drawer__sub{display:grid;gap:4px;padding:6px 0 12px 18px;border-bottom:1px solid var(--line-dk)}
html .drawer__sub a{font:500 1.25rem/1.4 var(--serif);border:0;padding:4px 0;color:rgba(255,255,255,.78)}
html .drawer__foot{margin-top:auto;padding-top:32px;display:flex;flex-wrap:wrap;gap:12px}
html body.menu-open .drawer{opacity:1;visibility:visible}
html body.menu-open .drawer__nav a{transform:none;opacity:1}
html body.menu-open{overflow:hidden}
html body.menu-open .hdr{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
html body.menu-open .hdr__logo .is-dark{display:none}
html body.menu-open .hdr__logo .is-light{display:block}
html body.menu-open .burger{color:#fff;border-color:rgba(255,255,255,.3)}
html body.menu-open .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
html body.menu-open .burger i:nth-child(2){opacity:0}
html body.menu-open .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

html .callbar{display:none}

/* ---------------------------------------------------------------- reveal motion */
html [data-reveal]{opacity:0;transform:translateY(38px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
html [data-reveal].is-in{opacity:1;transform:none}
html [data-reveal="fade"]{transform:none}
html.no-js [data-reveal]{opacity:1;transform:none}
html .line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
html .line-mask>span{display:block;transform:translateY(110%);transition:transform 1.4s var(--ease);transition-delay:calc(var(--i,0) * 120ms + 150ms)}
html .is-in .line-mask>span,html.is-loaded .hero .line-mask>span{transform:none}
html.no-js .line-mask>span{transform:none}

/* ---------------------------------------------------------------- HERO */
html .hero{padding-top:calc(var(--hdr-h) + clamp(28px,4vw,60px));background:var(--cream);position:relative}
html .hero__h1{font-size:var(--fs-hero);line-height:.88;letter-spacing:-.028em;font-weight:500;margin:0}
html .hero__h1 em{color:var(--teal);padding-right:.05em}
html .hero__row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(28px,3.4vw,52px);align-items:end}
html .hero__lede{grid-column:1 / span 6;font-size:clamp(1.15rem,1.5vw,1.42rem);line-height:1.58;color:var(--ink);margin:0}
html .hero__side{grid-column:8 / span 5}
html .hero__side p{margin:0;color:var(--muted);font-size:16.5px}
html .hero__side .btns{margin-top:28px}
html .hero__media{--p:0;position:relative;margin-top:clamp(40px,4.4vw,68px);height:clamp(420px,86vh,940px);overflow:hidden;clip-path:inset(0 calc(var(--gut) * (1 - var(--p))) 0 calc(var(--gut) * (1 - var(--p))) round calc(var(--r-lg) * (1 - var(--p))))}
html .hero__media img{width:100%;height:118%;object-fit:cover;object-position:50% 42%;transform:translateY(calc(var(--p) * -8%)) scale(calc(1.14 - var(--p) * .14));transform-origin:50% 30%;will-change:transform}
html .hero__media::after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(0deg,rgba(10,43,39,.35),transparent);pointer-events:none}
html .seal{position:absolute;right:calc(var(--gut) + 28px);top:-72px;width:150px;height:150px;border-radius:50%;background:var(--forest);color:var(--gold-lt);display:grid;place-items:center;z-index:3;box-shadow:var(--shadow)}
html .seal svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 28s linear infinite}
html .seal svg.ring text{font:600 10.5px var(--sans);letter-spacing:.32em;text-transform:uppercase;fill:currentColor}
html .seal__mark{width:46px;height:46px}
@keyframes spin{to{transform:rotate(360deg)}}
html .hero__stage{position:relative}

html .hero .eyebrow,html .hero__row>*{opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--ease),transform 1.3s var(--ease)}
html.is-loaded .hero .eyebrow,html.is-loaded .hero__row>*{opacity:1;transform:none}
html.is-loaded .hero__lede{transition-delay:.55s}html.is-loaded .hero__side{transition-delay:.7s}
html.no-js .hero .eyebrow,html.no-js .hero__row>*{opacity:1;transform:none}

/* ---------------------------------------------------------------- KNOW (get to know) */
html .know{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(48px,8vw,130px);align-items:center}
html .know__media{position:relative;padding:0 0 12% 0}
html .know__main{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.9;box-shadow:var(--shadow)}
html .know__main img{width:100%;height:112%;object-fit:cover;object-position:38% 50%}
html .know__inset{position:absolute;right:-7%;bottom:0;width:52%;border-radius:var(--r);overflow:hidden;border:10px solid var(--linen);box-shadow:var(--shadow);aspect-ratio:4/3}
html .know__inset img{width:100%;height:100%;object-fit:cover}
html .know__orn{position:absolute;left:-34px;top:-34px;width:120px;height:120px;border-radius:50%;border:1px solid var(--gold);opacity:.6;z-index:-1}
html .know__lead{font:italic 400 clamp(1.5rem,2.2vw,2rem)/1.3 var(--serif);color:var(--ink);margin:30px 0 26px}
html .story{margin-top:38px;padding:24px 26px;border-radius:var(--r);border:1px dashed var(--fill-rule);background:rgba(255,255,255,.5);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
html .story__ic{width:44px;height:44px;border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--gold-dk)}
html .story__ic svg{width:18px;height:18px}
html .story small{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
html .story p{margin:0;font:italic 400 1.25rem/1.4 var(--serif)}

/* ---------------------------------------------------------------- AHAVA */
html .ahava{overflow:hidden}
html .ahava__word{font:500 clamp(5.4rem,21vw,23rem)/.78 var(--serif);letter-spacing:var(--ls,.14em);text-indent:var(--ls,.14em);margin:0 0 clamp(40px,5vw,70px) calc(-1 * .04em);color:transparent;background:linear-gradient(100deg,#C9A76F 0%,#9A7437 40%,#D8BC86 60%,#A98446 100%);-webkit-background-clip:text;background-clip:text;white-space:nowrap;text-align:center;transition:letter-spacing .2s linear;user-select:none}
html .ahava__top{display:flex;flex-direction:column;align-items:center;text-align:center}
html .ahava__he{font:500 clamp(1.8rem,2.6vw,2.4rem)/1 var(--serif);color:var(--gold-dk);margin-bottom:18px}
html .ahava__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(48px,8vw,130px);align-items:center}
html .arch{position:relative;border-radius:999px 999px var(--r-lg) var(--r-lg);overflow:hidden;aspect-ratio:4/5.2;box-shadow:var(--shadow)}
html .arch img{width:100%;height:112%;object-fit:cover;object-position:50% 30%}
html .arch-wrap{position:relative;max-width:520px}
html .arch-wrap::before{content:"";position:absolute;inset:-18px;border-radius:999px 999px 36px 36px;border:1px solid var(--gold);opacity:.55}
html .ahava__note{display:flex;gap:16px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line);font:italic 400 1.28rem/1.45 var(--serif);color:var(--ink)}
html .pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(80px,9vw,140px);border-top:1px solid var(--line-2)}
html .pillar{padding:44px clamp(20px,3vw,48px) 0 0;position:relative}
html .pillar+.pillar{padding-left:clamp(20px,3vw,48px);border-left:1px solid var(--line)}
html .pillar::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--gold);transition:width 1.4s var(--ease) calc(var(--i,0) * 160ms + .2s)}
html .pillar.is-in::before{width:64px}
html .pillar+.pillar::before{left:clamp(20px,3vw,48px)}
html .pillar__n{font:500 1.05rem/1 var(--serif);color:var(--gold-dk);letter-spacing:.1em}
html .pillar h3{font-size:clamp(2rem,3vw,2.9rem);line-height:1.02;margin:22px 0 16px}
html .pillar p{margin:0;max-width:30ch}

/* ---------------------------------------------------------------- CARE (everyday care) */
html .split-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:end;margin-bottom:clamp(56px,6vw,90px)}
html .split-head .lede{margin:0}
html .split-head .lede+.lede{margin-top:1em}
html .care{display:flex;gap:14px;height:clamp(520px,44vw,660px)}
html .care__item{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:flex-grow 1s var(--ease);outline-offset:4px;isolation:isolate}
html .care__item.is-active{flex-grow:3.1}
html .care__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);z-index:-2}
html .care__item:hover img{transform:scale(1.04)}
html .care__item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,30,27,.92) 0%,rgba(7,30,27,.62) 34%,rgba(7,30,27,.12) 62%,rgba(7,30,27,.05));z-index:-1}
html .care__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,2.4vw,36px)}
html .care__n{font:500 1rem/1 var(--serif);color:var(--gold-lt);letter-spacing:.1em;display:block;margin-bottom:14px}
html .care__item h3{font-size:clamp(1.45rem,2vw,2.1rem);line-height:1.08;color:#fff;max-width:16ch}
html .care__txt{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)}
html .care__txt>div{overflow:hidden}
html .care__txt p{margin:16px 0 0;color:rgba(255,255,255,.86);max-width:40ch;opacity:0;transition:opacity .6s .15s}
html .care__item.is-active .care__txt{grid-template-rows:1fr}
html .care__item.is-active .care__txt p{opacity:1}
html .care__plus{position:absolute;top:22px;right:22px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;color:#fff;transition:transform .6s var(--ease),background .4s}
html .care__plus svg{width:14px;height:14px}
html .care__item.is-active .care__plus{transform:rotate(45deg);background:rgba(255,255,255,.14)}
html .care-foot{display:flex;justify-content:center;margin-top:clamp(48px,5vw,72px)}

/* ---------------------------------------------------------------- MOMENTS (polaroid strip) */
html .moments{padding-block:0 clamp(96px,11vw,170px);margin-top:-1px;overflow:hidden}
html .sec--into-moments{padding-bottom:clamp(40px,5vw,72px)}
html .moments__track{display:flex;gap:28px;width:max-content;animation:drift 70s linear infinite;padding-block:24px}
html .moments:hover .moments__track{animation-play-state:paused}
html .pol{flex:none;width:clamp(200px,19vw,270px);margin:0;background:#FBF8F2;padding:12px 12px 44px;border-radius:4px;box-shadow:0 30px 50px -30px rgba(0,0,0,.6);transform:rotate(var(--r,0deg));transition:transform .6s var(--ease)}
html .pol:nth-child(odd){--r:-3deg}html .pol:nth-child(even){--r:2.5deg}html .pol:nth-child(3n){--r:-1deg;margin-top:26px}
html .pol:hover{transform:rotate(0) translateY(-8px) scale(1.03)}
html .pol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@keyframes drift{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- HOMES */
html .homes-head{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,110px);align-items:end;margin-bottom:clamp(48px,5vw,80px)}
html .homes-head .lede{margin:0 0 1em}
html .film-band{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:21/9;background:var(--forest);box-shadow:var(--shadow)}
html .film-band video,html .film-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html .film-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,30,27,.4))}
html .film-band__ctl{position:absolute;right:20px;bottom:20px;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(7,30,27,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer}
html .film-band__ctl svg{width:14px;height:14px}
html .film-band__ctl .play{display:none}
html .film-band.is-paused .film-band__ctl .play{display:block}
html .film-band.is-paused .film-band__ctl .pause{display:none}
html .houses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2vw,28px)}
html .house{display:block;text-decoration:none;color:inherit}
html .house__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.1;position:relative}
html .house__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
html .house:hover .house__img img{transform:scale(1.05)}
html .house__go{position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;background:var(--linen);color:var(--forest);display:grid;place-items:center;transform:scale(.6);opacity:0;transition:transform .6s var(--ease),opacity .4s}
html .house__go svg{width:16px;height:16px}
html .house:hover .house__go,html .house:focus-visible .house__go{transform:none;opacity:1}
html .house h3{font-size:clamp(1.55rem,2vw,1.95rem);margin:22px 0 6px}
html .house p{margin:0;color:var(--muted);font-size:16px}

/* ---------------------------------------------------------------- TEAM (film) */
html .team-head{text-align:center;max-width:860px;margin:0 auto clamp(56px,6vw,90px)}
html .team-head .h2{margin-bottom:28px}
html .team-head .lede{margin-inline:auto;max-width:62ch}
html .player{position:relative;max-width:1240px;margin-inline:auto;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:0 60px 120px -50px rgba(0,0,0,.8)}
html .player video,html .player__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html .player__poster{z-index:1;transition:opacity .5s,visibility 0s .5s}
html .player__ov{position:absolute;inset:0;z-index:2;border:0;padding:0;background:linear-gradient(0deg,rgba(5,24,22,.78) 0%,rgba(5,24,22,.18) 50%,rgba(5,24,22,.1));cursor:pointer;color:#fff;display:block;text-align:left;font:inherit}
html .player__disc{position:absolute;left:50%;top:50%;translate:-50% -50%;width:112px;height:112px;border-radius:50%;background:rgba(251,248,242,.94);color:var(--forest);display:grid;place-items:center;transition:transform .6s var(--ease)}
html .player__disc::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.45);animation:ping 2.8s var(--ease) infinite}
html .player__disc svg{width:26px;height:26px;margin-left:5px}
html .player__ov:hover .player__disc{transform:scale(1.08)}
html .player__cap{position:absolute;left:clamp(22px,3vw,44px);bottom:clamp(22px,3vw,40px);right:clamp(22px,3vw,44px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
html .player__cap small{display:block;font:600 11.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:10px}
html .player__cap strong{display:block;font:500 clamp(1.8rem,3.4vw,3.2rem)/1 var(--serif);color:#fff}
html .player__len{flex:none;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
html .player.is-playing .player__poster{opacity:0;visibility:hidden}
html .player.is-playing .player__ov{opacity:0;pointer-events:none;transition:opacity .4s}
@keyframes ping{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
html .team-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 16px;margin-top:clamp(40px,4vw,60px)}

/* ---------------------------------------------------------------- NEXT STEP */
html .next{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(48px,8vw,130px);align-items:center}
html .next__media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.6;box-shadow:var(--shadow)}
html .next__media img{width:100%;height:112%;object-fit:cover;object-position:35% 88%}
html .next__tel{display:inline-block;margin-top:34px;font:500 clamp(2.4rem,4vw,3.6rem)/1 var(--serif);color:var(--ink);text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .7s var(--ease)}
html .next__tel:hover{background-size:100% 1px}
html .refer{margin-top:clamp(72px,8vw,120px);display:grid;grid-template-columns:auto 1fr auto;gap:24px 40px;align-items:center;padding:clamp(28px,3.4vw,48px);border-radius:var(--r-lg);background:var(--forest);color:rgba(236,244,241,.82)}
html .refer__ic{width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:var(--gold-lt)}
html .refer__ic svg{width:26px;height:26px}
html .refer h3{color:#fff;font-size:clamp(1.7rem,2.4vw,2.3rem);margin-bottom:6px}
html .refer p{margin:0}

/* ---------------------------------------------------------------- FOOTER */
html .ftr{background:var(--forest-2);color:rgba(236,244,241,.72);padding-block:clamp(80px,9vw,130px) 34px;font-size:15.5px;position:relative;overflow:hidden}
html .ftr a{color:rgba(255,255,255,.9);text-decoration:none}
html .ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
html .ftr__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px}
html .ftr__logo{height:64px;width:auto;margin-bottom:34px}
html .ftr__tag{font:italic 400 clamp(1.7rem,2.6vw,2.4rem)/1.2 var(--serif);color:#fff;max-width:20ch;margin:0 0 18px}
html .ftr h4{font:600 11.5px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);margin:6px 0 22px}
html .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
html .ftr__big{font:500 clamp(1.7rem,2.4vw,2.2rem)/1.1 var(--serif);color:#fff!important}
html .ftr__bot{margin-top:clamp(64px,7vw,100px);padding-top:26px;border-top:1px solid var(--line-dk);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;font-size:13.5px;color:rgba(236,244,241,.6)}
html .ftr__bot button{background:none;border:1px solid rgba(255,255,255,.22);color:inherit;border-radius:999px;padding:8px 16px;font:inherit;cursor:pointer}
html .ftr__bot button:hover{border-color:rgba(255,255,255,.5);color:#fff}

/* ============================================================================
 * INTERIOR PAGES — shared components
 * ========================================================================== */

/* ---- page hero */
html .phero{padding-top:calc(var(--hdr-h) + clamp(44px,6vw,100px));background:var(--cream);position:relative}
html .phero__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,6vw,100px);align-items:end}
html .phero h1{font-size:clamp(2.9rem,6.4vw,6.6rem);line-height:.95;letter-spacing:-.024em}
html .phero h1 em{color:var(--teal)}
html .phero .lede{margin:30px 0 0;max-width:54ch}
html .phero--nomedia{padding-bottom:clamp(64px,7vw,110px)}
html .phero .hero__media{height:clamp(360px,72vh,780px);margin-top:clamp(48px,5vw,80px)}
html .phero.dark{background:var(--forest)}
html .phero.dark h1 em{color:var(--mint)}
html .chips{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:34px 0 0;padding:0}
html .chips li{display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line-2);border-radius:999px;font:500 14px/1.2 var(--sans);color:var(--ink)}
html .chips li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ---- call card */
html .callcard{background:var(--linen);border:1px solid var(--line);border-radius:24px;padding:28px 30px;box-shadow:0 30px 60px -40px rgba(10,43,39,.45)}
html .dark .callcard{background:rgba(255,255,255,.05);box-shadow:none}
html .callcard small{display:flex;align-items:center;gap:10px;font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk)}
html .callcard small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-green);box-shadow:0 0 0 4px rgba(36,144,120,.18)}
html .callcard .num{display:block;margin:14px 0 8px;font:500 clamp(2rem,3vw,2.6rem)/1.05 var(--serif);color:var(--ink);text-decoration:none}
html .callcard a.num:hover{color:var(--teal)}
html .callcard p{margin:0;font-size:15px;color:var(--muted)}
html .callcard .lnk{margin-top:18px}
html .callcard + .callcard{margin-top:14px}

/* ---- editorial: heading left (sticky), words right */
html .edit{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,120px);align-items:start}
html .edit__head{position:sticky;top:120px}
html .edit__head .h2{font-size:clamp(2.3rem,4.2vw,4.1rem)}
html .edit__body{font-size:clamp(1.02rem,1.15vw,1.12rem)}
html .edit__body>p:first-child{font-size:var(--fs-lede);color:var(--ink)}
html .edit__body strong{color:var(--ink);font-weight:600}
html .edit + .edit{margin-top:clamp(80px,9vw,140px);padding-top:clamp(80px,9vw,140px);border-top:1px solid var(--line)}
html .pull{margin:34px 0;padding:6px 0 6px 28px;border-left:2px solid var(--gold);font:italic 400 clamp(1.5rem,2.2vw,2rem)/1.3 var(--serif);color:var(--ink)}
html .dash{list-style:none;margin:6px 0 1.2em;padding:0}
html .dash li{padding:14px 0;border-top:1px solid var(--line);color:var(--ink)}
html .dash li:last-child{border-bottom:1px solid var(--line)}

/* ---- full-bleed photo band */
html figure{margin:0}
html .band{position:relative;overflow:hidden;aspect-ratio:21/8.5;background:var(--forest)}
html .band img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}
html .band figcaption{position:absolute;right:var(--gut);bottom:16px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(251,248,242,.92);color:var(--ink);font-size:13px}

/* ---- quote band */
html .qband{position:relative;min-height:min(78vh,760px);display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--forest)}
html .qband>img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover}
html .qband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,30,27,.9) 0%,rgba(7,30,27,.8) 45%,rgba(7,30,27,.4) 100%)}
html .qband .wrap{position:relative;z-index:2;width:100%}
html .qband blockquote{margin:0;font:500 clamp(2.4rem,5.4vw,5.4rem)/1.02 var(--serif);letter-spacing:-.018em;max-width:17ch}
html .qband blockquote em{color:var(--gold-lt)}
html .qband__mark{display:block;font:500 7rem/.5 var(--serif);color:var(--gold-lt);height:.5em;margin-bottom:10px}
html .qband figcaption{position:absolute;right:var(--gut);bottom:18px;z-index:2;font-size:13px;color:rgba(255,255,255,.78)}

/* ---- ruled lists */
html .rl{list-style:none;margin:0;padding:0;counter-reset:rl}
html .rl li{counter-increment:rl;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line);font:500 clamp(1.3rem,1.9vw,1.65rem)/1.3 var(--serif);color:var(--ink)}
html .rl li:last-child{border-bottom:1px solid var(--line)}
html .rl li::before{content:counter(rl,decimal-leading-zero);font:600 12px/1 var(--sans);letter-spacing:.12em;color:var(--gold-dk)}
html .rl--x li::before{content:"✕";font-size:13px;color:#9C4A28}
html .dark .rl--x li::before{color:#F0A987}
html .lists3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
html .lists3 h3{font-size:clamp(1.7rem,2.3vw,2.2rem);margin-bottom:22px}
html .lists3 .rl li{font-size:clamp(1.12rem,1.4vw,1.28rem)}
html .noteline{margin-top:26px;font:italic 400 1.3rem/1.4 var(--serif);color:var(--ink)}
html .darknote{margin-top:34px;padding:clamp(26px,3vw,40px);border-radius:var(--r-lg);background:var(--forest);color:rgba(236,244,241,.84);--fill:#E7C27A;--fill-rule:rgba(231,194,122,.5)}
html .darknote p{margin:0}
html .darknote p+p{margin-top:12px;font:500 clamp(1.8rem,3vw,2.6rem)/1.08 var(--serif);color:var(--gold-lt)}

/* ---- image cards */
html .icards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px)}
html .icards--2{grid-template-columns:repeat(2,1fr)}
html .icard__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.6;position:relative}
html .icards--2 .icard__img{aspect-ratio:16/11}
html .icard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
html .icard:hover .icard__img img{transform:scale(1.04)}
html .icard .cap{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
html .icard__eb{display:block;margin:26px 0 10px;font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk)}
html .icard h3{font-size:clamp(1.6rem,2.2vw,2.1rem);line-height:1.08;margin-bottom:12px}
html .icard p{margin:0 0 .8em;max-width:44ch}

/* ---- split media */
html .splitm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center}
html .splitm__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.4;box-shadow:var(--shadow);position:relative}
html .splitm__img img{width:100%;height:112%;object-fit:cover}
html .splitm__badge{position:absolute;left:20px;bottom:20px;padding:12px 18px;border-radius:999px;background:rgba(251,248,242,.94);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
html .ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
html .ticks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid var(--line);color:var(--ink)}
html .ticks li::before{content:"";width:12px;height:7px;margin-left:7px;border-left:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:rotate(-45deg) translateY(-2px)}

/* ---- FAQ */
html .faq{border-top:1px solid var(--line-2)}
html .faq details{border-bottom:1px solid var(--line-2)}
html .faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;cursor:pointer;font:500 clamp(1.35rem,2vw,1.8rem)/1.2 var(--serif);color:var(--ink)}
html .faq summary::-webkit-details-marker{display:none}
html .faq summary i{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .5s var(--ease),background .3s}
html .faq summary i svg{width:14px;height:14px}
html .faq details[open] summary i{transform:rotate(45deg);background:var(--forest);color:#fff;border-color:var(--forest)}
html .faq details p{margin:-6px 0 28px;max-width:62ch;font-size:1.05rem}

/* ---- forms (preview only — the live site posts to the WordPress enquiry handler) */
html .formsec{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,2.4vw,32px);align-items:stretch}
html .formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,52px)}
html .fld{display:block;margin-bottom:18px}
html .fld span{display:block;margin-bottom:8px;font:600 13px/1.3 var(--sans);color:var(--ink)}
html .fld span em{font-style:normal;font-weight:400;color:var(--muted)}
html .fld input,html .fld textarea{width:100%;min-height:56px;padding:14px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--linen);font:400 16px/1.4 var(--sans);color:var(--ink);transition:border-color .3s,box-shadow .3s}
html .fld textarea{min-height:140px;resize:vertical}
html .fld input:focus,html .fld textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 4px rgba(27,111,92,.14)}
html .fld2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
html .consent{font-size:13.5px;color:var(--muted);margin:6px 0 22px}
html .formok{display:none;margin-top:18px;padding:14px 18px;border-radius:14px;background:var(--sand);color:var(--ink);font-size:15px}
html .formok.is-on{display:block}
html .route{background:var(--forest);color:rgba(236,244,241,.82);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;gap:18px;--fill:#E7C27A;--fill-rule:rgba(231,194,122,.5)}
html .route h3{color:#fff;font-size:clamp(1.8rem,2.6vw,2.4rem)}
html .route .num{font:500 clamp(2rem,3vw,2.7rem)/1 var(--serif);color:#fff;text-decoration:none}
html .route p{margin:0}
html .route dl{margin:auto 0 0;padding-top:22px;border-top:1px solid var(--line-dk);display:grid;gap:18px}
html .route dt{font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:6px}
html .route dd{margin:0;font-size:15px}

/* ---- timeline */
html .tl{list-style:none;margin:0;padding:0;position:relative}
html .tl::before{content:"";position:absolute;left:126px;top:10px;bottom:10px;width:1px;background:var(--line-2)}
html .tl li{display:grid;grid-template-columns:104px 1fr;gap:44px;padding:20px 0;position:relative}
html .tl li::after{content:"";position:absolute;left:121px;top:31px;width:11px;height:11px;border-radius:50%;background:var(--cream);border:1.5px solid var(--gold)}
html .tl li.is-in::after{background:var(--gold)}
html .tl__t{text-align:right;font:500 1.9rem/1.1 var(--serif);color:var(--teal)}
html .tl__e{padding-top:8px;font-size:1.08rem;color:var(--ink-soft)}
html .tl li.tl--night .tl__e{background:var(--forest);color:rgba(236,244,241,.86);border-radius:18px;padding:22px 26px;margin-top:-4px}
html .tl li.tl--night .tl__e strong{display:block;font:500 1.7rem/1.15 var(--serif);color:#fff;margin-bottom:4px}
html .tl li.tl--night::after{background:var(--gold);box-shadow:0 0 0 6px rgba(184,146,90,.22)}

/* ---- comparison table */
html .ctable-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
html .ctable{width:100%;border-collapse:collapse;min-width:640px}
html .ctable th,html .ctable td{padding:22px 26px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
html .ctable thead th{font:600 11.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);background:var(--linen)}
html .ctable tbody th{font:500 1.25rem/1.25 var(--serif);color:var(--ink)}
html .ctable .ours{background:rgba(36,144,120,.07);color:var(--ink);font-weight:600}
html .ctable thead .ours{color:var(--teal);background:rgba(36,144,120,.1)}
html .ctable tr:last-child>*{border-bottom:0}

/* ---- the numbers: big figure + bars */
html .stats{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,100px);align-items:center;margin-top:clamp(48px,6vw,80px)}
html .big{font:500 clamp(7rem,15vw,13rem)/.8 var(--serif);letter-spacing:-.04em;color:var(--gold-lt)}
html .big sup{font-size:.4em;vertical-align:.95em;margin-right:4px}
html .big__lab{margin-top:18px;font:600 12px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff}
html .big__note{margin-top:12px;max-width:32ch}
html .bars{display:grid;gap:28px}
html .bar__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px;font-size:15.5px;color:rgba(255,255,255,.86)}
html .bar__top b{font:500 2rem/1 var(--serif);color:#fff}
html .bar__track{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
html .bar__fill{height:100%;width:0;border-radius:inherit;background:rgba(255,255,255,.32);transition:width 1.8s var(--ease)}
html .bars.is-in .bar__fill{width:var(--w)}
html .bar--ours .bar__fill{background:linear-gradient(90deg,var(--gold),var(--gold-lt))}
html .bar--ours .bar__top{color:var(--gold-lt)}
html .src{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-dk);font-size:13.5px;color:rgba(236,244,241,.66)}

/* ---- fact cards */
html .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
html .fact{padding:clamp(28px,3vw,44px);border-radius:var(--r-lg);border:1px solid var(--line-dk);background:rgba(255,255,255,.04)}
html .fact__n{font:500 clamp(3.6rem,6vw,5.4rem)/.9 var(--serif);color:#fff;letter-spacing:-.02em}
html .fact__n small{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-left:8px;vertical-align:middle}
html .fact p{margin:22px 0 0}

/* ---- statement */
html .statement{font:500 clamp(2.2rem,4.6vw,4.6rem)/1.06 var(--serif);color:var(--ink);letter-spacing:-.018em;max-width:22ch;margin:0}
html .statement em{color:var(--teal)}

/* ---- closing band on every interior page */
html .cta{position:relative;overflow:hidden}
html .cta::before{content:"";position:absolute;width:900px;height:900px;right:-320px;top:-360px;border-radius:50%;background:radial-gradient(circle,rgba(184,146,90,.22),transparent 65%);pointer-events:none}
html .cta__grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,100px);align-items:end}
html .cta h2{max-width:15ch}
html .cta h2 em{color:var(--gold-lt)}
html .cta .lede{margin-top:28px;max-width:52ch}
html .ccard{background:rgba(255,255,255,.05);border:1px solid var(--line-dk);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px)}
html .ccard__badge{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:600 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
html .ccard__badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(166,222,205,.18)}
html .ccard__row{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line-dk);text-decoration:none;color:#fff}
/* The first row never carries the divider — whether the badge is above it or not.
   #72 removed the badge site-wide, which left a stray hairline across the top of
   every contact card; parity cannot catch it because both sides render it alike. */
html .ccard__badge + .ccard__row,html .ccard__row:first-child{border-top:0}
html .ccard__ic{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center}
html .ccard__ic svg{width:17px;height:17px}
html .ccard__row small{display:block;font:600 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(236,244,241,.6)}
html .ccard__row b{display:block;font:500 1.55rem/1.2 var(--serif)}
html a.ccard__row:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
html .ccard .btn{width:100%;justify-content:space-between;margin-top:18px}

/* ---- team */
html .people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
html .person__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--sand);position:relative}
html .person__img img{width:100%;height:100%;object-fit:cover}
html .person__since{display:block;margin:22px 0 4px;font:500 clamp(2.2rem,3vw,2.9rem)/1 var(--serif);color:var(--gold-dk)}
html .person__since small{display:block;font:600 10.5px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
html .person h3{font-size:1.75rem;margin:12px 0 2px}
html .person__role{font:600 13px/1.4 var(--sans);letter-spacing:.04em;color:var(--teal);margin:0 0 10px}
html .person p{margin:0;font-size:15.5px}
html .frame-to-come{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:20px;border:1.5px dashed var(--fill-rule);border-radius:inherit;color:var(--fill);font:italic 400 1.2rem/1.3 var(--serif)}
html .frame-to-come svg{display:block;width:30px;height:30px;margin:0 auto 10px;opacity:.8}
html .founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,7vw,120px);align-items:center}
html .founder .person__img{aspect-ratio:4/4.8}

/* ---- homes */
html .hgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,28px)}
html .hcard{grid-column:span 2;text-decoration:none;color:inherit;display:block}
html .hcard:nth-child(4),html .hcard:nth-child(5){grid-column:span 3}
html .hcard__img{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;position:relative}
html .hcard:nth-child(4) .hcard__img,html .hcard:nth-child(5) .hcard__img{aspect-ratio:16/10}
html .hcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
html .hcard:hover .hcard__img img{transform:scale(1.04)}
html .hcard__no{position:absolute;left:16px;top:16px;width:44px;height:44px;border-radius:50%;background:rgba(251,248,242,.94);display:grid;place-items:center;font:500 1.1rem/1 var(--serif);color:var(--ink)}
html .hcard h3{font-size:clamp(1.6rem,2.2vw,2rem);margin:22px 0 12px}
html .hcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:15px}
html .hcard dt{font:600 11px/1.9 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html .hcard dd{margin:0;color:var(--ink)}
html .availbox{display:grid;grid-template-columns:auto 1fr auto;gap:24px 40px;align-items:center;padding:clamp(28px,3.4vw,48px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
html .availbox__ic{width:68px;height:68px;border-radius:50%;background:var(--sand);display:grid;place-items:center;color:var(--gold-dk)}
html .availbox__ic svg{width:26px;height:26px}
html .availbox h3{font-size:clamp(1.8rem,2.6vw,2.4rem);margin-bottom:6px}
html .availbox p{margin:0}
html .availbox small{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}
html .availbox .btns{margin-top:0}
html .bento{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:repeat(2,clamp(220px,24vw,340px));gap:clamp(12px,1.4vw,18px)}
html .bento figure{position:relative;border-radius:var(--r);overflow:hidden}
html .bento figure:first-child{grid-row:span 2}
html .bento figure:last-child{grid-column:span 2}
html .bento img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
html .bento figure:hover img{transform:scale(1.04)}
html .bento figcaption{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 14px;border-radius:12px;background:rgba(251,248,242,.93);font-size:13.5px;color:var(--ink)}

/* ---- updates */
html .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
html .post{display:flex;flex-direction:column;padding:clamp(26px,2.8vw,40px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);min-height:340px}
html .post--num{background:var(--forest);border-color:transparent;color:rgba(236,244,241,.82);--ink:#fff;--gold-dk:var(--gold-lt)}
html .post__fmt{font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk)}
html .post__big{font:500 clamp(4.4rem,7vw,6.4rem)/.9 var(--serif);color:var(--gold-lt);margin:26px 0 6px}
html .post h3{font-size:clamp(1.6rem,2.1vw,2rem);line-height:1.1;margin:18px 0 14px}
html .post p{margin:0;font-size:15.5px}
html .post--img{padding:0;overflow:hidden}
html .post--img img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
html .post--img .post__in{padding:clamp(26px,2.8vw,40px)}

/* ---- misc */
html .center{text-align:center}
html .mt-l{margin-top:clamp(56px,6vw,96px)}
html .sec-head{margin-bottom:clamp(44px,5vw,72px)}
html .sec-head .h2{max-width:18ch}
html .sec-head--split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,110px);align-items:end}
html .sec-head--split .lede{margin:0}
html .fillnote{margin-top:28px;padding:20px 24px;border-radius:var(--r);border:1px dashed var(--fill-rule);font-size:15px;color:var(--fill)}

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width:1180px){
  html .nav,html .hdr__tel .txt{display:none}
  html .burger{display:block}
  html .hdr__act{margin-left:auto}
}
@media (max-width:980px){
  :root{--hdr-h:76px}
  html .hero__row{grid-template-columns:1fr;gap:26px}
  html .hero__lede,html .hero__side{grid-column:auto}
  html .seal{width:112px;height:112px;top:-56px;right:calc(var(--gut) + 8px)}
  html .seal__mark{width:34px;height:34px}
  html .seal svg.ring text{font-size:9.5px}
  html .know,html .ahava__grid,html .next,html .split-head,html .homes-head{grid-template-columns:1fr}
  html .know__media{max-width:560px}
  html .know__inset{right:-4%}
  html .arch-wrap{max-width:440px;margin-inline:auto}
  html .pillars{grid-template-columns:1fr}
  html .pillar+.pillar{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  html .pillar+.pillar::before{left:0}
  html .pillar{padding:34px 0 34px}
  html .care{flex-direction:column;height:auto;gap:18px}
  html .care__item{flex:none;height:auto;aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;cursor:default;background:var(--forest-2)}
  html .care__item img{position:relative;inset:auto;height:auto;aspect-ratio:4/3;z-index:0}
  html .care__item::after{display:none}
  html .care__body{position:relative;padding:24px 22px 28px}
  html .care__txt{grid-template-rows:1fr}
  html .care__txt p{opacity:1}
  html .care__plus{display:none}
  html .houses{grid-template-columns:1fr 1fr}
  html .houses .house:last-child{grid-column:1 / -1}
  html .houses .house:last-child .house__img{aspect-ratio:16/9}
  html .film-band{aspect-ratio:16/10}
  html .next__media{aspect-ratio:4/3;order:-1}
  html .refer{grid-template-columns:1fr}
  html .ftr__top{grid-template-columns:1fr 1fr}
  html .ftr__top>div:first-child{grid-column:1 / -1}
}
@media (max-width:760px){
  html body{font-size:16.5px}
  html .hdr .btn,html .hdr__tel{display:none}
  html .hero__media{height:auto;aspect-ratio:4/4.4}
  html .seal{top:14px;right:calc(var(--gut) + 14px);width:92px;height:92px}
  html .seal__mark{width:28px;height:28px}
  html .seal svg.ring text{font-size:8.5px}
  html .hero__media img{height:120%}
  html .callbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:flex;gap:10px;transform:translateY(150%);transition:transform .6s var(--ease)}
  html .callbar.is-shown{transform:none}
  html .callbar .btn{flex:1;justify-content:center;min-height:54px;padding:6px 14px;box-shadow:0 18px 36px -14px rgba(0,0,0,.55)}
  html body.menu-open .callbar{transform:translateY(150%)}
  html .ftr{padding-bottom:110px}
  html .houses{grid-template-columns:1fr}
  html .houses .house:last-child .house__img{aspect-ratio:4/3.1}
  html .film-band{aspect-ratio:4/3.4}
  html .ftr__top{grid-template-columns:1fr}
  html .player{border-radius:var(--r)}
  html .player__disc{width:78px;height:78px}
  html .player__disc svg{width:20px;height:20px}
  html .player__len{display:none}
  html .know__inset{border-width:6px}
  html .story{grid-template-columns:1fr}
  html .btns .btn{flex:1 1 auto;justify-content:space-between}
  html .team-foot .btn{flex:1 1 100%;justify-content:space-between}
}
@media (max-width:980px){
  html .phero__grid,html .edit,html .splitm,html .formsec,html .cta__grid,html .stats,html .founder,html .sec-head--split{grid-template-columns:1fr}
  html .edit__head{position:static}
  html .lists3,html .facts,html .icards,html .posts,html .people{grid-template-columns:1fr 1fr}
  html .hgrid{grid-template-columns:1fr 1fr}
  html .hcard,html .hcard:nth-child(4),html .hcard:nth-child(5){grid-column:span 1}
  html .hcard:nth-child(5){grid-column:span 2}
  html .availbox{grid-template-columns:auto 1fr}
  html .availbox .btns{grid-column:1 / -1}
  html .band{aspect-ratio:16/9}
}
@media (max-width:760px){
  html .lists3,html .facts,html .icards,html .icards--2,html .posts,html .people,html .hgrid{grid-template-columns:1fr}
  html .hcard:nth-child(5){grid-column:auto}
  html .fld2{grid-template-columns:1fr}
  html .tl::before{left:6px}
  html .tl li{grid-template-columns:1fr;gap:4px;padding-left:34px}
  html .tl li::after{left:1px;top:28px}
  html .tl__t{text-align:left;font-size:1.5rem}
  html .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  html .bento figure{aspect-ratio:1}
  html .bento figure:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:4/3}
  html .bento figure:last-child{grid-column:span 2;aspect-ratio:16/10}
  html .band{aspect-ratio:4/3}
  html .qband{min-height:0;padding-block:110px 90px}
  html .qband::after{background:rgba(7,30,27,.8)}
  html .availbox{grid-template-columns:1fr}
  html .phero .hero__media{height:auto;aspect-ratio:4/3.6}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html [data-reveal],html .line-mask>span,html .hero .eyebrow,html .hero__row>*{opacity:1!important;transform:none!important}
  html .moments__track{width:auto;overflow-x:auto;padding-inline:var(--gut)}
}

html.is-loaded .phero .line-mask>span{transform:none}
html.no-js .phero .line-mask>span{transform:none}
html.no-js .bar__fill{width:var(--w)}
@media (prefers-reduced-motion:reduce){html .bar__fill{width:var(--w)!important}}
html .phero__grid:not(:has(> :nth-child(2))){grid-template-columns:1fr}
html .phero__grid:not(:has(> :nth-child(2))) h1{max-width:none}
/* A page that opens on a dark hero: the header starts light-on-dark and turns
   back into the linen bar once it sticks. With no :has() support the header is
   simply the standard one, which is still legible once scrolled. */
html body:has(.phero.dark) .hdr:not(.is-stuck) .hdr__logo .is-dark{display:none}
html body:has(.phero.dark) .hdr:not(.is-stuck) .hdr__logo .is-light{display:block}
html body:has(.phero.dark) .hdr:not(.is-stuck) :is(.nav a,.nav__btn,.hdr__tel,.burger){color:#fff}
/* …but not inside the cream dropdown (2026-10-06: its links went white on cream) */
html body:has(.phero.dark) .hdr:not(.is-stuck) .dd a{color:var(--ink)}
html body:has(.phero.dark) .hdr:not(.is-stuck) :is(.nav a,.nav__btn):hover{background:rgba(255,255,255,.1)}
html body:has(.phero.dark) .hdr:not(.is-stuck) :is(.hdr__tel span.ic,.burger){border-color:rgba(255,255,255,.34)}
html body:has(.phero.dark) .hdr:not(.is-stuck) .btn{--bg:#fff;--fg:var(--forest)}
html body:has(.phero.dark) .hdr:not(.is-stuck) .btn::before{background:var(--gold-lt)}

/* ============================================================================
 * HERO — background-image version (2026-09-19, the client asked for "a clean
 * hero with bg image" like the earlier immersive one).
 * The photograph is full-bleed; the copy sits bottom-left, the second paragraph
 * and the two buttons in a frosted card bottom-right, so the middle of the frame
 * — where the faces are — stays clear.
 * ⚠️ THE VEIL IS ANCHORED TO THE COPY, NOT THE VIEWPORT (§8 #28): it is a
 * pseudo-element of .hero__copy that reaches far left/up/down and fades out just
 * past the copy's right edge, so it tracks the 1360px content box at any width.
 * .hero clips it. Measured white-on-veil contrast is recorded in site-v3/README.
 * ========================================================================== */
html .hero--bg{position:relative;min-height:max(660px,100svh);padding:calc(var(--hdr-h) + 40px) 0 0;display:flex;align-items:flex-end;overflow:hidden;background:var(--forest-2);color:#fff;isolation:isolate}
html .hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden;animation:settle 2.6s var(--ease) both}
html .hero__bg img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:50% 40%}
@keyframes settle{from{transform:scale(1.1)}to{transform:none}}
/* One even wash over the whole frame, so no part of the photograph is "untinted"
   next to a tinted part — that contrast is what read as a pasted-on box. A
   near-neutral dark (not the forest green), because green over a warm interior
   turns muddy. */
html .hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(12,20,18,.5) 0,rgba(12,20,18,0) 20%),
  linear-gradient(0deg,rgba(12,20,18,.7) 0,rgba(12,20,18,.25) 32%,rgba(12,20,18,0) 55%),
  linear-gradient(rgba(12,20,18,.2),rgba(12,20,18,.2))}
html .hero__in{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:end;gap:40px 64px;padding-bottom:clamp(40px,5vw,72px)}
html .hero__copy{position:relative;max-width:780px}
/* The veil is a soft ELLIPSE anchored to the copy box — no straight edge
   anywhere, so it reads as shadow falling on the photograph, not as a panel.
   Its size comes from the copy (max 780px), so it is the same shape at every
   window width (§8 #28 — never size a veil against the viewport). */
html .hero__copy::before{content:"";position:absolute;z-index:-1;inset:-56% -48% -60% -34%;pointer-events:none;
  background:radial-gradient(ellipse 56% 60% at 40% 44%,rgba(12,20,18,.8) 0,rgba(12,20,18,.72) 45%,rgba(12,20,18,.4) 72%,rgba(12,20,18,.14) 88%,rgba(12,20,18,0) 100%)}
html .hero--bg .eyebrow{color:var(--gold-lt);max-width:470px;line-height:1.7}
html .hero--bg .hero__h1{font-size:clamp(3.1rem,6.8vw,7.4rem);color:#fff}
html .hero--bg .hero__h1 em{color:var(--gold-lt)}
html .hero--bg .hero__lede{margin:28px 0 0;max-width:46ch;color:rgba(255,255,255,.92);font-size:clamp(1.08rem,1.35vw,1.28rem)}
html .hero__sub{margin:16px 0 0;max-width:52ch;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.8)}
html .hero__acts{display:flex;flex-direction:column;gap:10px}
html .hero__acts .btn{justify-content:space-between}
html .hero__acts .btn--ghost{background:rgba(6,26,23,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html .hero__cue{position:absolute;left:50%;bottom:22px;translate:-50% 0;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px;z-index:2}
html .hero__cue span{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
html .hero--bg .eyebrow,html .hero--bg .hero__lede,html .hero--bg .hero__sub,html .hero--bg .hero__acts{opacity:0;transform:translateY(24px);transition:opacity 1.2s var(--ease),transform 1.3s var(--ease)}
html.is-loaded .hero--bg .eyebrow,html.is-loaded .hero--bg .hero__lede,html.is-loaded .hero--bg .hero__sub,html.is-loaded .hero--bg .hero__acts{opacity:1;transform:none}
html.is-loaded .hero--bg .hero__lede{transition-delay:.5s}html.is-loaded .hero--bg .hero__sub{transition-delay:.6s}html.is-loaded .hero--bg .hero__acts{transition-delay:.75s}
html.no-js .hero--bg .eyebrow,html.no-js .hero--bg .hero__lede,html.no-js .hero--bg .hero__sub,html.no-js .hero--bg .hero__acts{opacity:1;transform:none}

/* The header over the photograph: light on dark until it sticks. */
html body:has(.hero--bg) .hdr:not(.is-stuck) .hdr__logo .is-dark{display:none}
html body:has(.hero--bg) .hdr:not(.is-stuck) .hdr__logo .is-light{display:block}
html body:has(.hero--bg) .hdr:not(.is-stuck) :is(.nav a,.nav__btn,.hdr__tel,.burger){color:#fff}
/* …but not inside the cream dropdown (2026-10-06: its links went white on cream) */
html body:has(.hero--bg) .hdr:not(.is-stuck) .dd a{color:var(--ink)}
html body:has(.hero--bg) .hdr:not(.is-stuck) :is(.nav a,.nav__btn):hover{background:rgba(255,255,255,.12)}
html body:has(.hero--bg) .hdr:not(.is-stuck) :is(.hdr__tel span.ic,.burger){border-color:rgba(255,255,255,.4)}
html body:has(.hero--bg) .hdr:not(.is-stuck) .btn{--bg:#fff;--fg:var(--forest)}
html body:has(.hero--bg) .hdr:not(.is-stuck) .btn::before{background:var(--gold-lt)}

@media (max-width:980px){
  html .hero__in{grid-template-columns:1fr}
  html .hero__copy::before{right:-100vw;background:none}
  html .hero__shade{background:linear-gradient(180deg,rgba(6,26,23,.55) 0,rgba(6,26,23,.1) 22%,rgba(6,26,23,.45) 42%,rgba(6,26,23,.9) 68%,rgba(6,26,23,.95) 100%)}
  html .hero__acts{flex-direction:row;flex-wrap:wrap}
  html .hero__acts .btn{flex:1 1 240px}
  html .hero__cue{display:none}
}
@media (max-width:760px){
  /* On a phone the copy would sit on the faces, so the photograph takes the top
     of the screen and fades into the forest ground the copy stands on. */
  html .hero--bg{display:block;min-height:0;padding-top:max(300px,44svh)}
  html .hero__bg{bottom:auto;height:max(360px,52svh)}
  html .hero__bg img{inset:0;height:100%;object-position:58% 40%}
  html .hero__shade{bottom:auto;height:max(360px,52svh);background:linear-gradient(180deg,rgba(6,26,23,.55) 0,rgba(6,26,23,0) 22%,rgba(6,26,23,0) 58%,#0A2B27 100%)}
}
@media (prefers-reduced-motion:reduce){
  html .hero__bg{animation:none}
  html .hero--bg .eyebrow,html .hero--bg .hero__lede,html .hero--bg .hero__sub,html .hero--bg .hero__acts{opacity:1!important;transform:none!important}
}