/* ==========================================================================
   Clan Ogilvy — design system
   Palette, type and components derived from the Clan Ogilvy brand board.
   ========================================================================== */

:root{
  /* brand board */
  --navy:      #1A2744;
  --moss:      #2E4A3B;
  --heather:   #4A3D5C;
  --loch:      #3A5C6B;
  --gold:      #B8963E;
  --crimson:   #6B1D2E;

  /* derived grounds */
  --ink:        #0E1510;
  --ink-2:      #131D18;
  --moss-deep:  #1B2C23;
  --navy-deep:  #111A2E;
  --sage:       #B6B8A4;   /* board background */
  --parchment:  #F4F1E6;
  --parch-dim:  #D8D3C2;
  --muted:      rgba(244,241,230,.62);
  --muted-2:    rgba(244,241,230,.42);
  --rule:       rgba(184,150,62,.30);
  --rule-soft:  rgba(244,241,230,.13);

  --gold-lite:  #D8B968;

  /* type */
  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --accent:  "Julius Sans One", "Optima", "Gill Sans", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* metrics */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1220px;
  --readw: 68ch;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.72;
  font-weight:350;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--gold); color:var(--ink); }

/* ---------- typography ---------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 6.2vw, 5.4rem); }
h2{ font-size:clamp(1.95rem, 3.9vw, 3.15rem); }
h3{ font-size:clamp(1.25rem, 2vw, 1.6rem); letter-spacing:-.01em; }
h4{ font-size:1.075rem; letter-spacing:0; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--accent);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-lite);
  margin:0 0 1.4rem;
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--rule), transparent);
}
.eyebrow.is-centred{ justify-content:center; }
.eyebrow.is-centred::after{ display:none; }
.eyebrow.is-centred::before{
  content:"❧"; font-family:var(--display); font-size:1rem; letter-spacing:0;
  opacity:.7;
}

.lede{
  font-size:clamp(1.13rem, 1.5vw, 1.35rem);
  line-height:1.62;
  color:var(--parch-dim);
  font-weight:300;
}

.gaelic{ font-family:var(--display); font-style:italic; color:var(--gold-lite); }

.dropcap::first-letter{
  font-family:var(--display);
  float:left;
  font-size:4.1em;
  line-height:.82;
  padding:.06em .12em 0 0;
  color:var(--gold-lite);
}

/* ---------- layout -------------------------------------------------------- */

.wrap{ width:min(100% - (var(--gut) * 2), var(--maxw)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - (var(--gut) * 2), 820px); margin-inline:auto; }

section{ position:relative; }
.band{ padding:clamp(4.5rem, 11vw, 9.5rem) 0; position:relative; }
.band--tight{ padding:clamp(3rem, 7vw, 6rem) 0; }

