/* =============================================================================
   TOKENS — per-client layer. Palette, type scale, spacing, easing.
   Edit this file + assets/js/site.config.js to re-skin. Nothing else.

   Client: Elite Stone Design — stone countertops, Mobile, AL & the Gulf Coast.
   ========================================================================== */

:root {
  /* ---- palette ----------------------------------------------------------
     Elite Stone have no website, so there was no page to sample. The palette
     comes from their own brand instead:
       · their logo — gold capitals on a white marble ground;
       · their captions — "🖤 Modern design 🤍 Elegant finish", black and white;
       · their work — white quartz, black granite, warm wood.
     So: a warm near-black for the dark grounds and the ink, marble whites and
     greys for the light grounds, and gold for the accent.

     The logo's own gold (#c9a227) only reaches 2.4:1 behind white text, so it
     is kept for marks on the dark ground (7.5:1) and the buttons carry a
     deeper antique gold that does pass: #86671f is 5.3:1 behind white text
     and 4.8:1 on the beige ground.
     -------------------------------------------------------------------- */
  --c-cool-dark-blue:   #171513;  /* warm near-black — dark ground + ink    */
  --c-cool-gray-blue:   #56524c;  /* body ink, warm grey (7.8:1 on white)   */
  --c-cool-gray:        #d9d6d0;  /* marble grey mid tint                   */
  --c-cool-light-gray:  #efedea;  /* lightest neutral                       */
  --c-warm-white:       #ffffff;  /* page white                             */
  --c-warm-light-beige: #f6f3ee;  /* white-marble section ground            */
  --c-warm-light-brown: #e2dacb;  /* warm hairline                          */
  --c-warm-brown:       #86671f;  /* ACCENT — antique gold: CTA, submit     */
  --c-warm-dark-brown:  #241f17;  /* warm theme ink                         */
  --c-warm-gray-brown:  #5e574b;  /* warm theme secondary ink (6.5:1)       */
  --c-soft-brown:       #e9e3d8;  /* tinted ground                          */
  --c-soft-light:       #f0ebe2;  /* tinted ground                          */
  --c-error:            #b3261e;
  /* The logo's gold. Marks on the dark ground only — see the note above. */
  --c-gold:             #c9a227;

  /* ---- typefaces -------------------------------------------------------- */
  --font-display: 'Marcellus', 'Times New Roman', Georgia, serif;
  --font-mark:    'Cinzel', 'Marcellus', 'Times New Roman', serif;
  --font-ui: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Marcellus ships in one weight. template.css reads these through
     var(--fw-display, 300), so the master still renders at 300 without them. */
  --fw-display:     400;
  --fw-display-alt: 400;
  --fw-ui:          400;

  /* ---- type scale -------------------------------------------------------
     rem against a 10px root, so 18rem == 180px on desktop. Sizes are the
     master's, unchanged. Tracking is re-cut for an inscriptional serif: the
     master's -0.06em was drawn for a light condensed serif and closes the
     wide Roman capitals of Marcellus until they collide.
     The phone column is re-cut in the media queries at the bottom.
     -------------------------------------------------------------------- */
  --fs-d1: 18rem;    --lh-d1: 0.86;  --ls-d1: -0.03em;     /* 180 */
  --fs-d2: 12rem;    --lh-d2: 0.92;  --ls-d2: -0.03em;     /* 120 */
  --fs-d3: 6rem;     --lh-d3: 1.050; --ls-d3: -0.015em;    /*  60 */
  --fs-d4: 3.8rem;   --lh-d4: 1.130; --ls-d4: -0.01em;     /*  38 */
  --fs-d5: 2.6rem;   --lh-d5: 1.308; --ls-d5: -0.005em;    /*  26 */
  --fs-body: 1.8rem; --lh-body: 1.45; --ls-body: 0.005em;  /*  18 */
  --fs-small:1.4rem; --lh-small:1.714; --ls-small:0.01em;  /*  14 */
  --fs-micro:1.2rem; --lh-micro:1.5;  --ls-micro:0.08em;   /*  12 */

  /* ---- layout ----------------------------------------------------------- */
  --gutter: 20px;                 /* full grid gutter; .col pads half each side */
  --grid-cols: 12;
  --layout-padding: 30px;         /* page gutter; staged in the queries below   */
  --container-max: 2140px;
  --radius-lg: 24px;              /* a touch squarer than the master: stone, not soft goods */
  --radius-md: 16px;
  --radius-sm: 8px;
  --header-h: 60px;

  /* Second line of the contact section's display title: the logo's gold on
     the near-black ground, 7.5:1. */
  --contact-title-alt: var(--c-gold);

  /* ---- motion ----------------------------------------------------------- */
  --ease:       cubic-bezier(.25, .74, .22, .99);  /* house curve            */
  --ease-op:    cubic-bezier(.29, .73, .45, 1);    /* opacity partner        */
  --ease-inout: cubic-bezier(.55, 0,  .10, 1);     /* loader / header        */
  --ease-intro: cubic-bezier(.30, .84, .24, 1);    /* hero entrance          */
  --ease-line:  cubic-bezier(.35, 0,  .70, 1);     /* svg line draw          */
  --dur-title: 1.4s;
  --dur-text:  1s;
  --dur-line:  1.8s;
  --dur-block: 1.6s;
  --dur-intro: 1.2s;
  --dur-loader:1.375s;
  --dur-fast:  .2s;
  --dur-ui:    .4s;
  --stagger:   40ms;              /* per split line */

  /* ---- theme (light, the default) --------------------------------------- */
  --t-background: var(--c-warm-white);
  --t-heading:    var(--c-cool-dark-blue);
  --t-secondary:  var(--c-cool-gray-blue);
  --t-text:       var(--c-cool-gray-blue);
  --t-icon:       var(--c-cool-gray-blue);
  --t-line:       var(--c-cool-light-gray);
  --t-primary:    var(--c-cool-dark-blue);
  --t-on-primary: var(--c-warm-white);
  --t-menu-text:  var(--c-warm-white);
  --t-menu-bg:    var(--c-cool-dark-blue);
}

