/* ==========================================================================
   KREATED V2 — /services/brand-strategy/ · PAGE-SPECIFIC OVERRIDES
   The leaf system lives in ../leaf.css. This file holds only what this page
   uses and no other leaf does.

   ⚠ READ docs/BRAND.md §A BEFORE EDITING THIS FILE.
   BRAND.md opens with "This is not a design system. No palette has been
   created. No tokens, no type scale." DECISION 011 rules the primary sans
   INTENTIONALLY UNDECIDED. DECISION 012 confirms dark navy as a requirement
   while stating the exact hex is intentionally NOT assigned.

   Two consequences that must survive any edit:
     1. No typeface is NAMED on this page except Cormorant Garamond, which
        BRAND.md settles as the wordmark face.
     2. No hex value is PRINTED anywhere. The colour zone shows roles.

   The navy below is a field treatment for one panel. It lives here, not in
   ../services.css, precisely so it assigns nothing: it is not a token, not the
   site accent, and not an answer to DECISION 012. The direction asked for a
   deeper, more controlled blue than the rejected saturated electric field, and
   for it to stay local to this module. It does.
   ========================================================================== */
.proof--bs{padding-bottom:clamp(48px,5.6vw,84px)}

/* --------------------------------------------------------------------------
   HERO TITLE — the hub's 05 treatment: two stacked lines at 640, with the
   serif italic ampersand. Same device as the Web Design leaf's ampersand.
   -------------------------------------------------------------------------- */
/* hero weight now comes from .shero__h in leaf.css — see the note there */
.bs__h .amp{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-weight:400;padding-right:.12em}

/* --------------------------------------------------------------------------
   THE SPECIMEN — separated zones, no overlap.
   Every zone is its own panel with its own air. The composition is varied by
   PROPORTION, not by collage: the mark takes a tall block, the wordmark a wide
   one, and the three supporting zones sit in a row beneath. Nothing crosses
   anything else.
   -------------------------------------------------------------------------- */
.bs{margin:0}
.bs__grid{display:grid;gap:clamp(12px,1.2vw,18px);
  grid-template-columns:repeat(12,minmax(0,1fr))}

.bs__z{position:relative;border-radius:10px;background:var(--surface-2);
  border:1px solid color-mix(in srgb, var(--ink-1) 8%, transparent);
  padding:clamp(20px,2.2vw,32px)}
.bs__lab{margin:0;font:600 10.5px/1 'General Sans',system-ui;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gray)}
.bs__note{margin:clamp(16px,1.8vw,24px) 0 0;font-size:13px;line-height:1.6;
  color:var(--gray)}
.bs__note b{font-weight:600;color:var(--ink-1)}

/* zone 1 — the mark, on the deep navy field. Tall, and the only saturated
   surface on the page: one field, not an all-blue page. */
.bs__z--mark{grid-column:1 / 6;grid-row:1 / 3;
  display:flex;flex-direction:column;
  background:linear-gradient(158deg,#0D2350 0%,#08183579 46%,#050F22 100%),#08152F;
  border-color:rgba(120,160,255,.16)}
.bs__z--mark .bs__lab{color:rgba(219,229,255,.62)}
.bs__markart{flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,3vw,48px) 0 clamp(8px,1vw,16px)}
.bs__mk{display:block;width:clamp(120px,15vw,224px);aspect-ratio:1}
.bs__mk svg{width:100%;height:100%;display:block}
.bs__mk path{fill:var(--white)}

/* zone 2 — the wordmark, at size. The trailing tracking is cancelled so the
   optical right edge is true; BRAND.md §B records this mechanic. */
.bs__z--word{grid-column:6 / 13;grid-row:1}
.bs__word{margin:clamp(26px,3vw,44px) 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(30px,5.3vw,78px);line-height:1;color:var(--white);
  letter-spacing:.22em;margin-right:-.22em}