.band--moss{ background:linear-gradient(180deg, var(--moss-deep), #1F3328 60%, var(--ink-2)); }
.band--navy{ background:linear-gradient(180deg, var(--navy-deep), #16223A 55%, #101828); }
.band--ink{  background:var(--ink); }
.band--sage{ background:var(--sage); color:var(--ink); }

.band--sage h1,.band--sage h2,.band--sage h3{ color:#1F3328; }
.band--sage .eyebrow{ color:#4A5A3E; }
.band--sage .eyebrow::after{ background:linear-gradient(90deg, rgba(31,51,40,.3), transparent); }
.band--sage .lede{ color:#33402F; }

/* faint vellum grain over dark bands */
.band--moss::before,.band--navy::before,.band--ink::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(184,150,62,.09), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.band > .wrap, .band > .wrap--narrow{ position:relative; z-index:1; }

.grid{ display:grid; gap:clamp(1.5rem, 3vw, 2.75rem); }
.grid--2{ grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr)); }
.grid--3{ grid-template-columns:repeat(auto-fit, minmax(min(318px,100%),1fr)); }
.split{ display:grid; gap:clamp(2rem,5vw,5rem); align-items:center;
        grid-template-columns:repeat(auto-fit, minmax(min(320px,100%),1fr)); }

.rule{ height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--rule) 20%,var(--rule) 80%,transparent); }

.centred{ text-align:center; }
.centred .eyebrow{ justify-content:center; }
.centred .eyebrow::after{ display:none; }

/* ---------- tartan -------------------------------------------------------- */
/* Woven in CSS: warp + weft stripe sets multiplied together, with a twill nap. */

.tartan{
  --t-size:132px;
  background-color:#8C1526;
  background-image:
    /* overchecks, laid on top so they read the way a woven guard line does */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 106px, rgba(246,243,232,.78) 106px 110px,
      rgba(0,0,0,0) 110px 118px, rgba(214,178,80,.82) 118px 122px,
      rgba(0,0,0,0) 122px 132px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0 106px, rgba(246,243,232,.78) 106px 110px,
      rgba(0,0,0,0) 110px 118px, rgba(214,178,80,.82) 118px 122px,
      rgba(0,0,0,0) 122px 132px),
    /* warp and weft */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 34px, rgba(31,47,82,.80) 34px 62px,
      rgba(0,0,0,0) 62px 70px, rgba(53,86,68,.80) 70px 98px,
      rgba(0,0,0,0) 98px 132px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0 34px, rgba(31,47,82,.80) 34px 62px,
      rgba(0,0,0,0) 62px 70px, rgba(53,86,68,.80) 70px 98px,
      rgba(0,0,0,0) 98px 132px),
    /* twill nap */
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.06) 0 2px, rgba(0,0,0,.06) 2px 4px);
  background-size:
    var(--t-size) var(--t-size), var(--t-size) var(--t-size),
    var(--t-size) var(--t-size), var(--t-size) var(--t-size), 6px 6px;
  background-blend-mode:normal, normal, multiply, multiply, overlay;
}

.tartan--hunting{
  --t-size:124px;
  background-color:#33543F;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 97px, rgba(206,170,76,.55) 97px 100px,
      rgba(0,0,0,0) 100px 124px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0 97px, rgba(206,170,76,.55) 97px 100px,
      rgba(0,0,0,0) 100px 124px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0 30px, rgba(24,37,64,.84) 30px 60px,
      rgba(0,0,0,0) 60px 68px, rgba(120,33,52,.76) 68px 82px,
      rgba(0,0,0,0) 82px 124px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0 30px, rgba(24,37,64,.84) 30px 60px,
      rgba(0,0,0,0) 60px 68px, rgba(120,33,52,.76) 68px 82px,
      rgba(0,0,0,0) 82px 124px),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.055) 0 2px, rgba(0,0,0,.055) 2px 4px);
  background-size:
    var(--t-size) var(--t-size), var(--t-size) var(--t-size),
    var(--t-size) var(--t-size), var(--t-size) var(--t-size), 6px 6px;
  background-blend-mode:normal, normal, multiply, multiply, overlay;
}

.tartan-band{
  height:clamp(58px, 7vw, 88px);
  position:relative;
  box-shadow:inset 0 12px 22px -14px rgba(0,0,0,.7), inset 0 -12px 22px -14px rgba(0,0,0,.7);
}
.tartan-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(14,21,16,.55), transparent 22%, transparent 78%, rgba(14,21,16,.55));
}

.swatch{
  aspect-ratio:4/3; border-radius:3px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8), inset 0 0 0 1px rgba(244,241,230,.14);
}

/* ---------- header / nav -------------------------------------------------- */

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:1.05rem 0;
  transition:background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:rgba(12,19,15,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule-soft);
  transition:opacity .45s var(--ease);
}
.site-header.is-stuck{ padding:.6rem 0; }
.site-header.is-stuck::before{ opacity:1; }

.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  position:relative; z-index:1;
}

.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; }
.brand svg{ width:34px; height:auto; color:var(--gold-lite);
            transition:transform .5s var(--ease); }
.brand:hover svg{ transform:rotate(-4deg) scale(1.06); }
.brand-name{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name b{ font-family:var(--display); font-weight:400; font-size:1.22rem; letter-spacing:.01em; }
.brand-name span{ font-family:var(--accent); font-size:.56rem; letter-spacing:.32em;
                  text-transform:uppercase; color:var(--gold-lite); margin-top:.3rem; }

.nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem); }
.nav a{
  font-family:var(--accent); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--parch-dim); position:relative; padding:.35rem 0;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold-lite); transition:right .4s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--parchment); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--rule); color:var(--parchment);
  width:44px; height:38px; border-radius:2px; cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:18px; height:1px; background:currentColor; position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1px; background:currentColor;
  transition:transform .3s var(--ease);
}
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center;
    background:rgba(12,19,15,.97);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    gap:1.9rem; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  }
  .nav a{ font-size:1rem; letter-spacing:.24em; }
  body.nav-open .nav{ opacity:1; visibility:visible; }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav-toggle{ position:relative; z-index:70; }
  body.nav-open .nav-toggle span{ background:transparent; }
  body.nav-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }
}

