/* =========================================================================
   VERISCENTS — Fragrance Development & Brand Manufacturing
   Page-scoped stylesheet. Everything is namespaced under .vsfd so it cannot
   collide with the shared design system in styles.css.

   This file deliberately reuses the global tokens (--emerald, --ivory,
   --amber, --serif, --sans, --radius) rather than declaring a second palette,
   so the page tracks any future change to the site's design system. Global
   .wrap, .btn and .eyebrow classes are used for layout and controls; only
   the page-specific composition lives here.
   ========================================================================= */

.vsfd{
  --fd-panel:       #ffffff;
  --fd-panel-alt:   var(--ivory-deep);
  --fd-line:        var(--ivory-line);
  --fd-dark:        #1b1f1c;
  --fd-dark-soft:   #232823;
  --fd-muted:       var(--stone);
  --fd-on-dark:     rgba(244,240,231,.72);
  --fd-on-dark-dim: rgba(244,240,231,.56);
  --fd-radius:      var(--radius);
}

.vsfd section{ padding:clamp(56px,7vw,104px) 0; }
.vsfd section.is-tight{ padding-top:0; }

/* ----- Shared heads ----- */
.vsfd h2{ font-size:clamp(30px,3.6vw,52px); letter-spacing:-.02em; }
.vsfd h3{ font-size:clamp(19px,1.6vw,25px); letter-spacing:-.01em; }
.vsfd p{ color:var(--fd-muted); }

.vsfd-head{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(30px,4vw,54px);
}
.vsfd-head h2{ margin-top:14px; }
.vsfd-head .vsfd-lead{ font-size:16.5px; max-width:60ch; }

.vsfd-eyebrow--light{ color:#cfd8cf; }

.vsfd-crumb{
  font-size:12px; letter-spacing:.06em; color:var(--fd-on-dark-dim);
  margin:0 0 22px; display:flex; align-items:center; gap:9px;
}
.vsfd-crumb a:hover{ color:#f4f0e7; text-decoration:underline; }
.vsfd-crumb i{ font-style:normal; opacity:.5; }

/* =========================================================================
   Hero
   Sits below the shared site header rather than under a transparent overlay
   nav, so the two-tier header behaves exactly as it does everywhere else.
   ========================================================================= */
.vsfd-hero{
  position:relative; overflow:hidden; background:var(--fd-dark); color:#f4f0e7;
  padding:0;
}
.vsfd-hero__photo{
  position:absolute; inset:0; background-position:center 46%;
  background-size:cover; background-repeat:no-repeat;
}
.vsfd-hero__shade{
  position:absolute; inset:0;
  background:linear-gradient(96deg,
    rgba(20,24,21,.97) 0%, rgba(20,24,21,.90) 34%,
    rgba(20,24,21,.58) 62%, rgba(20,24,21,.26) 100%);
}
/* No photography supplied: a warm graphite field with a soft emerald bloom,
   consistent with the dark panels used elsewhere on the site. */
.vsfd-hero--nophoto .vsfd-hero__shade{
  background:
    radial-gradient(ellipse 60% 80% at 78% 8%,  rgba(43,116,97,.55), transparent 62%),
    radial-gradient(ellipse 50% 70% at 100% 92%, rgba(165,111,56,.34), transparent 58%),
    repeating-linear-gradient(112deg, rgba(244,240,231,.055) 0 1px, transparent 1px 42px),
    linear-gradient(118deg,#12150f 0%,#1a2019 46%,#26302a 100%);
}
.vsfd-hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,5vw,70px); align-items:center;
  padding-block:clamp(56px,8vw,110px); min-height:clamp(420px,52vw,600px);
}
.vsfd-hero h1{
  color:#f7f5f0; font-size:clamp(46px,6.4vw,104px); line-height:.9;
  letter-spacing:-.035em; margin:18px 0 0; max-width:14ch;
}
.vsfd-hero__dek{
  margin-top:24px; max-width:56ch; font-size:16.5px; color:var(--fd-on-dark);
}
.vsfd-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.vsfd-hero__note{
  align-self:end; max-width:34ch; padding:20px 0 0 22px;
  border-left:1px solid rgba(244,240,231,.24);
  font-size:14.5px; color:var(--fd-on-dark-dim);
}

/* ----- Capability strip ----- */
.vsfd-strip{ background:#faf9f6; border-bottom:1px solid var(--fd-line); }
.vsfd-strip__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,34px); min-height:76px; padding-block:18px;
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stone); overflow-x:auto;
}
.vsfd-strip__inner span{ white-space:nowrap; }

/* =========================================================================
   Three routes
   ========================================================================= */
