/* =====================================================================
   Palmwood Real Estate — base.css
   Design tokens, reset, base elements, typography, motion primitives
   and low-level utilities. Loaded first so everything else can build
   on these foundations.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --accent:#1c7262;
  --accent-deep:#143f37;
  --ink:#111110;
  --canvas:#F4F1EA;
  --paper:#EBE5D8;
  --sand:#C9BFA8;
  --dark:#0E0E0E;
  --cream:#F4F1EA;
  --err:#a8412f;

  /* shared horizontal page padding */
  --gutter:clamp(20px,4vw,64px);
}

/* ---------- Reset & base elements ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--canvas);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-weight:400;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:var(--accent);color:var(--cream)}
::-webkit-scrollbar{width:0;background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Typography helpers ---------- */
.serif{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;
  letter-spacing:-0.012em;
}

/* ---------- Motion primitives (toggled by app.js) ---------- */
.reveal{opacity:0;transform:translateY(36px);transition:none}
.reveal.in{opacity:1;transform:none}
/* overflow-clip-margin élargit la zone de découpe sans toucher à la mise en page :
   les descendantes (g, y, p) des grands titres ne sont plus rognées.
   overflow:hidden reste en repli pour les navigateurs sans overflow:clip. */
.mask{overflow:hidden;overflow:clip;overflow-clip-margin:.16em;display:block}
.rise{display:block;transform:translateY(130%);transition:none}
.rise.in{transform:translateY(0)}
.imgwrap{overflow:hidden;position:relative}
.parax{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;will-change:transform}

/* ---------- Animated underline link ---------- */
.ulink{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .5s cubic-bezier(.19,1,.22,1);
  padding-bottom:2px;
}
.ulink:hover{background-size:100% 1px}

/* ---------- Utilities ---------- */
.u-clip{overflow:hidden}                                   /* generic overflow clip */
.u-cover{width:100%;height:100%;object-fit:cover}          /* image fills its wrapper */
.u-rel{position:relative}
.text-center{text-align:center}
.sr-only{                                                  /* screen-reader-only */
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;margin:-1px;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* honeypot field */

/* small bottom-margin steps (mostly eyebrow → heading rhythm) */
.mb-10{margin-bottom:10px}
.mb-14{margin-bottom:14px}
.mb-18{margin-bottom:18px}
.mb-20{margin-bottom:20px}
.mb-34{margin-bottom:34px}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.rise{transition:none!important;opacity:1!important;transform:none!important}
  .marq,.hero-kb{animation:none!important}
}