/* ==========================================================================
   BARTON DESIGN CENTRE — Design System
   Warm, editorial, coastal-craft aesthetic. Serif headings (Fraunces) paired
   with a clean sans (Inter). Deep harbour ink + warm brass accent.
   ========================================================================== */

:root{
  /* ---- Colour ----
     Brand: dark purple #41296E (logo ground, white text on it) + lilac #BD94BF.
     Kept deliberately as the minority colour, not the whole palette — gold,
     sage and terracotta carry most of the decorative/complementary work so
     the site doesn't read as monochrome purple. */
  --bg:            #F8F4EC;
  --bg-alt:        #F0E9DA;
  --bg-deep:       #E9E0CC;
  --surface:       #FFFDF8;
  --ink:           #1E1B22;
  --ink-soft:      #43394F;
  --body:          #47424A;
  --muted:         #746E78;
  --border:        #E2D7C0;
  --border-soft:   #ECE3D0;

  --primary:       #41296E;   /* brand dark purple */
  --primary-dark:  #2C1B4C;
  --primary-tint:  #5E3D91;

  --lilac:         #BD94BF;   /* brand lilac */
  --lilac-tint:    #F1E7F1;
  --lilac-dark:    #96679B;

  --accent:        #BD8544;   /* warm brass — complementary, does most of the CTA work */
  --accent-dark:   #9C6C34;
  --accent-tint:   #E8CFA0;
  --accent-soft:   #F4E9D6;

  --sage:          #6E8A76;   /* muted sage — complementary */
  --sage-tint:     #E4EAE1;
  --terracotta:    #B96A46;   /* complementary */

  --star:          #C79A3C;
  --white:         #FFFFFF;

  /* ---- Type ---- */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
  --step-3:  clamp(1.8rem, 1.6rem + 1vw, 2.4rem);
  --step-4:  clamp(2.2rem, 1.85rem + 1.75vw, 3.2rem);
  --step-5:  clamp(2.7rem, 2.15rem + 2.75vw, 4.4rem);

  /* ---- Space ---- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.2rem;
  --sp-7: 4.8rem;
  --sp-8: 6.4rem;
  --sp-9: 9.6rem;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(23,50,58,0.07);
  --shadow-md: 0 10px 30px rgba(23,50,58,0.10);
  --shadow-lg: 0 24px 60px rgba(23,50,58,0.16);

  --wrap: 1180px;
  --ease: cubic-bezier(.25,.8,.35,1);
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{ margin:0; }
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, select, textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

body{
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--font-serif);
  color:var(--ink);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-0.01em;
}
h1{ font-size:var(--step-5); font-weight:560; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); font-family:var(--font-sans); font-weight:700; }

p{ max-width:64ch; }
p.lede{ font-size:var(--step-1); color:var(--ink-soft); }

.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link{
  position:absolute; left:1rem; top:-4rem; background:var(--ink); color:var(--white);
  padding:0.8rem 1.4rem; border-radius:var(--radius-sm); z-index:999; transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---- Layout helpers ---- */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 2.5rem); }