/* ---------- buttons ------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--accent); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; padding:1.05rem 2.1rem; border-radius:2px;
  border:1px solid var(--gold); color:var(--gold-lite);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
  cursor:pointer; background:transparent;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--gold-lite); }
.btn:hover::before{ transform:translateY(0); }
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--solid{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn--solid::before{ background:var(--parchment); }
.btn--solid:hover{ color:var(--ink); }

.btn--ghost{ border-color:var(--rule-soft); color:var(--parch-dim); }
.btn--ghost::before{ background:rgba(244,241,230,.1); }
.btn--ghost:hover{ color:var(--parchment); border-color:var(--parch-dim); }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; }

/* text link with rule */
.tlink{
  font-family:var(--accent); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--gold-lite); display:inline-flex; align-items:center; gap:.6rem;
  border-bottom:1px solid var(--rule); padding-bottom:.4rem;
  transition:border-color .35s var(--ease), gap .35s var(--ease);
}
.tlink:hover{ border-color:var(--gold-lite); gap:.95rem; }

/* ---------- hero ---------------------------------------------------------- */

.hero{
  min-height:100svh; display:grid; place-items:center; position:relative;
  padding:8rem 0 8.5rem; overflow:hidden; text-align:center;
  background:
    radial-gradient(ellipse 120% 80% at 50% 110%, rgba(26,39,68,.7), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(184,150,62,.16), transparent 65%),
    linear-gradient(175deg, #16261D 0%, #12211A 38%, #0D1712 70%, #0A110D 100%);
}
/* drifting highland mist */
.hero::before,.hero::after{
  content:""; position:absolute; left:-25%; width:150%; height:65%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(182,184,164,.085), transparent 62%);
  filter:blur(8px);
}
.hero::before{ bottom:-12%; animation:drift 34s ease-in-out infinite alternate; }
.hero::after{ top:6%; opacity:.55; animation:drift 46s ease-in-out infinite alternate-reverse; }
@keyframes drift{
  from{ transform:translateX(-5%) scaleY(1); }
  to  { transform:translateX(7%) scaleY(1.25); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before,.hero::after{ animation:none; }
}

.hero .wrap{ position:relative; z-index:2; }

.hero-crest{
  width:clamp(130px, 17vw, 208px); margin:0 auto clamp(1.8rem,4vw,3rem);
  color:var(--parchment);
  filter:drop-shadow(0 0 34px rgba(184,150,62,.3));
  animation:crestIn 1.6s var(--ease) both;
}
@keyframes crestIn{
  from{ opacity:0; transform:translateY(24px) scale(.94); filter:blur(6px) drop-shadow(0 0 0 transparent); }
  to  { opacity:1; transform:none; }
}

.hero h1{
  margin:0;
  font-size:clamp(3rem, 11vw, 9.5rem);
  letter-spacing:.02em;
  line-height:.94;
  background:linear-gradient(180deg, #FCFAF2 18%, #E4D8AE 62%, #C0A253 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero-motto{
  font-family:var(--accent);
  font-size:clamp(.72rem, 1.5vw, .95rem);
  letter-spacing:.52em; text-transform:uppercase;
  color:var(--gold-lite); margin:1.6rem 0 0; padding-left:.52em;
}
.hero-trans{
  font-family:var(--display); font-style:italic;
  color:var(--muted); margin:.55rem 0 0; font-size:1.02rem; letter-spacing:.02em;
}
.hero-sub{
  max-width:56ch; margin:clamp(2rem,4vw,2.9rem) auto 0;
  color:var(--parch-dim); font-weight:300;
  font-size:clamp(1.02rem,1.35vw,1.2rem);
}
.hero .btn-row{ justify-content:center; margin-top:clamp(2.2rem,4vw,3rem); }

.hero-divider{
  width:min(420px,70%); margin:clamp(1.9rem,3.5vw,2.6rem) auto 0; height:1px; border:0;
  background:linear-gradient(90deg,transparent,var(--rule),transparent);
  position:relative;
}
.hero-divider::after{
  content:""; position:absolute; left:50%; top:-2px; width:5px; height:5px;
  transform:translateX(-50%) rotate(45deg); background:var(--gold);
}

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--accent); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted-2); text-decoration:none; display:flex; flex-direction:column;
  align-items:center; gap:.7rem;
}
.scroll-cue i{ display:block; width:1px; height:42px; background:linear-gradient(180deg,var(--rule),transparent); }
.scroll-cue:hover{ color:var(--gold-lite); }