/* The wordmark and the loader mark carry no weight of their own in
   template.css, so they are set from here without touching it: Cinzel
   capitals, letterspaced like the logo. */
.header .header__logo,
.menu .menu__mark,
.preloader .preloader__mark { font-family: var(--font-mark); font-weight: 600; letter-spacing: 0.06em; }

/* ---- themes. Any element can carry one; they cascade through --t-*. ------ */
.ui-light           { --t-background: var(--c-warm-white);       --t-heading: var(--c-cool-dark-blue);  --t-secondary: var(--c-cool-gray-blue);  --t-text: var(--c-cool-gray-blue);  --t-icon: var(--c-cool-gray-blue);  --t-line: var(--c-cool-light-gray);  --t-primary: var(--c-cool-dark-blue);  --t-on-primary: var(--c-warm-white); color: var(--t-text); }
.ui-light-lightgray { --t-background: var(--c-cool-light-gray);  --t-heading: var(--c-cool-dark-blue);  --t-secondary: var(--c-cool-gray-blue);  --t-text: var(--c-cool-gray-blue);  --t-icon: var(--c-cool-gray-blue);  --t-line: var(--c-cool-gray);        --t-primary: var(--c-cool-dark-blue);  --t-on-primary: var(--c-warm-white); color: var(--t-text); }
.ui-light-coolgray  { --t-background: var(--c-cool-gray);        --t-heading: var(--c-cool-dark-blue);  --t-secondary: var(--c-cool-gray-blue);  --t-text: var(--c-cool-gray-blue);  --t-icon: var(--c-cool-gray-blue);  --t-line: var(--c-cool-light-gray);  --t-primary: var(--c-cool-dark-blue);  --t-on-primary: var(--c-warm-white); color: var(--t-text); }
.ui-light-beige     { --t-background: var(--c-warm-light-beige); --t-heading: var(--c-warm-dark-brown); --t-secondary: var(--c-warm-brown);      --t-text: var(--c-warm-gray-brown); --t-icon: var(--c-warm-brown);      --t-line: var(--c-warm-light-brown); --t-primary: var(--c-warm-dark-brown); --t-on-primary: var(--c-warm-white); color: var(--t-text); }
.ui-dark            { --t-background: var(--c-cool-dark-blue);   --t-heading: var(--c-warm-white);      --t-secondary: var(--c-gold);            --t-text: var(--c-cool-gray);       --t-icon: var(--c-gold);            --t-line: #3a3631;                   --t-primary: var(--c-warm-brown);      --t-on-primary: var(--c-warm-white); --t-menu-text: var(--c-cool-dark-blue); --t-menu-bg: var(--c-warm-white); color: var(--t-text); }
.ui-on-image        { --t-background: var(--c-soft-brown);       --t-heading: var(--c-warm-white);      --t-secondary: var(--c-warm-white);      --t-text: var(--c-warm-white);      --t-icon: var(--c-warm-white);      --t-line: rgba(255,255,255,.35);     --t-primary: var(--c-warm-white);      --t-on-primary: var(--c-cool-dark-blue); color: var(--t-text); }

.ui-background                 { background: var(--t-background); }
.ui-light-background           { background: var(--c-warm-white); }
.ui-light-lightgray-background { background: var(--c-cool-light-gray); }
.ui-light-coolgray-background  { background: var(--c-cool-gray); }
.ui-light-beige-background     { background: var(--c-warm-light-beige); }
.ui-dark-background            { background: var(--c-cool-dark-blue); }

/* =============================================================================
   RESPONSIVE STAGES
   The reference keeps the root at 10px and steps --layout-padding by width.
   We do the same, and re-cut the display sizes for phones rather than
   shrinking them proportionally (see README, "Responsive strategy").
   ========================================================================== */

/* --- phone ---------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --layout-padding: 24px;
    --gutter: 16px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --header-h: 46px;

    /* Chosen to fill a 390px measure, not derived from the desktop numbers.
       Marcellus is wide, so these sit a step under the master's column. */
    --fs-d1: clamp(4.2rem, 12.6vw, 6.2rem);  --lh-d1: 0.96;  --ls-d1: -0.02em;
    --fs-d2: clamp(3.8rem, 11.2vw, 5.4rem);  --lh-d2: 1.00;  --ls-d2: -0.02em;
    --fs-d3: clamp(2.8rem,  7.8vw, 3.8rem);  --lh-d3: 1.12;  --ls-d3: -0.01em;
    --fs-d4: clamp(2.2rem,  6.0vw, 2.9rem);  --lh-d4: 1.18;  --ls-d4: -0.005em;
    --fs-d5: 2.0rem;    --lh-d5: 1.30;
    --fs-body: 1.6rem;  --lh-body: 1.55;
    --fs-small: 1.4rem; --lh-small: 1.55;
    --fs-micro: 1.2rem;
  }
}