.section{ padding-block:var(--sp-8); }
.section--tight{ padding-block:var(--sp-6); }
.section--alt{ background:var(--bg-alt); }
.section--deep{ background:var(--primary); color:#DCE7E2; }
.section--deep h2, .section--deep h3{ color:var(--white); }
.section--deep p{ color:#C9B6D2; }

.grid{ display:grid; gap:var(--sp-5); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){
  .grid-3, .grid-4, .grid-5{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:1fr; }
}

.section-head{ max-width:44rem; margin-bottom:var(--sp-6); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ max-width:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--font-sans); font-weight:700; font-size:var(--step--1);
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-dark);
  margin-bottom:var(--sp-2);
}
.eyebrow::before{
  content:""; width:1.6em; height:2px; background:var(--accent);
}
.section--deep .eyebrow{ color:var(--accent-tint); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6em;
  padding:0.95em 1.7em; border-radius:var(--radius-pill);
  font-weight:700; font-size:var(--step--1); letter-spacing:0.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s;
  white-space:nowrap; border:2px solid transparent;
}
.btn svg{ width:1.1em; height:1.1em; flex:none; }
.btn-primary{ background:var(--accent); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-dark{ background:var(--primary); color:var(--white); }
.btn-dark:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--white); transform:translateY(-2px); }
.btn-ghost-light{ border-color:rgba(255,255,255,0.55); color:var(--white); }
.btn-ghost-light:hover{ background:rgba(255,255,255,0.12); border-color:var(--white); }
.btn-text{ display:inline-flex; align-items:center; gap:0.5em; font-weight:700; color:var(--ink-soft); border-bottom:2px solid var(--accent-tint); border-radius:0; padding:0.15em 0; }
.btn-text svg{ width:1em; height:1em; transition:transform .2s var(--ease); }
.btn-text:hover{ color:var(--accent-dark); border-color:var(--accent); }
.btn-text:hover svg{ transform:translateX(4px); }
.btn-block{ width:100%; }
.btn-lg{ padding:1.1em 2.1em; font-size:var(--step-0); }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:var(--bg);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow .3s var(--ease);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-sm); }
.site-header .wrap{ max-width:1480px; }
.header-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding-block:0.85rem;
}
.brand{ display:flex; align-items:center; gap:0.6rem; font-family:var(--font-serif); flex:none; }
.brand-mark{
  width:44px; height:44px; border-radius:12px; background:var(--primary);
  display:flex; align-items:center; justify-content:center; flex:none;
  color:var(--white); font-family:var(--font-serif); font-weight:600; font-size:1.15rem;
}
.brand-text{ line-height:1.15; }
.brand-text strong{ display:block; font-size:1.18rem; color:var(--ink); font-weight:600; }
.brand-text span{ display:block; font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }

.main-nav{ display:flex; align-items:center; gap:0.3rem; min-width:0; }
.main-nav ul{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; }
.main-nav > ul > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:0.3em; padding:0.62rem 0.6rem; border-radius:var(--radius-pill);
  font-weight:600; font-size:0.86rem; color:var(--ink-soft); transition:background .2s, color .2s; white-space:nowrap;
}
.nav-link:hover, .nav-link:focus-visible{ background:var(--bg-deep); color:var(--ink); }
.nav-link svg{ width:0.7em; height:0.7em; transition:transform .2s var(--ease); }
.has-dropdown:hover .nav-link svg, .has-dropdown:focus-within .nav-link svg{ transform:rotate(180deg); }

.dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:340px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:0.9rem; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  display:grid; grid-template-columns:1fr 1fr; gap:0.2rem;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,4px);
}
.dropdown a{
  display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.7rem; border-radius:10px;
  font-size:0.9rem; font-weight:600; color:var(--body);
}
.dropdown a:hover{ background:var(--sage-tint); color:var(--ink); }
.dropdown a svg{ width:1.15em; height:1.15em; color:var(--accent-dark); flex:none; }
.dropdown-foot{ grid-column:1 / -1; margin-top:0.4rem; padding-top:0.7rem; border-top:1px solid var(--border-soft); }

.header-actions{ display:flex; align-items:center; gap:0.7rem; flex:none; }
.header-phone{ display:flex; align-items:center; gap:0.4em; font-weight:700; color:var(--ink); font-size:0.86rem; white-space:nowrap; }
.header-phone svg{ width:1.1em; height:1.1em; color:var(--accent-dark); flex:none; }
.trade-link{ font-weight:700; font-size:0.78rem; letter-spacing:0.05em; color:var(--ink-soft); padding:0.5rem 0.5rem; white-space:nowrap; }
.trade-link:hover{ color:var(--accent-dark); }
.header-cta{ padding:0.75em 1.25em; font-size:0.8rem; }

.nav-toggle{
  display:none; width:46px; height:46px; border-radius:12px; align-items:center; justify-content:center;
  background:var(--ink); color:var(--white); flex:none;
}
.nav-toggle svg{ width:22px; height:22px; }
.icon-close{ display:none; }
.nav-open .icon-menu{ display:none; }
.nav-open .icon-close{ display:block; }

