﻿/* Design tokens, reset and base typography. Brand: off-white / cream / terracotta / ink, Heebo. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FBF9F6;
  --bg-2:#F5F1EA;
  --sand:#E6D9C8;           /* warm sand: hero circle, contrasts with skin and hair */
  --clay:#B5654A;
  --clay-deep:#A24F36;
  --ink:#2A2723;
  --ink-soft:#4A443E;
  --on-dark:#F5F1EA;
  --on-dark-soft:rgba(245,241,234,.82);
  --line:rgba(42,39,35,.14);
  --line-dark:rgba(245,241,234,.2);
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:6px;
  --gutter:clamp(20px,5vw,64px);
  --nav-h:84px;
  /* type scale */
  --fs-body:1.125rem;          /* ~18px */
  --fs-lg:clamp(1.2rem,1.05rem + .5vw,1.4rem);
  --fs-h2:clamp(2.1rem,1.4rem + 2.8vw,3.9rem);
  --fs-h1:clamp(2.7rem,1.6rem + 4.6vw,6rem);
}
/* Legacy names still used by the accessibility widget */
:root{--charcoal:var(--ink);--cream:var(--bg-2);--offwhite:var(--bg);--muted:var(--ink-soft)}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{font-family:'Heebo',sans-serif;background:var(--bg);color:var(--ink);overflow-x:clip;direction:rtl;font-size:16px;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased}
main p,main li{font-size:var(--fs-body)}
img,video{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--clay-deep);outline-offset:3px;border-radius:3px}
::selection{background:var(--clay-deep);color:#fff}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(80px,11vw,160px) 0}

/* Shared text roles */
.title{font-size:var(--fs-h2);line-height:1.08;font-weight:300;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.title .accent,.accent{color:var(--clay-deep);font-weight:500}
.eyebrow{font-size:.95rem!important;font-weight:500;letter-spacing:.04em;color:var(--clay-deep);margin-bottom:18px}
.body-lg{font-size:var(--fs-lg)!important;line-height:1.6;color:var(--ink)}
.link-quiet{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--clay);padding-bottom:2px;transition:color .25s,border-color .25s}
.link-quiet:hover{color:var(--clay-deep);border-color:var(--clay-deep)}
.flip{transform:scaleX(-1)}
/* Text for screen readers only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
