/* =========================================================
   Alchemy Group — static build (matches mockup-reference.png)
   ========================================================= */

/* ---- Fonts: loaded by theme.json (fontFace). Paths here kept correct as a
   self-contained fallback (relative to /assets/css/). ---- */
@font-face { font-family:'Spartan'; src:url('../fonts/Spartan/Spartan-Light.ttf'); font-weight:300; }
@font-face { font-family:'Spartan'; src:url('../fonts/Spartan/Spartan-Regular.ttf'); font-weight:400; }
@font-face { font-family:'Spartan'; src:url('../fonts/Spartan/Spartan-SemiBold.ttf'); font-weight:600; }
@font-face { font-family:'Spartan'; src:url('../fonts/Spartan/Spartan-Bold.ttf'); font-weight:700; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Light.ttf'); font-weight:300; }
@font-face { font-family:'Montserrat'; src:url('../fonts/Montserrat/Montserrat-Regular.ttf'); font-weight:400; }

/* ---- Palette ---- */
:root{
  --teal:#273E46;
  --teal-2:#2C444C;
  --gold:#D7A109;
  --white:#F4F5F6;
  --grey:#AEB6BA;
  --black:#292F36;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
/* body text colour governed by theme.json (#5A6166) so NEW pages/panels read
   correctly; section text colours are all set explicitly below. */
body{ font-family:'Montserrat',system-ui,sans-serif; background:var(--white); }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  /* ported from alchemy-theme/assets/css/gradient-bgs.css #home-header */
  background:radial-gradient(87.84% 285.46% at 103.24% 132.63%, #5E6E74 0%, #273E46 100%);
  overflow:hidden;
  padding:0 6%;
}
/* (grain texture removed — it was broken/invisible on the original live
   site and added unwanted specks; keeping only the teal gradient) */

/* sunburst — large, bleeding off top/bottom/right, hub right-of-center.
   hub nudged right (right:-8% -> -12%) to land on mockup's 75.5% x. */
/* SUN — locked CSS decoration (was an <img>; now a pseudo-element so it can't be
   selected/dragged/deleted in the editor). Mirrors the static box exactly. */
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-14%; top:43.5%; transform:translateY(-50%);
  width:74%; aspect-ratio:1567 / 1334;
  background:url(../svg/sun.svg) no-repeat center / contain;
}

/* vertical line in the LEFT MARGIN (left:3%, clear of the 6% text column).
   2px near-white; drawn as a CSS bar (the source SVG line is only 1px).
   Stops at the circle's top (2.5rem above the hero bottom) so it caps into
   the circle instead of passing through it. */
.hero-vline{
  display:none; /* replaced by ::before bar below for crisp 2px + clean stop */
}
.hero::before{
  content:""; position:absolute; z-index:1;
  left:4.5%; top:0; bottom:2.5rem;        /* ends at circle top */
  width:2px; background:#F4F5F6; opacity:.85;
  pointer-events:none;
}


/* nav */
.nav{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:1.1rem 0 0;
}
.brand img{ width:261px; height:auto; }   /* trimmed logo at approved visible size */
.brand{ margin-left:0; display:flex; align-items:center; }   /* logo left aligns with headline "M" (grid-6) */
.nav-links{ display:flex; gap:2.2rem; }
.nav-links a{
  font-family:'Spartan'; font-weight:400; font-size:.95rem; color:var(--white);
  padding-bottom:4px; transition:color .25s;
}
.nav-links a:hover{ color:var(--gold); }
.nav-links a.active{ border-bottom:1px solid var(--white); }

/* hamburger toggle — hidden on desktop, revealed only at mobile width */
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:2.4rem; height:2.4rem; padding:.35rem;
  background:none; border:0; cursor:pointer; z-index:5;
}
.nav-toggle span{
  display:block; width:100%; height:2px; background:var(--white);
  transition:transform .3s, opacity .3s;
}

/* hero body */
.hero-body{
  position:relative; z-index:2;
  max-width:760px;
  margin-top:16vh;
}
.hero-title{
  font-family:'Spartan'; font-weight:600;
  font-size:3.6rem; line-height:1.2;
  color:var(--gold);
  margin-bottom:1.4rem;
}
.hero-sub{
  font-family:'Montserrat'; font-weight:300;
  font-size:.92rem; line-height:1.7;
  color:var(--grey);
  margin-bottom:1.8rem;
}