@media (max-width:1300px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(360px, 88vw); background:var(--surface);
    flex-direction:column; align-items:stretch;
    transform:translateX(100%); transition:transform .32s var(--ease); box-shadow:var(--shadow-lg);
    padding:5.5rem 1.5rem 2rem; overflow-y:auto; z-index:210; }
  .nav-open .main-nav{ transform:translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0.1rem; flex-wrap:nowrap; }
  .nav-link{ padding:0.9rem 0.2rem; border-radius:0; border-bottom:1px solid var(--border-soft); justify-content:space-between; font-size:1rem; }
  .dropdown{ position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none;
    border:0; border-bottom:1px solid var(--border-soft); display:none; grid-template-columns:1fr; padding:0.2rem 0 0.6rem; }
  .has-dropdown.is-open .dropdown{ display:grid; }
  .has-dropdown.is-open .nav-link svg{ transform:rotate(180deg); }
  .trade-link{ display:block; margin-top:1rem; font-size:0.85rem; }
  .nav-scrim{ display:none; position:fixed; inset:0; background:rgba(30,17,51,0.5); z-index:190; }
  .nav-open .nav-scrim{ display:block; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
}
.mobile-actions{ display:flex; flex-direction:column; gap:0.7rem; margin-bottom:1.8rem; }
@media (min-width:1301px){
  .mobile-actions{ display:none; }
}
@media (max-width:560px){
  .header-phone span{ display:none; }
}

/* ---- Hero ---- */
.hero{ position:relative; overflow:hidden; padding-block:var(--sp-8) var(--sp-7); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--sp-7); align-items:center; }
.hero-eyebrow{ margin-bottom:var(--sp-3); }
.hero h1{ margin-bottom:var(--sp-4); max-width:14ch; }
.hero-lede{ font-size:var(--step-1); color:var(--ink-soft); max-width:42ch; margin-bottom:var(--sp-3); }
.hero-sub{ color:var(--muted); max-width:46ch; margin-bottom:var(--sp-5); }
.hero-micro{ margin-top:var(--sp-3); color:var(--muted); font-size:0.92rem; }
.hero-micro a{ font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent-tint); text-underline-offset:3px; }

.hero-art{ position:relative; }
.scene{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5;
  background:linear-gradient(155deg,#5E3D91 0%,#41296E 55%,#2C1B4C 100%);
  box-shadow:var(--shadow-lg); isolation:isolate;
}
.scene::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 18% 22%, rgba(232,207,160,0.16), transparent 40%),
                    radial-gradient(circle at 82% 78%, rgba(189,148,191,0.22), transparent 45%);
}
.scene-grain{ position:absolute; inset:0; opacity:0.5; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 4px); }
.scene svg{ position:absolute; }
.scene .badge-float{
  position:absolute; left:1.4rem; bottom:1.4rem; right:1.4rem;
  background:rgba(30,17,51,0.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-md); padding:1rem 1.2rem; color:var(--white); display:flex; gap:1rem; align-items:center;
}
.badge-float strong{ display:block; font-family:var(--font-serif); font-size:1.3rem; }
.badge-float span{ display:block; font-size:0.78rem; color:#D3C0DA; }

.floating-card{
  position:absolute; background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:0.9rem 1.1rem; display:flex; align-items:center; gap:0.8rem; z-index:2;
}
.floating-card svg{ width:1.6em; height:1.6em; color:var(--accent-dark); flex:none; }
.floating-card strong{ display:block; font-size:0.95rem; color:var(--ink); }
.floating-card span{ display:block; font-size:0.78rem; color:var(--muted); }
.hero-art .floating-card{ top:-1.2rem; right:-1rem; }

/* ---- Trust strip ---- */
.trust-strip{ border-block:1px solid var(--border-soft); background:var(--surface); }
.trust-list{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-4); padding-block:var(--sp-4); }
.trust-item{ display:flex; align-items:center; gap:0.7rem; flex:1 1 180px; }
.trust-item svg{ width:1.6em; height:1.6em; color:var(--accent-dark); flex:none; }
.trust-item strong{ display:block; font-size:0.92rem; color:var(--ink); line-height:1.25; }
.trust-item span{ display:block; font-size:0.78rem; color:var(--muted); }