.vsfd-routes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vsfd-route{
  background:var(--fd-panel); border:1px solid var(--fd-line);
  border-radius:var(--fd-radius); padding:clamp(24px,2.4vw,34px);
  display:flex; flex-direction:column; justify-content:space-between; gap:34px;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.vsfd-route:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#cfc6b2; }
.vsfd-route__n{
  width:42px; height:42px; border:1px solid var(--fd-line); border-radius:50%;
  display:grid; place-items:center; margin-bottom:clamp(28px,3vw,44px);
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--emerald);
}
.vsfd-route h3{ margin-bottom:14px; }
.vsfd-route p{ font-size:15px; }

/* =========================================================================
   Statement panels (photo slots)
   ========================================================================= */
.vsfd-story{ display:grid; grid-template-columns:1.12fr .88fr; gap:18px; }
.vsfd-story__card{
  position:relative; overflow:hidden; border-radius:var(--fd-radius);
  min-height:clamp(300px,34vw,480px); margin:0;
  display:flex; align-items:flex-end;
  background:linear-gradient(150deg,#1f2420,#151815);
}
.vsfd-story__card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.vsfd-story__card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(14,17,14,.82) 100%);
}
.vsfd-story__card--alt{ background:linear-gradient(150deg,#22302a,#152019); }
/* Engraved rule work and a soft bloom stand in for photography until real
   images land, so an empty slot reads as a designed panel rather than a
   missing asset. Both layers disappear the moment an <img> is present. */
.vsfd-story__card--nophoto::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 72% 20%, rgba(165,111,56,.34), transparent 54%),
    radial-gradient(circle at 14% 88%, rgba(43,116,97,.44), transparent 58%),
    repeating-linear-gradient(118deg, rgba(244,240,231,.075) 0 1px, transparent 1px 34px);
}
.vsfd-story__card--alt.vsfd-story__card--nophoto::before{
  background:
    radial-gradient(circle at 26% 18%, rgba(43,116,97,.50), transparent 56%),
    radial-gradient(circle at 88% 82%, rgba(165,111,56,.28), transparent 54%),
    repeating-linear-gradient(62deg, rgba(244,240,231,.075) 0 1px, transparent 1px 34px);
}
.vsfd-story__cap{
  position:relative; z-index:2; padding:clamp(22px,2.6vw,34px); color:#f4f0e7;
}
.vsfd-story__cap h3{ color:#f7f5f0; margin-top:10px; font-size:clamp(22px,2.2vw,32px); }

/* =========================================================================
   Process
   ========================================================================= */
.vsfd-process{
  background:var(--fd-panel-alt);
  border-top:1px solid var(--fd-line); border-bottom:1px solid var(--fd-line);
}
.vsfd-process h2{ margin-top:14px; max-width:20ch; }
.vsfd-process__grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--fd-line); border-left:1px solid var(--fd-line);
  margin-top:clamp(30px,4vw,52px);
}
.vsfd-step{
  min-height:230px; padding:26px 22px;
  border-right:1px solid var(--fd-line); border-bottom:1px solid var(--fd-line);
  background:rgba(255,255,255,.4);
  display:flex; flex-direction:column;
}
/* A fixed gap rather than margin-bottom:auto — auto pushed the number to the
   top and let the heading float to wherever the paragraph length put it, so
   "Brief" and "Package" sat on different baselines across the row. */
.vsfd-step__n{
  font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.08em; color:var(--emerald); margin-bottom:46px;
}
.vsfd-step h3{ font-size:20px; margin:0 0 10px; }
.vsfd-step p{ font-size:14px; }

/* =========================================================================
   Split panels
   ========================================================================= */
.vsfd-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
.vsfd-panel{
  position:relative; overflow:hidden; border-radius:var(--fd-radius);
  padding:clamp(30px,3.4vw,52px); min-height:clamp(400px,42vw,600px);
  display:flex; flex-direction:column; justify-content:flex-end;
}
.vsfd-panel h2{ margin-top:16px; max-width:16ch; font-size:clamp(28px,3.2vw,46px); }
.vsfd-panel p{ margin-top:18px; max-width:52ch; font-size:15.5px; }

