/* ============================================================================
   MAJORD / ESTIA / TURNWISE, shared design system.
   FULL REDESIGN 01/08/2026, second pass, per Alexandre: the site "works but looks
   like an old site that barely evolved". Brief: Apple-level finish. Elegant motion,
   strong visual hierarchy, fluid transitions, living sections, premium feel in the
   first seconds. Reference points given: apple.com, attio.com, lassie.ai, sanalabs.com.
   What this file establishes:
     1. Tokens        design decisions as variables (colour, type, space, easing, depth)
     2. Motion        scroll-reveal system, stagger, sticky sequences. Honours
                      prefers-reduced-motion: everything degrades to static.
     3. Primitives    buttons, cards, device frames, bento, marquee, stat bands
     4. Legacy        every class the 18 existing pages already use, restyled, so no
                      page breaks while the new homepage components sit alongside.
   Products share the grammar, not the colour. Majord is the default (terracotta);
   Estia and Turnwise override the accent through body.brand-* below.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Inter:wght@300;400;500;600;700&display=swap');


/* ---------- 1. TOKENS ---------- */
:root{
  /* Ink & canvas. Warm near-black rather than pure black: reads richer against cream. */
  --ink:#14110e; --ink-2:#6c6357; --ink-3:#9a9184;
  --bg:#ffffff; --panel:#ffffff; --wash:#f7f3ed; --wash-2:#efe8de;
  --dark:#100e0c; --dark-2:#1c1916;
  --hair:rgba(20,17,14,.10); --hair-2:rgba(20,17,14,.06);


  /* Accent, Majord: terracotta. --acc-glow is the light-emitting version, used only
     in gradients, glows and dark sections, never as body text. */
  --acc:#a1502e; --acc-bright:#c4693f; --acc-glow:#e8834f; --acc-dark:#7a3a20;
  --acc-tint:rgba(161,80,46,.10);
  /* Legacy aliases: 18 pages still reference these names. */
  --teal:var(--acc); --teal-bright:var(--acc-bright); --green:var(--acc); --blue:#5b6673;


  /* Type. Fraunces for display (editorial, gives the product a voice a default
     geometric sans cannot), Inter for everything functional. */
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,Segoe UI,sans-serif;
  --t-hero:clamp(38px,5vw,66px);
  --t-h1:clamp(36px,5.4vw,64px);
  --t-h2:clamp(30px,4.1vw,50px);
  --t-h3:clamp(20px,2vw,25px);
  --t-lead:clamp(17px,1.55vw,21px);


  /* Space */
  --sec:clamp(72px,10vw,148px);
  --gap:clamp(18px,2.2vw,28px);


  /* Depth & shape */
  --r:20px; --r-lg:28px; --r-sm:12px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,17,14,.04), 0 6px 18px rgba(20,17,14,.045);
  --sh-2:0 2px 6px rgba(20,17,14,.05), 0 18px 44px rgba(20,17,14,.09);
  --sh-3:0 30px 80px rgba(20,17,14,.20), 0 8px 24px rgba(20,17,14,.10);


  /* Easing. --ease is the "settle" curve used for every reveal and transform:
     fast start, long soft landing. This single curve is most of the premium feel. */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.22,.61,.36,1);
}
body.brand-estia{--acc:#2f5a76;--acc-bright:#3e7396;--acc-glow:#5b9bc4;--acc-dark:#1f3d51;--acc-tint:rgba(47,90,118,.10);}
body.brand-turnwise{--acc:#8f6015;--acc-bright:#ad7a26;--acc-glow:#d5a244;--acc-dark:#6b480f;--acc-tint:rgba(143,96,21,.10);}


/* ---------- 2. BASE ---------- */
*{box-sizing:border-box;}
/* overflow-x:clip, NOT hidden. `hidden` turns html/body into a scroll container, which
   silently kills position:sticky on the header and on the scroll sequence. `clip` gives
   the same protection against sideways scroll without creating that container. */
html{scroll-behavior:smooth;max-width:100%;overflow-x:clip;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  max-width:100%;overflow-x:clip;}
@supports not (overflow-x:clip){html,body{overflow-x:hidden;}}
img{max-width:100% !important;height:auto;display:block;}
a{color:var(--acc);text-decoration:none;transition:color .2s var(--ease-2);}
a:hover{color:var(--acc-bright);}
p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:600;color:var(--ink);line-height:1.08;margin:0;
  letter-spacing:-.022em;font-optical-sizing:auto;}
h3,h4{line-height:1.18;letter-spacing:-.012em;}
h1 em,h2 em,.em{font-style:italic;font-weight:600;color:var(--acc);}
::selection{background:var(--acc);color:#fff;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 24px;}


/* ---------- 3. MOTION SYSTEM ----------
   .reveal starts displaced and transparent; JS adds .in when the element enters the
   viewport (see the shared snippet at the bottom of each page). data-d="1..6" staggers
   siblings. Transform+opacity only, so it stays on the compositor and never janks. */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}.reveal[data-d="6"]{transition-delay:.42s}
.reveal-s{opacity:0;transform:scale(.96);transition:opacity 1s var(--ease),transform 1.1s var(--ease);}
.reveal-s.in{opacity:1;transform:none;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes riseIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-s{opacity:1!important;transform:none!important;transition:none!important;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
}


/* ---------- 4. HEADER ---------- */
.util-strip{background:var(--dark);color:#b8b0a4;font-size:12.5px;padding:8px 0;text-align:center;letter-spacing:.01em;}
.util-strip a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.35);}
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease-2),background .3s var(--ease-2);}
header.site.scrolled{border-bottom-color:var(--hair);background:rgba(255,255,255,.86);}
/* Over a dark cinematic hero the bar disappears entirely and its contents invert, then it
   settles back to the light bar as soon as the hero is behind you. */
header.site.over-hero{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;}
header.site.over-hero .brand{color:#fff;}
header.site.over-hero nav.primary a{color:rgba(255,255,255,.70);}