/* ---- Intro / two-col ---- */
.intro-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-7); align-items:start; }
.intro-grid .lede{ margin-bottom:var(--sp-3); }

/* ---- Service / feature cards ---- */
.card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  height:100%;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--accent-tint); }
.card-icon{
  width:56px; height:56px; border-radius:14px; background:var(--lilac-tint); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2);
}
.card-icon svg{ width:28px; height:28px; }
.card h3{ font-size:var(--step-1); }
.card .tag{ color:var(--accent-dark); font-weight:700; font-size:0.86rem; margin-bottom:0.2rem; }
.card p{ color:var(--body); font-size:0.96rem; }
.card .btn-text{ margin-top:auto; padding-top:var(--sp-2); }

.service-3{ counter-reset:svc; }
.service-3 .card{ position:relative; }

/* ---- Category / product cards ---- */
.cat-card{
  border-radius:var(--radius-lg); overflow:hidden; position:relative; background:var(--surface);
  border:1px solid var(--border-soft); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.cat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.cat-media{
  aspect-ratio:5/4; position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--sage-tint), var(--bg-deep));
  color:var(--primary);
}
.cat-media svg{ width:38%; height:38%; }
.cat-media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 -20px 30px -20px rgba(23,50,58,0.18); }
.cat-body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:0.4rem; flex:1; }
.cat-body h3{ font-size:1.08rem; font-family:var(--font-sans); font-weight:700; color:var(--ink); }
.cat-body p{ font-size:0.9rem; color:var(--muted); }