/* page hero (interior pages) */
.page-hero{
  padding:clamp(9rem,16vw,13rem) 0 clamp(3.5rem,7vw,6rem);
  text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(184,150,62,.14), transparent 62%),
    linear-gradient(180deg, #16261D, #101B15 70%, var(--ink));
}
.page-hero.is-navy{
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(184,150,62,.13), transparent 62%),
    linear-gradient(180deg, #14203A, #101828 70%, var(--ink));
}
.page-hero h1{ font-size:clamp(2.5rem,7vw,5.2rem); }
.page-hero .lede{ max-width:60ch; margin-inline:auto; }

/* ---------- cards --------------------------------------------------------- */

.card{
  padding:clamp(1.75rem,3vw,2.5rem);
  border:1px solid var(--rule-soft);
  background:linear-gradient(160deg, rgba(244,241,230,.045), rgba(244,241,230,.012));
  border-radius:3px; position:relative; overflow:hidden;
  transition:transform .55s var(--ease), border-color .55s var(--ease), background .55s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0 auto auto 0; height:2px; width:100%;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--rule);
  background:linear-gradient(160deg, rgba(244,241,230,.075), rgba(244,241,230,.02));
}
.card:hover::after{ transform:scaleX(1); }
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--muted); font-size:.98rem; }

.card-num{
  font-family:var(--display); font-size:2.6rem; line-height:1;
  color:var(--gold); opacity:.42; margin-bottom:1.1rem; display:block;
}
.card-icon{ width:38px; height:38px; color:var(--gold-lite); margin-bottom:1.25rem; }

.band--sage .card{
  border-color:rgba(31,51,40,.18);
  background:linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.14));
}
.band--sage .card p{ color:#3A4636; }
.band--sage .card:hover{ background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.3)); }

/* ---------- pull quote ---------------------------------------------------- */

.quote{
  text-align:center; max-width:22ch; margin-inline:auto;
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem,4.2vw,3.1rem); line-height:1.18; letter-spacing:-.015em;
}
.quote em{ font-style:italic; color:var(--gold-lite); }
.quote-attr{
  display:block; margin-top:2rem; font-family:var(--accent);
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted-2);
}

/* ---------- timeline ------------------------------------------------------ */

