/* Webfonts. Served from Google Fonts — the source project loads the same three families
   via @import in its widget stylesheet. No local binaries were provided. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Josefin+Sans:wght@200;300;400;500;600&family=Jost:wght@200;300;400;500&display=swap');

:root{
  --font-display:'Josefin Sans',sans-serif;
  --font-body:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-accent:'Cormorant Garamond',Georgia,serif;
}

:root{
  /* ── Paper / surfaces ── */
  --paper:#FAF6F0;
  --paper-2:#F3ECE3;
  --card:#FFFFFF;

  /* ── Ink ── */
  --ink:#231F1B;
  --ink-2:#5F584F;
  --ink-3:#948B7F;

  /* ── Sage (primary) ── */
  --sage:#6E7A62;
  --sage-d:#4F5A45;
  --sage-l:#A8B29B;
  --sage-xl:#E4E8DE;

  /* ── Warm accents ── */
  --sand:#E3D2C0;
  --blush:#D9A192;
  --blush-xl:#F6E7E1;
  --tan:#BE9A83;

  /* ── Line ── */
  --line:#E6DCD1;
  --line-strong:rgba(35,31,27,.24);

  /* ── Status / external brand ── */
  --live:#4CAF6D;
  --whatsapp:#25D366;

  /* ── Semantic aliases ── */
  --bg-page:var(--paper);
  --bg-alt:var(--paper-2);
  --surface-card:var(--card);
  --text-title:var(--ink);
  --text-body:var(--ink-2);
  --text-muted:var(--ink-3);
  --text-on-dark:#FFFFFF;
  --text-on-dark-2:rgba(255,255,255,.72);
  --accent:var(--sage);
  --accent-press:var(--sage-d);
  --accent-soft:var(--sage-xl);
  --accent-serif:var(--sage);
  --border-subtle:var(--line);
  --numeral:var(--tan);

  /* ── Gradients ── */
  --grad-blob:linear-gradient(168deg,var(--sage-xl),var(--sand)); /* @kind color */
  --grad-anat:linear-gradient(158deg,var(--sage-l),var(--sage-d)); /* @kind color */
  --grad-cta:linear-gradient(150deg,var(--sage-xl),var(--sand)); /* @kind color */
  --grad-scrim:linear-gradient(180deg,rgba(35,31,27,.62),rgba(35,31,27,.72)); /* @kind color */
}

:root{
  /* Body scale — Jost 300, generous leading */
  --fs-body:17px; /* @kind font */
  --fs-body-mobile:16px; /* @kind font */
  --lh-body:1.72; /* @kind font */
  --ls-body:.01em; /* @kind font */
  --fw-body:300; /* @kind font */
  --fw-body-strong:500; /* @kind font */

  /* Display — Josefin Sans 200, tight negative tracking */
  --fs-h1:clamp(2.5rem,5.4vw,4.5rem); /* @kind font */
  --fs-h2:clamp(2rem,4.4vw,3.6rem); /* @kind font */
  --fs-h3:clamp(1.15rem,1.7vw,1.38rem); /* @kind font */
  --fs-manifesto:clamp(1.8rem,4.4vw,3.7rem); /* @kind font */
  --fs-pull:clamp(1.9rem,4.8vw,4rem); /* @kind font */
  --lh-display:1.06; /* @kind font */
  --lh-manifesto:1.16; /* @kind font */
  --ls-display:-.015em; /* @kind font */
  --fw-display:200; /* @kind font */

  /* Lead paragraph */
  --fs-lead:clamp(1rem,1.35vw,1.12rem); /* @kind font */

  /* Micro / eyebrow — uppercase, wide tracking */
  --fs-eyebrow:.68rem; /* @kind font */
  --ls-eyebrow:.32em; /* @kind font */
  --fs-kicker:.7rem; /* @kind font */
  --ls-kicker:.34em; /* @kind font */
  --fs-label:.66rem; /* @kind font */
  --ls-label:.22em; /* @kind font */
  --fs-btn:.78rem; /* @kind font */
  --ls-btn:.16em; /* @kind font */
  --fs-nav:.78rem; /* @kind font */
  --ls-nav:.14em; /* @kind font */
  --fs-caps-xs:.62rem; /* @kind font */
  --fs-caps-sm:.64rem; /* @kind font */

  /* Accent serif italic — numerals, signature, stats */
  --fs-stat:clamp(2rem,3.4vw,2.8rem); /* @kind font */
  --fs-step-num:1.9rem; /* @kind font */
  --fs-signature:1.8rem; /* @kind font */

  /* Measures */
  --measure-lead:54ch; /* @kind font */
  --measure-body:52ch; /* @kind font */
  --measure-manifesto:21ch; /* @kind font */
  --measure-pull:19ch; /* @kind font */
  --measure-head:60ch; /* @kind font */
}