/* palette rotation for placeholder media */
.tone-1{ background:linear-gradient(150deg,#E4EAE1,#B9CCBF); }   /* sage */
.tone-2{ background:linear-gradient(150deg,#F4E9D6,#E8CFA0); }   /* gold */
.tone-3{ background:linear-gradient(150deg,#F1E7F1,#D3AAD6); }   /* lilac — brand, used sparingly */
.tone-4{ background:linear-gradient(150deg,#F1E0D3,#D9A883); }   /* terracotta */
.tone-5{ background:linear-gradient(150deg,#E8E6EA,#C4BFCB); }   /* soft stone grey */

/* ---- Process rail ---- */
.process-rail{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4); position:relative; }
.process-rail::before{
  content:""; position:absolute; top:26px; left:6%; right:6%; height:2px;
  background:repeating-linear-gradient(90deg, var(--accent-tint) 0 10px, transparent 10px 18px);
  z-index:0;
}
@media (max-width:900px){ .process-rail{ grid-template-columns:1fr 1fr; } .process-rail::before{ display:none; } }
@media (max-width:560px){ .process-rail{ grid-template-columns:1fr; } }
.process-step{ position:relative; z-index:1; }
.step-num{
  width:52px; height:52px; border-radius:50%; background:var(--primary); color:var(--accent-tint);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:1.3rem;
  margin-bottom:var(--sp-3); box-shadow:0 0 0 6px var(--bg);
}
.process-step h4{ font-family:var(--font-sans); font-size:1rem; margin-bottom:0.35rem; color:var(--ink); }
.process-step p{ font-size:0.9rem; color:var(--muted); }

/* ---- Split / showroom ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); align-items:center; }
.split.reverse .split-art{ order:2; }
.split-art .scene{ aspect-ratio:1/1; }
.list-check{ display:flex; flex-direction:column; gap:0.7rem; margin-top:var(--sp-3); }
.list-check li{ display:flex; align-items:flex-start; gap:0.7rem; }
.list-check svg{ width:1.3em; height:1.3em; color:var(--accent-dark); flex:none; margin-top:0.15em; }

/* ---- Tony section ---- */
.tony-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--sp-7); align-items:center; }
.tony-portrait{
  aspect-ratio:4/5; border-radius:var(--radius-lg); background:linear-gradient(160deg,#3C332C,#211A16);
  display:flex; align-items:flex-end; position:relative; overflow:hidden; box-shadow:var(--shadow-lg);
}
.tony-portrait .initials{
  font-family:var(--font-serif); font-size:7rem; color:rgba(232,207,160,0.16); position:absolute; top:0.5rem; left:1rem;
}
.tony-caption{
  position:relative; margin:1.1rem; padding:1rem 1.2rem; background:rgba(33,26,22,0.72); backdrop-filter:blur(6px);
  border-radius:var(--radius-md); color:var(--white); border:1px solid rgba(255,255,255,0.14);
}
.tony-caption strong{ display:block; font-family:var(--font-serif); font-size:1.2rem; }
.tony-caption span{ font-size:0.8rem; color:#D3C0DA; }

.timeline{ display:flex; flex-direction:column; gap:0; margin-top:var(--sp-4); border-left:2px solid var(--border); padding-left:var(--sp-4); }
.timeline-item{ position:relative; padding-bottom:var(--sp-4); }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:calc(var(--sp-4) * -1 - 6px); top:0.3rem; width:12px; height:12px; border-radius:50%;
  background:var(--accent); border:3px solid var(--bg);
}
.timeline-year{ font-family:var(--font-serif); font-size:1.15rem; color:var(--accent-dark); font-weight:600; }
.timeline-item p{ margin-top:0.2rem; font-size:0.94rem; }

.motto{
  margin-top:var(--sp-5); font-family:var(--font-serif); font-size:var(--step-2); color:var(--ink);
  padding-left:1rem; border-left:4px solid var(--accent);
}

/* ---- Projects ---- */
.project-card{ border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); border:1px solid var(--border-soft);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column; height:100%; }
.project-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.project-media{ aspect-ratio:4/3; position:relative; overflow:hidden; }
.project-media svg{ position:absolute; inset:0; width:100%; height:100%; }
.project-chip{
  position:absolute; top:0.9rem; left:0.9rem; background:rgba(255,253,248,0.92); backdrop-filter:blur(4px);
  padding:0.35rem 0.8rem; border-radius:var(--radius-pill); font-size:0.76rem; font-weight:700; color:var(--ink-soft);
  letter-spacing:0.02em;
}
.project-body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.project-loc{ display:flex; align-items:center; gap:0.4rem; font-size:0.8rem; color:var(--accent-dark); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.project-loc svg{ width:1em; height:1em; }
.project-body h3{ font-size:1.15rem; font-family:var(--font-serif); }
.project-body p{ font-size:0.92rem; color:var(--muted); }

/* filter pills (Our Work page) */
.filter-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:var(--sp-5); }
.filter-pill{
  padding:0.55rem 1.1rem; border-radius:var(--radius-pill); border:1.5px solid var(--border); font-weight:700; font-size:0.86rem;
  color:var(--ink-soft); transition:all .2s var(--ease);
}
.filter-pill:hover{ border-color:var(--accent); }
.filter-pill.is-active{ background:var(--ink); border-color:var(--ink); color:var(--white); }

/* ---- Reviews ---- */
.review-note{ color:var(--muted); font-size:0.88rem; margin-top:-0.6rem; margin-bottom:var(--sp-5); max-width:60ch; }
.review-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:var(--sp-5); height:100%; display:flex; flex-direction:column; gap:0.8rem; }
.stars{ display:flex; gap:0.2rem; color:var(--star); }
.stars svg{ width:1.1em; height:1.1em; }
.review-card p{ font-size:0.98rem; color:var(--ink-soft); font-style:italic; }
.review-attrib{ font-size:0.82rem; color:var(--muted); font-weight:700; font-style:normal; margin-top:auto; }

/* ---- Accessible / band with icon list ---- */
.icon-feature{ display:flex; gap:1rem; align-items:flex-start; }
.icon-feature .ic{ width:48px; height:48px; border-radius:12px; background:var(--accent-soft); color:var(--accent-dark); display:flex; align-items:center; justify-content:center; flex:none; }
.icon-feature .ic svg{ width:24px; height:24px; }
.icon-feature h4{ margin-bottom:0.25rem; }
.icon-feature p{ font-size:0.92rem; color:var(--muted); }

/* ---- CTA band ---- */
.cta-band{
  background:var(--primary); color:var(--white); border-radius:var(--radius-lg); padding:var(--sp-7) var(--sp-6);
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:0.5;
  background-image:radial-gradient(circle at 90% 10%, rgba(232,207,160,0.14), transparent 45%),
                    radial-gradient(circle at 6% 95%, rgba(189,148,191,0.22), transparent 45%);
}
.cta-band-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.cta-band h2{ color:var(--white); margin-bottom:0.5rem; }
.cta-band p{ color:#D3C0DA; max-width:46ch; }

/* ---- Page hero (interior pages) ---- */
.page-hero{ padding-block:var(--sp-7) var(--sp-6); }
.breadcrumb{ display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; font-size:0.82rem; color:var(--muted); margin-bottom:var(--sp-3); }
.breadcrumb a{ color:var(--muted); font-weight:600; }
.breadcrumb a:hover{ color:var(--accent-dark); }
.breadcrumb svg{ width:0.8em; height:0.8em; }
.page-hero h1{ max-width:20ch; }
.page-hero .lede{ max-width:56ch; margin-top:var(--sp-3); }

/* ---- Form ---- */
.form-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:var(--sp-6); box-shadow:var(--shadow-sm); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:var(--sp-3); display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-size:0.85rem; font-weight:700; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  padding:0.85em 1em; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--bg);
  transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); background:var(--white); outline:none; }
.field-radio-row{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.field-radio{ display:flex; align-items:center; gap:0.5rem; font-size:0.9rem; }
.consent{ font-size:0.8rem; color:var(--muted); margin-block:var(--sp-3); }
.consent a{ text-decoration:underline; }

/* ---- Contact info panel ---- */
.info-panel{ background:var(--primary); color:var(--white); border-radius:var(--radius-lg); padding:var(--sp-6); height:100%; }
.info-panel h3{ color:var(--white); margin-bottom:var(--sp-3); }
.info-line{ display:flex; gap:0.8rem; align-items:flex-start; margin-bottom:var(--sp-3); }
.info-line svg{ width:1.4em; height:1.4em; color:var(--accent-tint); flex:none; margin-top:0.1em; }
.info-line strong{ display:block; color:var(--white); }
.info-line span, .info-line a{ color:#D3C0DA; font-size:0.92rem; }
.info-line a:hover{ color:var(--white); }
.hours-table{ width:100%; margin-top:var(--sp-2); border-top:1px solid rgba(255,255,255,0.16); padding-top:var(--sp-2); }
.hours-table tr td{ padding:0.3rem 0; font-size:0.88rem; color:#D3C0DA; }
.hours-table tr td:last-child{ text-align:right; color:var(--white); font-weight:600; }

.map-card{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border-soft); position:relative;
  aspect-ratio:16/10; background:
    linear-gradient(0deg, rgba(23,50,58,0.06), rgba(23,50,58,0.06)),
    repeating-linear-gradient(0deg, var(--bg-deep) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--bg-deep) 0 1px, transparent 1px 34px),
    var(--bg-alt);
  display:flex; align-items:center; justify-content:center;
}
.map-pin{ display:flex; flex-direction:column; align-items:center; gap:0.6rem; text-align:center; }
.map-pin svg{ width:2.6rem; height:2.6rem; color:var(--terracotta); }
.map-pin strong{ font-family:var(--font-serif); font-size:1.05rem; color:var(--ink); }
.map-pin span{ font-size:0.85rem; color:var(--muted); }

/* ---- FAQ / accordion (advice) ---- */
.faq-item{ border-bottom:1px solid var(--border-soft); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:1.1rem 0; text-align:left; font-weight:700; color:var(--ink); }
.faq-q svg{ width:1.2em; height:1.2em; color:var(--accent-dark); transition:transform .25s var(--ease); flex:none; }
.faq-item.is-open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-item.is-open .faq-a{ max-height:400px; }
.faq-a p{ padding-bottom:1.1rem; color:var(--muted); font-size:0.94rem; }

/* ---- Article ---- */
.article-body{ max-width:70ch; margin-inline:auto; }
.article-body h2{ margin-top:var(--sp-6); margin-bottom:var(--sp-2); font-size:var(--step-2); }
.article-body p{ max-width:none; margin-bottom:var(--sp-3); }
.article-body ul{ margin-bottom:var(--sp-3); padding-left:1.3rem; list-style:disc; }
.article-body li{ margin-bottom:0.5rem; }
.article-meta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:0.86rem; margin-top:var(--sp-3); }
.article-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--muted); }
.pull-callout{ background:var(--sage-tint); border-left:4px solid var(--sage); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:1.4rem 1.6rem; margin-block:var(--sp-5); }
.pull-callout p{ margin:0; max-width:none; color:var(--ink-soft); font-size:1.02rem; }

/* ---- Article/project cards row on hub pages ---- */
.advice-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; height:100%; display:flex; flex-direction:column; }
.advice-media{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; }
.advice-media svg{ width:34%; height:34%; color:var(--primary); }
.advice-body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:0.5rem; flex:1; }
.advice-cat{ font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--accent-dark); }
.advice-body h3{ font-family:var(--font-serif); font-size:1.2rem; }
.advice-body p{ font-size:0.92rem; color:var(--muted); }