/* zone 3 — the one typeface BRAND.md settles */
.bs__z--type{grid-column:6 / 10;grid-row:2}
.bs__aa{margin:clamp(18px,2vw,26px) 0 0;
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(52px,6vw,88px);line-height:.9;color:var(--white)}
.bs__glyphs{margin:10px 0 0;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(15px,1.4vw,19px);letter-spacing:.06em;
  color:rgba(237,232,222,.62)}

/* zone 4 — roles, never values */
.bs__z--color{grid-column:10 / 13;grid-row:2}
.bs__tones{list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0}
.bs__tones li{display:flex;align-items:center;gap:12px;padding:7px 0;
  font-size:14px;color:var(--ink-2)}
.bs__sw{flex:none;width:22px;height:22px;border-radius:5px;
  border:1px solid color-mix(in srgb, var(--ink-1) 16%, transparent)}
/* the swatch has to be the real ground, and the ground is navy now */
.bs__sw--ink{background:#020C2E}
.bs__sw--navy{background:#0D2350}
.bs__sw--warm{background:var(--warm)}
.bs__sw--acc{background:var(--cobalt)}

/* zone 5 — the three sizes that actually ship */
.bs__z--app{grid-column:1 / 13;grid-row:3}
.bs__apps{list-style:none;margin:clamp(20px,2.2vw,28px) 0 0;padding:0;
  display:flex;align-items:flex-end;gap:clamp(28px,4.6vw,72px);flex-wrap:wrap}
.bs__apps li{display:flex;align-items:flex-end;gap:14px;
  font-size:12.5px;letter-spacing:.02em;color:var(--gray)}
.bs__apps .bs__mk path{fill:color-mix(in srgb, var(--ink-1) 88%, transparent)}
.bs__mk--l{width:56px}
.bs__mk--m{width:32px}
.bs__mk--s{width:17px}

/* zone 6 — voice. Ships hidden; the attribute does the work, this only makes
   sure a future un-hiding lands in the right cell. */
.bs__z--voice{grid-column:1 / 13;grid-row:4}
.bs__z--voice[hidden]{display:none}
.bs__voice{margin:clamp(18px,2vw,26px) 0 0;max-width:44ch;
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:21px;line-height:1.45;color:var(--warm)}

.plate__cap{margin-top:clamp(30px,3.4vw,46px)}
.bs__class{margin:clamp(22px,2.4vw,30px) 0 0;max-width:64ch;font-size:14px;
  line-height:1.6;color:var(--gray)}

/* --------------------------------------------------------------------------
   PRICING — one factual line above the figures.
   -------------------------------------------------------------------------- */
.price__note{margin:0 0 clamp(16px,1.8vw,24px);max-width:52ch;
  font-size:15px;line-height:1.55;color:var(--gray)}

/* --------------------------------------------------------------------------
   RESPONSIVE — the zones recompose, they do not shrink. Below 900 the mark
   keeps a full-width band of its own so it stays the anchor; type and colour
   pair up; application stays full width.
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .bs__z--mark{grid-column:1 / 6}
  .bs__z--word{grid-column:6 / 13}
  .bs__z--type{grid-column:6 / 10}
  .bs__z--color{grid-column:10 / 13}
}
@media (max-width:900px){
  .bs__z--mark{grid-column:1 / 13;grid-row:1}
  .bs__markart{padding:clamp(22px,5vw,40px) 0}
  .bs__z--word{grid-column:1 / 13;grid-row:2}
  .bs__z--type{grid-column:1 / 7;grid-row:3}
  .bs__z--color{grid-column:7 / 13;grid-row:3}
  .bs__z--app{grid-column:1 / 13;grid-row:4}
  .bs__z--voice{grid-row:5}
}
@media (max-width:560px){
  .bs__z--type{grid-column:1 / 13;grid-row:3}
  .bs__z--color{grid-column:1 / 13;grid-row:4}
  .bs__z--app{grid-row:5}
  .bs__z--voice{grid-row:6}
  .bs__apps{gap:22px 30px}
  .bs__apps li{flex-direction:column;align-items:flex-start;gap:10px}
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — this leaf has no animation. Nothing to disable.
   -------------------------------------------------------------------------- */