.vsfd-panel--dark{ color:#f4f0e7; background:var(--fd-dark); }
.vsfd-panel--dark h2{ color:#f7f5f0; }
.vsfd-panel--dark p{ color:var(--fd-on-dark); }
.vsfd-panel__photo{ position:absolute; inset:0; background-size:cover; background-position:center; }
.vsfd-panel__shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(18,21,18,.20),rgba(18,21,18,.86));
}
.vsfd-panel--dark.is-nophoto .vsfd-panel__shade{
  background:
    radial-gradient(circle at 78% 16%, rgba(165,111,56,.32), transparent 50%),
    radial-gradient(circle at 12% 86%, rgba(43,116,97,.46), transparent 56%),
    repeating-linear-gradient(118deg, rgba(244,240,231,.075) 0 1px, transparent 1px 34px),
    linear-gradient(145deg,#26302a,#141712);
}
.vsfd-panel--dark > *{ position:relative; z-index:2; }
/* The rule above uses `> *`, which matches the photo and shade layers too and,
   at equal specificity but later in the source, was overriding their
   position:absolute — collapsing both to zero-height flex children so neither
   ever painted. Re-assert them with higher specificity rather than narrowing
   the content rule, which would have to enumerate every element type used. */
.vsfd-panel--dark > .vsfd-panel__photo,
.vsfd-panel--dark > .vsfd-panel__shade{ position:absolute; z-index:0; }

.vsfd-panel--light{ background:var(--fd-panel); border:1px solid var(--fd-line); }

.vsfd-services{
  margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:0 30px;
}
.vsfd-services div{
  padding:11px 0; border-bottom:1px solid var(--fd-line);
  font-size:14.5px; font-weight:600; color:var(--ink);
}

/* =========================================================================
   Formats & audiences
   ========================================================================= */
.vsfd-formats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(28px,3.4vw,44px); }
.vsfd-format{
  background:var(--fd-panel); border:1px solid var(--fd-line);
  border-radius:var(--fd-radius); padding:22px; min-height:158px;
}
.vsfd-format strong{
  display:block; margin-bottom:10px; font-family:var(--serif);
  font-size:19px; font-weight:500; color:var(--ink);
}
.vsfd-format p{ font-size:14px; }

.vsfd-aud{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(28px,3.4vw,44px); }
.vsfd-aud > div{
  background:var(--fd-panel); border:1px solid var(--fd-line);
  border-radius:var(--fd-radius); padding:24px;
}
.vsfd-aud strong{ font-family:var(--serif); font-size:19px; font-weight:500; color:var(--ink); }
.vsfd-aud p{ font-size:14px; margin-top:8px; }

/* =========================================================================
   Why (dark band)
   ========================================================================= */
.vsfd-why{ background:var(--fd-dark); color:#f4f0e7; }
.vsfd-why h2{ color:#f7f5f0; }
.vsfd-why .vsfd-lead{ color:var(--fd-on-dark); }
.vsfd-why__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(244,240,231,.14); border:1px solid rgba(244,240,231,.14);
}
.vsfd-why__item{ background:var(--fd-dark); padding:30px 26px; min-height:230px; display:flex; flex-direction:column; }
.vsfd-why__item .vsfd-step__n{ color:#bfcbc2; }
.vsfd-why__item h3{ color:#f7f5f0; font-size:20px; margin:0 0 10px; }
.vsfd-why__item p{ color:var(--fd-on-dark-dim); font-size:14px; }

/* =========================================================================
   Closing call to action
   ========================================================================= */
.vsfd-cta{ padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,100px); }
.vsfd-cta__box{
  position:relative; overflow:hidden; border-radius:var(--fd-radius);
  padding:clamp(34px,5vw,72px); color:#f4f0e7;
  background:
    radial-gradient(circle at 86% 22%, rgba(165,111,56,.26), transparent 42%),
    linear-gradient(135deg,#2f4a41 0%,#1c2a24 58%,#151815 100%);
}
.vsfd-cta__box h2{ color:#f7f5f0; margin-top:16px; max-width:18ch; }
.vsfd-cta__box p{ color:var(--fd-on-dark); max-width:62ch; margin-top:18px; font-size:16px; }
.vsfd-cta__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.vsfd-cta__fine{
  margin-top:24px; font-size:13px; color:var(--fd-on-dark-dim); max-width:66ch;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1050px){
  .vsfd-head{ grid-template-columns:1fr; align-items:start; gap:18px; }
  .vsfd-hero__inner{ grid-template-columns:1fr; }
  .vsfd-hero__note{ align-self:start; }
  .vsfd-routes{ grid-template-columns:1fr; }
  .vsfd-process__grid{ grid-template-columns:repeat(3,1fr); }
  .vsfd-split{ grid-template-columns:1fr; }
  .vsfd-story{ grid-template-columns:1fr; }
  .vsfd-formats{ grid-template-columns:repeat(2,1fr); }
  .vsfd-why__grid{ grid-template-columns:repeat(2,1fr); }
  .vsfd-aud{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .vsfd-process__grid{ grid-template-columns:1fr; }
  .vsfd-formats,.vsfd-why__grid,.vsfd-aud{ grid-template-columns:1fr; }
  .vsfd-services{ grid-template-columns:1fr; }
  .vsfd-hero h1{ font-size:clamp(40px,11vw,58px); }
  .vsfd-hero__cta .btn,.vsfd-cta__actions .btn{ width:100%; justify-content:center; }
  .vsfd-step{ min-height:0; }
}