/* gold-outline button */
.btn{
  display:inline-block;
  font-family:'Spartan'; font-weight:400; font-size:.82rem;
  padding:.7rem 1.6rem;
  border:1px solid; border-radius:0;
  transition:all .3s;
}
.btn-gold{ color:var(--gold); border-color:var(--gold); background:transparent; }
.btn-gold:hover{ background:var(--gold); color:var(--teal); }

/* down chevron */
.hero-chevron{
  position:absolute; z-index:2;
  left:50%; transform:translateX(-50%);
  bottom:2.5rem;
  width:34px;
  transition:transform .3s;
}
.hero-chevron img{ width:100%; }
.hero-chevron:hover{ transform:translateX(-50%) translateY(-5px); }

/* =========================================================
   SERVICES — white panel, gold timeline icons
   ========================================================= */
.services{
  position:relative;
  background:var(--white);
  padding:7rem 0;   /* no horizontal padding: row spans full section so
                       connectors share the spine's exact x-basis */
}
/* --- timeline weight: ONE variable so spine, connectors, circle all match.
   Dark teal #273E46 (from original line-v-b.svg) — defined, not faint grey. --- */
.services{ --tl:#273E46; --tlw:2px; }

/* boundary circle: centred on the services TOP edge (straddles up into hero).
   On .services which does NOT clip, so both halves show. */
.boundary-circ{
  position:absolute; z-index:3;
  left:calc(4.5% - 2.5rem); top:-2.5rem;
  width:5rem; height:5rem;
}

/* continuous vertical spine at grid-4.5, runs through all rows */
.svc-line{
  position:absolute; z-index:1;
  left:4.5%; top:0; bottom:0;
  width:var(--tlw); background:var(--tl);
}
/* (boundary circle lives on the hero as a single straddling circle) */

.svc-row{
  position:relative; z-index:2;
  display:flex; align-items:flex-start;
  margin-bottom:2.4rem;
}
/* marker column 0->16%: icon centred at grid-13.5 */
.svc-marker{
  flex:0 0 16%;
  display:flex; justify-content:flex-end; padding-right:0.8%;
  position:relative;
}
/* horizontal connector anchored to the ROW (full section width):
   starts exactly AT the spine (grid-4.5), ends at the icon's left edge
   (marker is 16% wide, icon ~3.6rem at its right end). */
.svc-row::before{
  content:""; position:absolute; z-index:0;
  top:1.8rem; left:4.5%; width:calc(16% - 4.5% - 3.6rem);
  height:var(--tlw); background:var(--tl);
}
.svc-icon{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:3.6rem; height:3.6rem;
  background:var(--white); border:1px solid #C9CDCF; border-radius:50%;
}
.svc-icon img{ width:2.4rem; height:2.4rem; display:block; }
.svc-text{ flex:1; padding-top:.3rem; padding-left:1rem; padding-right:4%; max-width:76%; }
.svc-title{
  font-family:'Spartan'; font-weight:600; font-size:1.05rem;
  color:var(--gold); margin-bottom:.6rem;
}
.svc-body{
  font-family:'Montserrat'; font-weight:300; font-size:.92rem;
  line-height:1.65; color:#5A6166;
}

/* =========================================================
   ABOUT — navy panel, gold branch left, two text-only bios.
   CORRECTION: all bio body text is LIGHT (readable on navy).
   ========================================================= */
.about{
  position:relative;
  /* deeper royal-blue radial gradient (home-panel approach). Colors sampled
     from the mockup: light slate-blue on the LEFT -> deep royal navy right.
     NO grain texture (broken on live site). */
  background:radial-gradient(120% 135% at 12% 30%, #5F698A 0%, #1A4A85 42%, #093D77 100%);
  padding:3rem 0 6rem;
  /* NOT clipped: the branch must bleed down across into the next panel */
}
/* light low-opacity spine continuing the timeline through About (lighter on
   the dark blue than the dark spine used on the white Services panel) */
.about::before{
  content:""; position:absolute; z-index:1;
  left:4.5%; top:0; bottom:0;
  width:2px; background:#F4F5F6; opacity:.28;
  pointer-events:none;
}
/* ONE continuous branch across About -> People -> tip of Contact.
   The SAME image is rendered through a clip-window in each panel, every copy
   anchored to the same page-Y (start 1900px, tip ~3410px at 1440 desktop) so
   the visible slices line up into a single unbroken botanical line. Each copy
   paints WITH its own section (z-index 0, above the section's gradient/white
   background, below the text) so no opaque later panel can cover it.
   Sized by HEIGHT (natural vertical ratio — no vertical stretch); scaleX gives
   the delicate width seen in the mockup. */
.branch-clip{
  position:absolute; inset:0; overflow:hidden;
  z-index:0; pointer-events:none;
}
.branch-img{
  position:absolute; left:3%;        /* bumped right off the edge */
  height:1170px; width:auto;         /* mostly About, stem into People (10% smaller) */
  transform:scaleX(.55);             /* gentler squish -> natural leaves, not stretched */
  transform-origin:left top;
}
/* page-anchored vertical offsets: img-top(page) = 1900 in every panel.
   about top=1847 -> 53 ; people top=3020 -> -1120 ; contact top=3336 -> -1436 */
.branch-img--about{   top:53px;    opacity:.55; filter:brightness(1.12) saturate(1.05); }   /* on blue */
.branch-img--people{  top:-1120px; opacity:.9;  filter:brightness(.72) saturate(1.35); }     /* darker gold on white */
.branch-img--contact{ top:-1436px; opacity:.75; filter:brightness(1.5)  saturate(1.1); }      /* brighter gold on teal */
/* text column grid-37 -> grid-90 */
.about-inner{
  position:relative; z-index:1;
  margin-left:37%; width:53%;
}
.bio{ margin-bottom:3rem; }
.bio-name{
  font-family:'Spartan'; font-weight:600; font-size:1.7rem;
  color:var(--gold); margin-bottom:.5rem;
}
.bio-cred{ color:#C9CDD8; font-weight:300; font-size:.62em; }
.bio-role, .bio-tags, .bio-lead, .bio-body{
  font-family:'Montserrat'; color:#EDEFF4;   /* LIGHT — the correction */
}
.bio-role{ font-size:.95rem; margin-bottom:.5rem; }
.bio-tags{ font-weight:600; font-size:.82rem; line-height:1.5; margin-bottom:1.2rem; }
.bio-lead{ font-style:italic; font-size:.92rem; margin-bottom:.7rem; }
.bio-body{ font-weight:300; font-size:.9rem; line-height:1.65; margin-bottom:.8rem; }
.bio-link{ color:var(--gold); text-decoration:underline; }

/* =========================================================
   PEOPLE / CAROUSEL — white panel, alternating quote + logo cards
   ========================================================= */
.people{
  position:relative;
  background:var(--white);
  padding:2.5rem 0;          /* tightened around the carousel (was 5rem) */
  /* NOT clipped: the branch bleeds UP from here into About */
}
/* timeline spine through People — runs ALL the way to the bottom so it
   connects continuously with the next (Contact) section's spine. */
.people::before{
  content:""; position:absolute; z-index:1;
  left:4.5%; top:0; bottom:0;
  width:2px; background:#273E46; opacity:.18;
  pointer-events:none;
}
/* carousel begins to the RIGHT of the branch (which ends ~grid-27),
   leaving a clear gap; runs to the right edge. */
.carousel{
  position:relative; z-index:2;
  margin-left:6%; width:88%;   /* full content width, 6% margins like the other sections */
}
.carousel-track{
  display:flex; gap:1.5rem; align-items:stretch;   /* all cards = tallest card's height */
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:.5rem .25rem 1.25rem;
  scrollbar-width:thin;
}
.carousel-track::-webkit-scrollbar{ height:6px; }
.carousel-track::-webkit-scrollbar-thumb{ background:#C9CDCF; border-radius:3px; }
.card{
  scroll-snap-align:start; flex:0 0 calc((100% - 6rem) / 5); box-sizing:border-box;  /* 5 cards visible (4 gaps of 1.5rem) */
  display:flex; flex-direction:column; justify-content:center;
  /* FIT TO LONGEST: min-height:0 is the flexbox equalizer; align-items:stretch on
     the track makes every card grow to the TALLEST card. No fixed height, no
     overflow -> no testimonial is ever clipped. */
  min-height:0 !important;
  padding:1.4rem; border-radius:10px;
}
.card--logo{
  align-items:center; text-align:center;
  background:#fff; border:1px solid #E0E2E4;
}
.card--logo img{ max-height:90px; max-width:100%; width:auto; object-fit:contain; }
.card--quote{ background:var(--teal); }
.card-quote{
  font-family:'Montserrat'; font-weight:400; font-size:.95rem; line-height:1.5;
  color:var(--white); margin-bottom:1rem;
}
.card-attr{ font-family:'Montserrat'; font-size:.78rem; color:var(--gold); }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:2.75rem; height:2.75rem; border-radius:50%;
  border:1px solid var(--teal); background:#fff; color:var(--teal);
  font-size:1.5rem; line-height:1; cursor:pointer; z-index:3;
  transition:background .3s, color .3s;
}
.carousel-arrow:hover{ background:var(--teal); color:#fff; }
.carousel-arrow--prev{ left:-1.6rem; }
.carousel-arrow--next{ right:-1.6rem; }

/* =========================================================
   CONTACT — dark teal panel, two columns + timeline circle
   ========================================================= */
.contact{
  position:relative;
  /* gradient like the first (hero) panel — same radial form/colors */
  background:radial-gradient(87.84% 285.46% at 103.24% 132.63%, #5E6E74 0%, #273E46 100%);
  padding:7rem 0 7rem;
  display:flex;
  min-height:60vh;
  overflow:hidden;
}
/* spine continues — SAME white as the first (hero) panel; full height. */
.contact::before{
  content:""; position:absolute; z-index:1;
  left:4.5%; top:0; bottom:0;
  width:2px; background:#F4F5F6; opacity:.45;
  pointer-events:none;
}
/* terminating circle on the spine — WHITE FILL + outline, like the
   hero↔services boundary circle */
.contact-circ{
  position:absolute; z-index:2;
  left:calc(4.5% - 2.5rem); bottom:1.5rem;
  width:5rem; height:5rem; pointer-events:none;
}
.contact-left{ width:34%; margin-left:16%; align-self:center; position:relative; z-index:2; }
.contact-tag{
  font-family:'Montserrat'; font-weight:600; font-size:.95rem; line-height:1.5;
  color:var(--white); margin-bottom:2.5rem;
}
.contact-head{
  font-family:'Spartan'; font-weight:600; font-size:1.9rem;
  color:var(--gold);
}
.contact-right{ width:34%; align-self:center; text-align:center; position:relative; z-index:2; }
.contact-q{
  font-family:'Montserrat'; font-weight:400; font-size:1.15rem;
  color:var(--white); margin-bottom:1.5rem;
}
.contact-card{
  display:inline-flex; flex-direction:column; align-items:center; gap:.6rem;
  padding:1.6rem 2.4rem; border-radius:8px; background:#FFFFFF12;
}
.contact-card img{ width:2.6rem; height:auto; }
.contact-card span{ font-family:'Spartan'; font-size:.95rem; color:var(--white); }
.contact-card:hover{ background:#FFFFFF1f; }

/* =========================================================
   FOOTER — white, logo + nav
   ========================================================= */
.footer{
  background:var(--white);
  display:flex; align-items:center; justify-content:space-between;
  padding:1.8rem 6%;
}
.footer-logo img{ width:200px; height:auto; }
.footer-nav{ display:flex; gap:2.2rem; }
.footer-nav a{
  font-family:'Spartan'; font-size:.95rem; color:var(--black);
  transition:color .25s;
}
.footer-nav a:hover{ color:var(--gold); }
.footer-nav a.active{ font-weight:700; }

/* =========================================================
   Responsive
   ========================================================= */
/* =========================================================
   MOBILE (<=780px) — ADDITIVE ONLY. Desktop (1440) is frozen and these
   rules never apply there. Single-column, full-width, no timeline, hamburger.
   ========================================================= */
@media (max-width:780px){
  /* --- strip the entire timeline system: spines, connectors, circles --- */
  .hero::before,
  .svc-line,
  .svc-row::before,
  .about::before,
  .people::before,
  .contact::before,
  .boundary-circ,
  .contact-circ{ display:none; }
  /* branch slices are anchored to desktop page-Y offsets -> meaningless on a
     phone; hide so no stray fragment shows */
  .branch-clip{ display:none; }

  /* ---------------- HERO + NAV (hamburger) ---------------- */
  .brand{ margin-left:0; }
  .brand img{ width:168px; }                 /* clearly visible, room for toggle */
  .nav{ padding:1rem 0 0; align-items:center; }
  .nav-toggle{ display:flex; }               /* show hamburger top-right */
  /* nav links collapse into a dropdown panel under the bar.
     The WP navigation block renders TWO elements that both carry .nav-links:
     the outer <nav> (which WP core forces to display:flex — we can't hide it)
     and the inner <ul>. So the panel styling must target ONLY the <ul>, and the
     <nav> wrapper must be a transparent, zero-size positioning anchor — otherwise
     its teal background + shadow show as a stray bar beside the logo. */
  nav.nav-links{
    position:absolute; top:100%; right:0;
    background:transparent; box-shadow:none; padding:0;
    min-width:0; width:auto; height:auto; border-radius:0;
  }
  ul.nav-links{
    position:absolute; top:0; right:0;
    flex-direction:column; gap:0;
    min-width:58vw; background:var(--teal);
    padding:.4rem 0; border-radius:0 0 0 10px;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    display:none; z-index:4;
  }
  ul.nav-links.open{ display:flex; }
  .nav-links a{ padding:.85rem 1.4rem; font-size:1rem; }
  .nav-links a.active{ border-bottom:0; color:var(--gold); }
  /* hamburger morphs to an X when open */
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero-body{ margin-top:18vh; max-width:100%; }
  .hero-title{ font-size:2.1rem; line-height:1.22; }
  .hero-sub{ font-size:.9rem; }
  .hero-sun{ width:120%; right:-42%; top:38%; opacity:.45; }  /* clipped by .hero overflow */

  /* ---------------- SERVICES — icon left, text right, no rail ---------------- */
  .services{ padding:3.5rem 6%; }
  .svc-row{ margin-bottom:1.9rem; }
  .svc-marker{ flex:0 0 auto; padding-right:0; }
  .svc-text{ flex:1; max-width:100%; padding-left:1rem; padding-right:0; }
  .svc-title{ font-size:1rem; }

  /* ---------------- ABOUT ---------------- */
  .about{ padding:3rem 0 4rem; }
  .about-inner{ margin-left:0; width:100%; padding:0 6%; }
  .bio-name{ font-size:1.4rem; }

  /* ---------------- PEOPLE / CAROUSEL — one card, swipeable ---------------- */
  .people{ padding:2.5rem 0; }
  .carousel{ margin-left:0; width:100%; padding:0 2.9rem; }
  .card{ flex:0 0 100%; min-height:auto; }
  .carousel-arrow{ width:2.2rem; height:2.2rem; font-size:1.3rem; }
  .carousel-arrow--prev{ left:.15rem; }
  .carousel-arrow--next{ right:.15rem; }

  /* ---------------- CONTACT — stack the two columns, centered ---------------- */
  .contact{ flex-direction:column; min-height:auto; padding:4rem 6%; gap:2.4rem; align-items:center; }
  .contact-left{ width:100%; margin-left:0; text-align:center; }
  .contact-right{ width:100%; text-align:center; }
  .contact-head{ font-size:1.6rem; }

  /* ---------------- FOOTER ---------------- */
  .footer{ flex-direction:column; gap:1rem; padding:1.6rem 6%; text-align:center; }
  .footer-logo img{ width:170px; }
  .footer-nav{ gap:1.4rem; flex-wrap:wrap; justify-content:center; }
}

/* =========================================================
   WORDPRESS INTEGRATION — block-wrapper resets + on-brand block styles.
   (Everything above is the frozen static design, ported verbatim.)
   ========================================================= */

/* The block theme wraps page content in .wp-site-blocks; let our full-bleed
   sections span edge-to-edge and kill default block margins between them. */
.wp-site-blocks{ margin:0; }
.wp-site-blocks > .wp-block-group,
.alchemy-section{ margin-block:0 !important; }
/* kill WP flow-layout block-gap BETWEEN the section patterns so they sit flush
   (static sections are adjacent; the 24px gap pushed the boundary circle down). */
main.wp-block-group > *{ margin-block:0 !important; }
.hero, .services, .about, .people, .contact, .footer{ margin-block:0 !important; }
/* WP flow-layout injects a block-gap (margin-block-start) between sibling blocks
   ON TOP of our ported CSS margins, inflating section heights vs the static.
   Kill the injected top-margin inside content; our margin-bottom rules provide spacing. */
.about-inner > *, .bio > *, .svc-text > *, .svc-row > *, .card > *,
.contact-left > *, .contact-right > *, .hero-body > *{ margin-block-start:0 !important; }
/* full-bleed section groups: our section classes already set width via padding;
   neutralize the constrained-layout max-width on the section wrappers only. */
.hero, .services, .about, .people, .contact{ max-width:none; }
/* the section is the positioning context for its locked decorations */
.hero, .services, .about, .people, .contact, .footer{ position:relative; }
/* WP image blocks used as decorations: strip figure margins */
.wp-block-image.hero-sun,
.wp-block-image.boundary-circ,
.wp-block-image.contact-circ,
.wp-block-image.branch-clip{ margin:0; }
.wp-block-image figure{ margin:0; }

/* On-brand block styles (available to the client in the editor) -------------- */
/* Circle: circular-cropped photos (e.g. headshots beside names) */
.wp-block-image.is-style-circle img{
  border-radius:50%; aspect-ratio:1/1; object-fit:cover; width:100%;
}
/* Gold frame */
.wp-block-image.is-style-gold-frame img{
  border:3px solid var(--gold); border-radius:6px;
}
/* Card group: rounded on-brand container */
.wp-block-group.is-style-card{
  background:#fff; border:1px solid #E0E2E4; border-radius:10px; padding:1.75rem;
}
/* Testimonial quote: matches the dark carousel quote cards */
.wp-block-quote.is-style-testimonial{
  background:var(--teal); color:var(--white); border:0; border-radius:10px;
  padding:1.75rem; font-style:normal;
}
.wp-block-quote.is-style-testimonial cite{ color:var(--gold); font-style:normal; }

/* =========================================================
   PAGE-BUILDER TOOLKIT — reusable on-brand panels + decorations for NEW pages.
   (Separate from the LOCKED front-page sections — those are untouched.)
   ========================================================= */
.alchemy-panel{ position:relative; width:100%; max-width:none; padding:6rem 6%; overflow:hidden; }
.alchemy-panel--hero{ background:radial-gradient(87.84% 285.46% at 103.24% 132.63%, #5E6E74 0%, #273E46 100%); color:var(--white); }
.alchemy-panel--teal{ background:var(--teal); color:var(--white); }
.alchemy-panel--navy{ background:radial-gradient(120% 135% at 12% 30%, #5F698A 0%, #1A4A85 42%, #093D77 100%); color:#EDEFF4; }
.alchemy-panel--white{ background:var(--white); color:#5A6166; }
/* headings on dark panels are gold by default */
.alchemy-panel--hero :is(h1,h2,h3),
.alchemy-panel--teal :is(h1,h2,h3),
.alchemy-panel--navy :is(h1,h2,h3){ color:var(--gold); }
.alchemy-panel .wp-block-group{ position:relative; z-index:2; }   /* content above decorations */

/* Placeable decoration motifs (for NEW sections). The image is gold by default
   (the SVGs are gold-stroked); these classes give a sensible size + let it bleed.
   Drop into a panel, then nudge size/position/opacity from the block settings. */
.alc-deco{ position:relative; z-index:0; pointer-events:none; }
.alc-deco img{ width:100%; height:auto; display:block; }
.is-style-deco-soft img{ opacity:.6; }     /* on-brand soft decoration */
.is-style-deco-faint img{ opacity:.3; }

/* Inner-page header bar (logo + nav) — NEW pages only; homepage nav is in the hero. */
.site-header{ display:flex; align-items:center; justify-content:space-between;
  background:var(--teal); padding:1.1rem 6%; position:relative; z-index:5; }
.site-header .brand img{ width:200px; height:auto; }
.site-header .nav-links{ display:flex; gap:2.2rem; }
.site-header .nav-links a{ font-family:'Spartan',sans-serif; font-weight:400; font-size:.95rem; color:var(--white); }
.site-header .nav-links a:hover{ color:var(--gold); }
.inner-page{ padding:4rem 6% 5rem; min-height:50vh; }
.inner-page .wp-block-post-title{ font-family:'Spartan',sans-serif; color:var(--teal); margin-bottom:1.5rem; }

/* Global "Gold outline" button style (available on every button, every page) */
.wp-block-button.is-style-gold-outline .wp-block-button__link{
  font-family:'Spartan',sans-serif; font-weight:400; font-size:.82rem;
  padding:.7rem 1.6rem; border:1px solid var(--gold); border-radius:0;
  color:var(--gold); background:transparent;
}
.wp-block-button.is-style-gold-outline .wp-block-button__link:hover{ background:var(--gold); color:var(--teal); }

/* Reusable starter Panel base (legacy alias) */

/* --- Core Button mapped to the static gold-outline .btn-gold (front end + editor) --- */
.hero .wp-block-button__link,
.wp-block-button.btn-gold .wp-block-button__link{
  font-family:'Spartan',sans-serif !important; font-weight:400; font-size:.82rem;
  padding:.7rem 1.6rem; border:1px solid var(--gold) !important; border-radius:0 !important;
  color:var(--gold) !important; background:transparent !important;
}
.hero .wp-block-button__link:hover,
.wp-block-button.btn-gold .wp-block-button__link:hover{
  background:var(--gold) !important; color:var(--teal) !important;
}

/* --- Navigation block styled to match the static text nav (.nav-links) --- */
.nav-links.wp-block-navigation{ gap:2.2rem; }
.nav-links.wp-block-navigation .wp-block-navigation-item__content{
  font-family:'Spartan',sans-serif; font-weight:400; font-size:.95rem; color:var(--white);
  padding:0 0 4px;
}
.nav-links.wp-block-navigation .wp-block-navigation-item__content:hover{ color:var(--gold); }
.nav-links.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content{
  border-bottom:1px solid var(--white);
}
/* logo as a core Image block (className brand) */
.wp-block-image.brand{ margin-left:0; }
.wp-block-image.brand img{ width:261px; height:auto;
  transform:translateY(7px); }   /* wordmark letter baseline on the nav text bottom */
/* the nav row — bottoms referenced; logo nudged so its TEXT baseline meets nav */
.wp-block-group.nav{ align-items:flex-end !important; }

/* --- SERVICES spine + boundary circle as LOCKED CSS decorations ---
   Values copied VERBATIM from the static build (.svc-line / .boundary-circ),
   NOT re-derived. The circle sits ON the spine x (center = 4.5%) and the hero
   spine (.hero::before, bottom:2.5rem) terminates at the circle's top. */
.services{ position:relative; }
.services::before{                    /* = static .svc-line */
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:4.5%; top:0; bottom:0; width:2px; background:#273E46;
}
.services::after{                     /* = static .boundary-circ (verbatim box) */
  content:""; position:absolute; z-index:3; pointer-events:none;
  left:calc(4.5% - 2.5rem); top:-2.5rem; width:5rem; height:5rem;
  background:url(../svg/boundary-circ.svg) no-repeat center / contain;
}
/* svc-row groups keep the verbatim flex from .svc-row (block layout = default,
   so WP doesn't inject its own flex-gap and shift the connectors). */

/* CONTACT terminating circle as LOCKED CSS (verbatim from static .contact-circ).
   Sits on the spine x, bottom-left, capping the spine at the section's end. */
.contact::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  left:calc(4.5% - 2.5rem); bottom:1.5rem; width:5rem; height:5rem;
  background:url(../svg/boundary-circ.svg) no-repeat center / contain;
}

/* --- BRANCH continuity overrides for WP ---
   The clip-window offsets are page-Y anchored; WP's section positions differ
   slightly from the static, so the per-panel `top` is recomputed here to put the
   branch image at the SAME page-Y in all three panels (one unbroken line). */
.branch-img--people{  top:-1147px; }
.branch-img--contact{ top:-1511px; }