.timeline{ position:relative; margin:0; padding:0; list-style:none; }
.timeline::before{
  content:""; position:absolute; left:0; top:.6rem; bottom:.6rem; width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 6%,var(--rule) 94%,transparent);
}
.tl-item{ position:relative; padding:0 0 clamp(2.5rem,5vw,4rem) clamp(1.75rem,4vw,3.25rem); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-4.5px; top:.62rem; width:10px; height:10px;
  border-radius:50%; background:var(--ink); border:1px solid var(--gold);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.tl-item:hover::before{ background:var(--gold); box-shadow:0 0 0 5px rgba(184,150,62,.14); }
.tl-year{
  font-family:var(--accent); font-size:.74rem; letter-spacing:.26em;
  color:var(--gold-lite); display:block; margin-bottom:.6rem;
}
.tl-item h3{ margin-bottom:.45rem; }
.tl-item p{ color:var(--muted); max-width:62ch; }

/* ---------- figure / place -------------------------------------------------*/

.place{
  display:grid; gap:clamp(1.75rem,4vw,4rem); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  padding:clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid var(--rule-soft);
}
.place:first-of-type{ border-top:0; padding-top:0; }
.place--flip > *:first-child{ order:2; }
@media (max-width:700px){ .place--flip > *:first-child{ order:0; } }

.plate{
  aspect-ratio:5/4; border-radius:3px; position:relative; overflow:hidden;
  border:1px solid var(--rule-soft);
  display:grid; place-items:center;
  background:linear-gradient(150deg,#1E3228,#141F19 60%,#101A14);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9);
}
.plate svg{ width:52%; color:rgba(184,150,62,.5); }
.plate::after{
  content:""; position:absolute; inset:10px; border:1px solid rgba(184,150,62,.18); border-radius:2px;
  pointer-events:none;
}
.plate--navy{ background:linear-gradient(150deg,#1B2A45,#141E33 60%,#101828); }
.plate--heather{ background:linear-gradient(150deg,#3C3149,#26203040 60%,#1A1622); }
.plate--loch{ background:linear-gradient(150deg,#2F4C58,#1D3039 60%,#14232A); }

.plate-cap{
  font-family:var(--accent); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted-2); margin-top:.9rem; text-align:center;
}

/* ---------- stats --------------------------------------------------------- */

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:clamp(1.5rem,3vw,2.5rem); }
.stat{ text-align:center; }
.stat b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,5vw,3.8rem); line-height:1; color:var(--gold-lite);
}
.stat span{
  display:block; margin-top:.75rem; font-family:var(--accent);
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}

/* ---------- lists --------------------------------------------------------- */

.septs{
  columns:3 150px; column-gap:2.5rem; list-style:none; margin:0; padding:0;
  font-size:.95rem;
}
.septs li{
  padding:.55rem 0; border-bottom:1px solid var(--rule-soft);
  break-inside:avoid; color:var(--parch-dim);
}

.facts{ list-style:none; margin:0; padding:0; }
.facts li{
  display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:1.5rem;
  padding:1.05rem 0; border-bottom:1px solid var(--rule-soft); align-items:baseline;
}
.facts dt,.facts b{
  font-family:var(--accent); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lite); font-weight:400;
}
.facts span{ color:var(--parch-dim); }
@media (max-width:620px){ .facts li{ grid-template-columns:1fr; gap:.3rem; } }

/* ---------- form ---------------------------------------------------------- */

.form{ display:grid; gap:1.35rem; }
.form .row{ display:grid; gap:1.35rem; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.field{ display:flex; flex-direction:column; gap:.55rem; }
.field label{
  font-family:var(--accent); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lite);
}
.field input,.field textarea,.field select{
  font-family:var(--body); font-size:1rem; color:var(--parchment);
  background:rgba(244,241,230,.04); border:1px solid var(--rule-soft);
  border-radius:2px; padding:.95rem 1.05rem; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold); background:rgba(244,241,230,.07);
}
.field-note{ font-size:.82rem; color:var(--muted-2); }

/* ---------- footer -------------------------------------------------------- */

.site-footer{
  background:linear-gradient(180deg,#0C1410,#080D0A);
  border-top:1px solid var(--rule-soft);
  padding:clamp(3.5rem,7vw,6rem) 0 2.5rem;
}
.footer-top{
  display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit, minmax(clamp(130px, 44%, 190px), 1fr));
  padding-bottom:clamp(2.5rem,5vw,4rem);
}
@media (min-width:920px){
  .footer-top{ grid-template-columns:1.5fr 1fr 1fr 1fr; }
}
.footer-crest{ width:76px; color:var(--gold); opacity:.85; margin-bottom:1.35rem; }
.site-footer h4{
  font-family:var(--accent); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lite); margin-bottom:1.15rem;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.site-footer a{ color:var(--muted); text-decoration:none; font-size:.93rem;
                transition:color .3s var(--ease); }
.site-footer a:hover{ color:var(--gold-lite); }
.site-footer p{ color:var(--muted); font-size:.93rem; max-width:40ch; }
.footer-bottom{
  border-top:1px solid var(--rule-soft); padding-top:1.75rem;
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.78rem; color:var(--muted-2);
}
.footer-bottom .motto{ font-family:var(--accent); letter-spacing:.3em; text-transform:uppercase;
                       color:var(--gold); font-size:.66rem; }

/* ---------- reveal on scroll --------------------------------------------- */

[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--gold-lite); outline-offset:3px; border-radius:2px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink); padding:.8rem 1.4rem;
  font-family:var(--accent); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.skip:focus{ left:1rem; top:1rem; }

/* print */
@media print{
  .site-header,.scroll-cue,.tartan-band{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ---------- crest mark ----------------------------------------------------
   The badge is inlined into each page as <svg> using currentColor, so it takes
   its colour from context (parchment in the hero, gold in the footer) and still
   renders when the files are opened directly from disk.                     */

.crest{ display:block; height:auto; overflow:visible; }
.crest--hero{
  width:clamp(128px, 16vw, 196px);
  margin:0 auto clamp(1.8rem,4vw,3rem);
  color:var(--parchment);
  filter:drop-shadow(0 0 30px rgba(184,150,62,.35));
  animation:crestIn 1.6s var(--ease) both;
}
.crest--plate{
  width:min(300px,72%);
  margin-inline:auto;
  color:var(--parchment);
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.55));
}
.crest--footer{ width:66px; color:var(--gold); opacity:.9; margin-bottom:1.35rem; }

/* hide the scroll cue where the hero is already tight */
@media (max-height: 880px), (max-width: 640px){ .scroll-cue{ display:none; } }

/* ---------- light (sage) band overrides -----------------------------------
   The sage ground comes from the brand board; every token that assumes a dark
   ground has to be restated here or it disappears.                          */

.band--sage{ color:#26332A; }
.band--sage::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.band--sage p,.band--sage li,.band--sage span{ color:inherit; }
.band--sage .lede{ color:#33402F; }
.band--sage .gaelic{ color:#2E4A3B; }
.band--sage .dropcap::first-letter{ color:#2E4A3B; }
.band--sage .rule{
  background:linear-gradient(90deg,transparent,rgba(31,51,40,.28) 20%,rgba(31,51,40,.28) 80%,transparent);
}
.band--sage .septs li,.band--sage .facts li{ border-bottom-color:rgba(31,51,40,.2); }
.band--sage .septs li{ color:#2E3B2F; }
.band--sage .facts b,.band--sage .facts dt{ color:#4A5A3E; }
.band--sage .field-note{ color:#4A5741; }
.band--sage .card-num{ color:#2E4A3B; opacity:.5; }
.band--sage .card-icon{ color:#2E4A3B; }

.band--sage .stat b{ color:#2E4A3B; }
.band--sage .stat span{ color:#4A5741; }

.band--sage .quote em{ color:#2E4A3B; }
.band--sage .quote-attr{ color:#4A5741; }

.band--sage .btn{ border-color:#2E4A3B; color:#2E4A3B; }
.band--sage .btn::before{ background:#2E4A3B; }
.band--sage .btn:hover{ color:var(--parchment); border-color:#2E4A3B; }
.band--sage .btn--solid{ background:#2E4A3B; color:var(--parchment); border-color:#2E4A3B; }
.band--sage .btn--solid::before{ background:#1B2C23; }
.band--sage .btn--solid:hover{ color:var(--parchment); }
.band--sage .btn--ghost{ border-color:rgba(31,51,40,.34); color:#3A4636; background:transparent; }
.band--sage .btn--ghost::before{ background:rgba(31,51,40,.12); }
.band--sage .btn--ghost:hover{ color:#1F3328; border-color:#2E4A3B; }
.band--sage .tlink{ color:#2E4A3B; border-bottom-color:rgba(31,51,40,.3); }
.band--sage .tlink:hover{ border-color:#2E4A3B; }

/* ---------- narrow-viewport guards ---------------------------------------- */
.grid > *, .split > *, .place > *, .footer-top > *, .form .row > *{ min-width:0; }
.field input,.field textarea,.field select{ width:100%; min-width:0; max-width:100%; }
.swatch,.plate{ max-width:100%; }

/* keep button labels on one line on small screens */
@media (max-width:560px){
  .btn{ font-size:.7rem; letter-spacing:.14em; padding:.95rem 1.35rem; gap:.6rem;
        justify-content:center; text-align:center; }
  .btn-row{ gap:.75rem; }
  .nav a{ font-size:.95rem; }
}

/* honeypot: present for bots, invisible and unreachable for people */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status.is-error{ color:#E8A5A5; }
.band--sage .form-status.is-error{ color:#7A1F1F; }
button.btn[disabled]{ opacity:.55; cursor:progress; }