/* ---- Footer ---- */
.site-footer{ background:var(--primary); color:#D3C0DA; padding-block:var(--sp-7) var(--sp-4); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:var(--sp-6); padding-bottom:var(--sp-6); border-bottom:1px solid rgba(255,255,255,0.12); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand-text strong{ color:var(--white); }
.footer-brand .brand-text span{ color:#9C82A8; }
.footer-brand p{ margin-top:var(--sp-3); font-size:0.9rem; color:#AF95B7; }
.footer-social{ display:flex; gap:0.6rem; margin-top:var(--sp-4); }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.22); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:1.1em; height:1.1em; }
.footer-social a:hover{ background:var(--accent); border-color:var(--accent); }
.site-footer h4{ color:var(--white); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:var(--sp-3); font-family:var(--font-sans); }
.footer-links{ display:flex; flex-direction:column; gap:0.65rem; }
.footer-links a{ font-size:0.92rem; color:#D3C0DA; }
.footer-links a:hover{ color:var(--accent-tint); }
.footer-visit address{ font-style:normal; font-size:0.92rem; line-height:1.7; color:#D3C0DA; }
.footer-visit a{ display:block; margin-top:0.5rem; font-weight:700; color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; padding-top:var(--sp-4); font-size:0.8rem; color:#8B7093; }
.footer-bottom a{ color:#AF95B7; }
.footer-bottom a:hover{ color:var(--white); }
.footer-legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.hasco-note{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-md); padding:0.9rem 1.1rem; font-size:0.85rem; margin-top:var(--sp-4); }
.hasco-note a{ color:var(--accent-tint); font-weight:700; }

/* ---- Scroll reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ---- Misc ---- */
.divider{ height:1px; background:var(--border-soft); margin-block:var(--sp-7); }
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.small{ font-size:0.86rem; color:var(--muted); }

@media (max-width:980px){
  .hero-grid, .intro-grid, .split, .tony-grid{ grid-template-columns:1fr; }
  .split.reverse .split-art{ order:0; }
  .hero-art{ order:-1; }
  .footer-grid{ text-align:left; }
}
.scene--wide{ aspect-ratio:21/8; }
@media (max-width:640px){
  h1{ font-size:var(--step-4); }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; }
  .hero-art .floating-card{ display:none; }
  .scene--wide{ aspect-ratio:4/5; }
  .badge-float{ padding:0.8rem 1rem; }
  .badge-float strong{ font-size:1.05rem; }
  .badge-float span{ font-size:0.72rem; }
}