/* ==========================================================================
   DIVINE — Dr. Bhumi Patel
   global.css  ·  tokens + common components (single source of truth)
   --------------------------------------------------------------------------
   Everything reusable lives here. Section files never re-define these.
   ========================================================================== */

/* -------------------------------- TOKENS -------------------------------- */
:root{
  /* palette (from the Divine logo) */
  --indigo:#393182; --indigo-deep:#211C4E; --indigo-700:#2E2768; --indigo-mid:#4A3FA0;
  --indigo-100:#ECEBF6; --indigo-50:#F5F4FB;
  --red:#E2231A; --red-deep:#B5140C; --red-50:#FCEDEC;
  --gold:#C29B63; --gold-deep:#A07E45; --gold-50:#F6F0E5;
  --ivory:#F7F4EE; --ivory-deep:#EFEAE0; --paper:#FCFAF6; --white:#FFFFFF;
  --ink:#1A1726; --ink-soft:#45414F; --muted:#837F8E; --line:#E7E2D8;

  /* type families */
  --serif:'Hatton','Cormorant Garamond',Georgia,serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Jost','Public Sans',sans-serif;

  /* fluid type scale */
  --t-mega:clamp(3.4rem,8.5vw,8.5rem);
  --t-display:clamp(2.8rem,6vw,5.5rem);
  --t-h1:clamp(2.4rem,4.4vw,4rem);
  --t-h2:clamp(1.9rem,3.4vw,3rem);
  --t-h3:clamp(1.3rem,1.8vw,1.6rem);
  --t-lead:clamp(1.05rem,1.4vw,1.25rem);
  --t-body:1.0625rem;
  --t-sm:.875rem; --t-xs:.78rem; --t-eyebrow:.72rem;

  /* spacing & layout */
  --pad-x:clamp(1.25rem,4vw,4rem);
  --sec-y:clamp(5rem,9vw,9rem);
  --max:1320px; --max-narrow:760px;
  --r-sm:12px; --r-md:20px; --r-lg:32px; --r-xl:44px; --r-pill:999px;

  --shadow-sm:0 4px 20px rgba(33,28,78,.06);
  --shadow:0 18px 50px rgba(33,28,78,.10);
  --shadow-lg:0 40px 90px rgba(33,28,78,.16);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.45s;
}

/* -------------------------------- RESET --------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;}
body{font-family:var(--sans);font-size:var(--t-body);line-height:1.7;color:var(--ink);
  background:var(--ivory);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:200;line-height:1.05;letter-spacing:-.02em;}
::selection{background:var(--indigo);color:var(--ivory);}

/* ------------------------------- FONTS ---------------------------------- */
/* PP Hatton — three weights only (the family ships Ultralight 200, Medium 500, Bold 700).
   OTF, used as-is. No synthetic 300/400 weights. */
@font-face{font-family:'Hatton';src:url('../fonts/PPHatton-Ultralight.otf') format('opentype');font-weight:200;font-style:normal;font-display:optional;}
@font-face{font-family:'Hatton';src:url('../fonts/PPHatton-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:optional;}
@font-face{font-family:'Hatton';src:url('../fonts/PPHatton-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:optional;}

/* ========================== COMMON COMPONENTS =========================== */

/* container + section rhythm */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x);}
.container--narrow{max-width:var(--max-narrow);}
.section{padding-block:var(--sec-y);}

/* eyebrow: • – LABEL  (one component, colour modifiers only) */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:var(--t-eyebrow);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);}
.eyebrow .disc{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;}
.eyebrow .dash{width:22px;height:1px;background:currentColor;opacity:.8;flex:none;}
.eyebrow--indigo{color:var(--indigo);}
.eyebrow--red{color:var(--red);}
.eyebrow--gold{color:var(--gold-deep);}
.eyebrow--ondark{color:var(--gold);}

/* title + lead */
.title{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.04;
  letter-spacing:-.02em;color:var(--ink);}
.title--lg{font-size:var(--t-h1);}
.title .accent{color:var(--indigo);}
.title .accent-red{color:var(--red);}
.title .italic{font-style:italic;}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--ink-soft);font-weight:300;}

/* buttons: ONE base + modifiers */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--mono);
  font-size:.8rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:1.05em 2em;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),transform var(--dur) var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn .ico{font-size:1.05em;transition:transform var(--dur) var(--ease);}
.btn:hover .ico{transform:translateX(3px);}
.btn--primary{background:var(--indigo);color:var(--ivory);}
.btn--primary:hover{background:var(--indigo-deep);}
.btn--red{background:var(--red);color:var(--white);}
.btn--red:hover{background:var(--red-deep);}
.btn--ghost{border-color:rgba(57,49,130,.3);color:var(--indigo);}
.btn--ghost:hover{border-color:var(--indigo);background:var(--indigo);color:var(--ivory);}
.btn--light{background:var(--ivory);color:var(--indigo);}
.btn--light:hover{background:var(--white);}
.btn--ondark{border-color:rgba(255,255,255,.4);color:var(--ivory);}
.btn--ondark:hover{background:rgba(255,255,255,.12);border-color:var(--ivory);}

/* arrow text-link */
.link{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:var(--t-sm);
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);
  transition:gap var(--dur) var(--ease),color var(--dur) var(--ease);}
.link .ico{transition:transform var(--dur) var(--ease);}
.link:hover{gap:.85em;color:var(--red);}
.link:hover .ico{transform:translateX(4px);}
.link--ondark{color:var(--ivory);}
.link--ondark:hover{color:var(--gold);}

/* pill (keyword chip) */
.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.04em;padding:.5em 1em;border-radius:var(--r-pill);
  border:1px solid rgba(57,49,130,.18);color:var(--indigo);}
.pill--onphoto{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.92);}

/* tag (tiny label) */
.tag{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-deep);}

/* oversized index numeral (used by dental/aesthetics lists) */
.numeral{font-family:var(--serif);font-weight:200;color:var(--gold);}