/* --- tablet / large phone landscape --------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --layout-padding: clamp(40px, 9vw, 130px);
    --fs-d1: clamp(7.2rem, 11vw,  13rem);   --lh-d1: 0.88; --ls-d1: -0.025em;
    --fs-d2: clamp(5.6rem, 8.4vw,  9rem);   --lh-d2: 0.94; --ls-d2: -0.025em;
    --fs-d3: clamp(3.6rem, 5vw,    5rem);   --lh-d3: 1.06;
    --fs-d4: clamp(2.6rem, 3.2vw,  3.4rem); --lh-d4: 1.12;
    --fs-d5: 2.2rem;
    --fs-body: 1.7rem;
  }
}

/* --- desktop: the reference's own numbers --------------------------------- */
@media (min-width: 1200px) { :root { --layout-padding: clamp(130px, 25vw - 170px, 190px); } }
@media (min-width: 1440px) { :root { --layout-padding: clamp(190px, 12.5vw + 10px, 250px); } }
@media (min-width: 1920px) { :root { --layout-padding: 250px; } }

/* ---------------------------------------------------------------------------
   Short laptop screens (1366x768 and the like, which leave about 680px of
   viewport once the browser chrome is on). Height is what is scarce here, so
   the display sizes become viewport-height led. Gated above 760px tall, so
   1440x900, 1920x1080 and every measured viewport are untouched.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-height: 760px) {
  :root {
    --fs-d1: clamp(5.6rem, 15vh, 18rem);
    --fs-d2: clamp(4.8rem, 13vh, 12rem);
    --fs-d3: clamp(3.2rem, 7.4vh, 6rem);
    --fs-d4: clamp(2.4rem, 4.8vh, 3.8rem);
    --fs-d5: clamp(2rem, 3.4vh, 2.6rem);
  }
}

/* The roofline mark: the logo's gold over photographs and the dark grounds,
   the deeper antique gold on the white header glass and the light footer,
   where the bright gold would only reach 2.4:1. */