:root{
  --max:1240px;
  --pad:clamp(20px,4.4vw,72px);

  --space-1:4px;
  --space-2:8px;
  --space-3:11px;
  --space-4:13px;
  --space-5:18px;
  --space-6:22px;
  --space-7:26px;
  --space-8:32px;
  --space-9:38px;
  --space-10:52px;

  /* Vertical rhythm of a section band */
  --section-y:clamp(80px,11vh,150px); /* @kind spacing */
  --section-y-lg:clamp(96px,14vh,180px); /* @kind spacing */
  --section-head-gap:clamp(42px,6vw,74px);
  --grid-gap:clamp(14px,1.8vw,24px);
  --grid-gap-lg:clamp(32px,5vw,76px);

  --header-h:80px;
  --header-h-solid:66px;
}

:root{
  --r:20px;        /* cards, service tiles, journey cards */
  --r-l:32px;      /* large figures, CTA panel */
  --r-pill:99px;   /* buttons, nav pills, chips */
  --r-focus:8px;
  --r-blob:52% 48% 40% 60%/58% 54% 46% 42%; /* @kind radius */
}

:root{
  --sh-card-hover:0 18px 44px rgba(35,31,27,.08);
  --sh-btn:0 10px 26px rgba(110,122,98,.24);
  --sh-btn-hover:0 16px 34px rgba(110,122,98,.3);
  --sh-portrait:drop-shadow(0 26px 44px rgba(35,31,27,.2)); /* @kind shadow */
  --sh-wa:0 12px 30px rgba(37,211,102,.36);
  --sh-header:0 1px 0 var(--line);
  --blur-header:blur(16px); /* @kind other */
  --header-veil:rgba(250,246,240,.86); /* @kind other */
}

:root{
  /* The single easing curve the brand uses everywhere */
  --e:cubic-bezier(.22,.85,.28,1); /* @kind other */
  --e-expo:cubic-bezier(.16,1,.3,1); /* @kind other */

  --dur-fast:.3s; /* @kind other */
  --dur:.45s; /* @kind other */
  --dur-slow:.5s; /* @kind other */
  --dur-reveal:1.05s; /* @kind other */

  --lift:-2px; /* @kind other */        /* button / nav hover */
  --lift-card:-6px; /* @kind other */   /* card hover */
}

/* Global keyframes used by motion components. */
@keyframes ds-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--marquee-gap,22px)))}}
@keyframes ds-marquee-vertical{from{transform:translateY(0)}to{transform:translateY(calc(-100% - var(--marquee-gap,22px)))}}

/* The global reduced-motion reset would collapse a marquee to .01ms and make it flicker;
   a marquee under that preference must simply not animate. */
@media (prefers-reduced-motion:reduce){
  [style*="ds-marquee"]{animation:none!important;transform:none!important}
}

/* Element defaults so consumers get brand type without extra classes. */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-title);font-family:var(--font-body);font-weight:var(--fw-body);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin:0}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:400;letter-spacing:0}
p{margin:0 0 1.05em;color:var(--text-body)}
em,i{font-family:var(--font-accent);font-style:italic;font-weight:300;color:var(--accent-serif)}
strong,b{font-weight:var(--fw-body-strong)}
a{color:var(--sage-d);text-decoration:none;transition:color var(--dur-fast) var(--e)}
a:hover{color:var(--sage)}
img{max-width:100%;display:block;height:auto}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:var(--r-focus)}
@media (max-width:760px){body{font-size:var(--fs-body-mobile)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