:root { --logo-mark: var(--c-gold); --logo-mark-stuck: var(--c-warm-brown); }
.ui-light .logo-mark, .footer .logo-mark { color: var(--c-warm-brown); }

/* The logo lockup is gold, like the logo: the logo's own gold over the hero
   and the dark grounds, the deeper antique gold on the white header glass
   and the light footer. The header and menu sizes are the lockup's em base. */
.header .header__logo, .menu .menu__mark, .footer .header__logo { color: var(--c-gold); }
.header.is-stuck .header__logo, .footer .header__logo { color: var(--c-warm-brown); }
.header .header__logo { font-size: 2.2rem; }
.header.is-stuck .header__logo { font-size: 1.9rem; }
.logo-lockup .logo-line--0 { letter-spacing: .05em; }
@media (max-width: 767px) { .header .header__logo, .header.is-stuck .header__logo { font-size: 1.55rem; padding-top: 4px; } }

/* Their hero is a white marble kitchen, so white type needs more ground than
   the master's top-and-bottom scrim gives. A left-weighted wash sits behind
   the text column and fades out before the marble on the right. */
:root {
  --hero-scrim:
    linear-gradient(90deg, rgba(23,21,19,.62) 0%, rgba(23,21,19,.42) 38%, rgba(23,21,19,.10) 70%, rgba(23,21,19,0) 100%),
    linear-gradient(180deg, rgba(23,21,19,.45) 0%, rgba(23,21,19,.05) 30%, rgba(23,21,19,.40) 100%);
  --hero-text-shadow: 0 2px 30px rgba(10, 9, 8, .35);
}
@media (max-width: 767px) {
  :root { --hero-scrim: linear-gradient(180deg, rgba(23,21,19,.55) 0%, rgba(23,21,19,.35) 45%, rgba(23,21,19,.62) 100%); }
}

/* Entry curtain: their logo in gold on the near-black ground. The roofline
   draws itself in, then ELITE STONE and DESIGN rise beneath it — all inside
   the curtain's hold (SITE.preloaderHold). */
.preloader .preloader__mark { color: var(--c-gold); font-size: clamp(3.2rem, 5.4vw, 5rem); }
.preloader .logo-lockup .logo-mark { width: 2.6em; margin-bottom: .3em; }
.preloader .logo-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: logoDraw .9s .1s var(--ease-inout) forwards; }
.preloader .logo-line { opacity: 0; transform: translateY(.35em); animation: logoRise .7s var(--ease) forwards; }
.preloader .logo-line--0 { animation-delay: .45s; }
.preloader .logo-line--1 { animation-delay: .65s; }
@keyframes logoDraw { to { stroke-dashoffset: 0; } }
@keyframes logoRise { to { opacity: 1; transform: none; } }

/* About card: equal space above and below. The template lifts the card 8vh
   over the seam between two grounds, which only reads when the grounds
   differ; ours are near-identical marble whites, so the lift just left ~2vh
   above the card and 14vh below it. */
#about .panel__card { margin-top: 0; }
#about .panel__bottom { padding-top: 9vh; padding-bottom: 9vh; }