@charset "utf-8";
/* ==========================================================================
   GOLD UP — WE BUY GOLD
   Built on the Pick Up Recovery design system: same structure, same component
   language, same rhythm. Palette and display face are Gold Up's.
   Edit colours in :root only.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-700.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-600.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-700.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Brand palette (taken from the Gold Up logo) */
  --black:        #000000;
  --char-900:     #060505;
  --char-800:     #0A0908;
  --char-700:     #16130D;
  --char-600:     #1E1A12;
  --gold:         #B88628;
  --gold-bright:  #D4AF37;
  --gold-lt:      #F0D77A;
  --gold-deep:    #8A6116;
  --white:        #FFFFFF;
  --cream:        #F5F1E8;
  --grey:         #8E897C;

  --line:         rgba(212,175,55,.16);
  --line-strong:  rgba(212,175,55,.34);
  --gold-glow:    rgba(212,175,55,.32);
  --metal:        linear-gradient(178deg,#FFF1B0 0%,#F0D77A 26%,#D4AF37 50%,#B88628 72%,#8A6116 100%);
  --metal-btn:    linear-gradient(135deg,#B88628,#F0D77A 55%,#B88628);

  /* Type */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem,4vw,2.5rem);
  --section-y: clamp(4rem,8vw,7.5rem);
  --radius: 14px;
  --radius-sm: 9px;

  /* The assay angle — a recurring 3.5° tilt, borrowed from a struck punch mark */
  --mark-angle: 3.5deg;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--gold-lt);text-decoration:none}
a:hover{color:var(--white)}
p{margin:0 0 1rem}
strong{color:var(--white);font-weight:600}

h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:.012em;
  color:var(--white);
  margin:0 0 .5em;
  text-transform:uppercase;
}
h1{font-size:clamp(2.4rem,1.5rem + 4vw,4.5rem)}
h2{font-size:clamp(1.9rem,1.35rem + 2.2vw,2.9rem)}
h3{font-size:1.3rem;letter-spacing:.05em}
h4{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--white);margin:0 0 .5em}

:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;border-radius:4px}
::selection{background:rgba(212,175,55,.3);color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold-bright);color:#0A0908;padding:.85rem 1.25rem;font-weight:700}
.skip:focus{left:1rem;top:1rem}

.wrap{width:min(1200px,100% - (var(--gutter) * 2));margin-inline:auto}
.article{width:min(820px,100% - (var(--gutter) * 2));margin-inline:auto}
.center{text-align:center;margin-inline:auto}
.muted{color:var(--grey)}

.gold{
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold{color:var(--gold-lt);background:none}
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */
section{padding-block:var(--section-y);position:relative}
section.tint{background:linear-gradient(180deg,var(--char-900) 0%,var(--black) 100%);border-block:1px solid var(--line)}

.sec-head{max-width:56ch;margin:0 0 clamp(2rem,4vw,3.25rem)}
.sec-head h2{font-size:clamp(2rem,1.35rem + 2.9vw,3.5rem);font-weight:700}
.sec-head p{color:var(--grey);font-size:1.05rem;margin:0}
.sec-foot{margin-top:clamp(1.75rem,3vw,2.5rem)}

.eyebrow{
  font-family:var(--body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.78rem;
  color:var(--grey);
  margin:0 0 .9rem;
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}
.eyebrow--gold{color:var(--gold-bright)}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--display);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:1.15rem;
  line-height:1;
  padding:.95rem 1.6rem;
  min-height:48px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:var(--btn-bg);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}
.btn .icon{width:1.15em;height:1.15em;fill:currentColor;flex:none}

.btn-primary{
  background:var(--metal-btn);
  color:#0A0908;
  box-shadow:0 1px 0 rgba(255,241,176,.55) inset,0 8px 20px rgba(184,134,40,.24);
}
.btn-primary:hover{
  color:#0A0908;
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,241,176,.7) inset,0 10px 30px var(--gold-glow);
}
.btn-ghost{color:var(--white);border-color:var(--line-strong);background:rgba(255,255,255,.02)}
.btn-ghost:hover{color:var(--white);border-color:var(--gold-bright);background:rgba(212,175,55,.10);transform:translateY(-2px)}
.btns{display:flex;flex-wrap:wrap;gap:.85rem;margin:2rem 0 0}

.more{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:1.02rem;
  color:var(--gold-lt);
}
.more::after{content:"\2192";transition:transform .25s ease}
.more:hover{color:var(--white)}
.more:hover::after{transform:translateX(5px)}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
header.site{
  position:sticky;top:0;z-index:100;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease,border-color .25s ease;
}
header.site.stuck{background:rgba(0,0,0,.96);border-bottom-color:var(--line-strong)}

.bar{display:flex;align-items:center;gap:1.75rem;min-height:76px}
.brand{flex:none;display:flex;align-items:center;gap:.7rem;color:inherit}
.brand img{
  height:52px;width:auto;flex:none;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(184,134,40,.32));
  transition:filter .25s ease;
}
.brand:hover img{filter:drop-shadow(0 0 16px rgba(212,175,55,.55))}
.bn{
  display:block;font-family:var(--display);font-weight:700;
  font-size:1.34rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);line-height:1;white-space:nowrap;
}
.bs{
  display:block;font-family:var(--body);font-weight:700;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-bright);margin-top:.3rem;
}

nav.main{margin-left:auto;display:none}
nav.main ul{display:flex;align-items:center;gap:clamp(.9rem,1.4vw,1.5rem);list-style:none;margin:0;padding:0}
nav.main a{
  color:var(--cream);font-size:.92rem;font-weight:500;
  padding:.4rem 0;position:relative;white-space:nowrap;
}
nav.main a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold-bright);transition:right .25s ease;
}
nav.main a:hover{color:var(--white)}
nav.main a:hover::after,nav.main a[aria-current]::after{right:0}
nav.main a[aria-current]{color:var(--white)}

#deskcta{display:none;flex:none;padding:.75rem 1.25rem;min-height:44px;font-size:1rem}

/* ---- Locations dropdown --------------------------------------------------
   A <details> element, so it opens on click with no JavaScript and no :has(). */
nav.main .has-menu{position:relative;display:flex;align-items:center}
.areamenu summary{
  list-style:none;list-style-type:none;cursor:pointer;
  display:flex;align-items:center;gap:.4rem;
  color:var(--cream);font-size:.92rem;font-weight:500;padding:.4rem 0;
  position:relative;white-space:nowrap;
}
.areamenu summary::-webkit-details-marker{display:none}
.areamenu summary::marker{content:"";font-size:0}
.areamenu summary::after{
  content:"";width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);
  transform:rotate(45deg);transition:transform .22s ease;
}
.areamenu[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.areamenu summary:hover,.areamenu[open] summary,.areamenu summary[aria-current]{color:var(--white)}
nav.main .areamenu__panel{
  position:absolute;top:calc(100% + 1.1rem);right:0;left:auto;
  width:min(620px,calc(100vw - 2rem));z-index:120;
  background:#050404;
  border:1px solid var(--line-strong);border-top:2px solid var(--gold);
  border-radius:var(--radius);box-shadow:0 26px 60px rgba(0,0,0,.7);
  padding:1.25rem 1.35rem;
}
.areamenu .areamenu__list{
  display:grid;gap:.3rem .9rem;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.areamenu .areamenu__list li{margin:0;border:0}
.areamenu .areamenu__list li:first-child{grid-column:1/-1;border-bottom:1px solid var(--line);margin-bottom:.35rem;padding-bottom:.35rem}
.areamenu .areamenu__list a{
  display:flex;align-items:center;min-height:40px;padding:.3rem .55rem;border-radius:6px;
  color:var(--cream);font-size:.9rem;
}
.areamenu .areamenu__list a::after{display:none}
.areamenu .areamenu__list a:hover{color:var(--gold-bright);background:rgba(212,175,55,.08)}
.areamenu .areamenu__list li:first-child a{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:.95rem;color:var(--gold-lt);
}

/* In the mobile drawer the same panel sits inline under its own row */
.areamenu--mobile > summary{
  min-height:64px;justify-content:space-between;padding:0;
  font-family:var(--body);font-weight:500;font-size:1.15rem;
  letter-spacing:.01em;text-transform:none;color:var(--cream);
}
.areamenu--mobile > summary::after{width:9px;height:9px}
.areamenu--mobile .areamenu__panel{padding:.25rem 0 .5rem}
.areamenu.areamenu--mobile .areamenu__list{grid-template-columns:repeat(2,1fr);gap:.4rem}
.areamenu.areamenu--mobile .areamenu__list li{border:0}
.areamenu--mobile .areamenu__list a{min-height:48px;font-size:.98rem;padding:.3rem .5rem}
.areamenu.areamenu--mobile .areamenu__list li:first-child{border-bottom:1px solid var(--line)}

.nav-toggle{margin-left:auto;flex:none;position:static}
.nav-toggle > summary{
  list-style:none;list-style-type:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  min-width:46px;min-height:46px;padding:0 1rem;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:1rem;color:var(--white);
}
.nav-toggle > summary::-webkit-details-marker{display:none}
.nav-toggle > summary::marker{content:"";font-size:0}
.nav-toggle > summary::after{
  content:"";width:18px;height:12px;flex:none;
  border-top:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);
  transition:transform .25s ease;
}
.nav-toggle[open] > summary{border-color:var(--gold-bright)}
.nav-toggle[open] > summary::after{border-bottom-color:transparent;transform:translateY(3px)}

/* --------------------------------------------------------------------------
   Mobile drawer

   Rebuilt for legibility: grouped rather than a flat list, sentence case in the
   body face rather than uppercase serif (which is the hardest combination to
   read at small sizes), 56px rows, and the call and booking actions pinned at
   the top instead of trapped behind the sticky bar at the bottom.
   -------------------------------------------------------------------------- */
.menu{
  position:absolute;top:100%;left:0;right:0;
  background:#050404;
  border-top:2px solid var(--gold);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 26px 60px rgba(0,0,0,.7);
  padding:1.25rem var(--gutter) 1.5rem;
  /* leave room for the sticky action bar so the last row is never trapped */
  max-height:calc(100vh - 76px - 78px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.menu nav{width:min(100%,1200px);margin-inline:auto}
.menu__actions{display:grid;gap:.6rem;margin-bottom:1.5rem}
.menu__actions .btn{width:100%;min-height:58px;font-size:1.15rem}
.menu ul{list-style:none;margin:0;padding:0}
.menu__list > li{border-bottom:1px solid rgba(245,241,232,.09)}
.menu__list > li:last-child{border-bottom:0}
/* Five rows, so each one can afford to be large */
.menu a{
  display:flex;align-items:center;min-height:64px;
  font-family:var(--body);font-size:1.15rem;font-weight:500;
  letter-spacing:.01em;color:var(--cream);text-transform:none;
}
.menu a:hover{color:var(--gold-bright)}
.menu a[aria-current]{color:var(--gold-lt);font-weight:600}
.menu a[aria-current]::before{
  content:"";width:3px;height:1.15em;margin-right:.7rem;flex:none;
  background:var(--metal-btn);border-radius:2px;
}

@media(min-width:1040px){
  nav.main{display:block}
  #deskcta{display:inline-flex}
  .nav-toggle{display:none}
  .menu{display:none !important}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;display:flex;align-items:center;
  min-height:clamp(560px,86svh,860px);
  padding-block:clamp(3.5rem,8vw,6rem);
  overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 90% at 78% 42%,rgba(184,134,40,.22) 0%,rgba(184,134,40,0) 62%),
    linear-gradient(180deg,var(--char-800) 0%,var(--black) 100%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(184,134,40,0) 55%);
}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;width:100%}
.hero h1{
  font-size:clamp(3rem,1.6rem + 6.4vw,6rem);
  font-weight:700;letter-spacing:.01em;margin:0 0 .5rem;
  filter:drop-shadow(0 2px 30px rgba(0,0,0,.75));
}
.hero .lede{color:var(--cream);max-width:46ch;margin:0 0 1.75rem;font-size:1.08rem}
/* An even three-across row: three claims of different lengths wrapping 2 + 1
   looked accidental. */
.ticks{
  display:grid;gap:.7rem;list-style:none;margin:2rem 0 0;padding:1.4rem 0 0;
  border-top:1px solid var(--line);grid-template-columns:1fr;
}
@media(min-width:560px){.ticks{grid-template-columns:repeat(3,1fr);gap:.6rem 1rem}}
.ticks li{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;color:var(--cream);
  display:flex;align-items:center;gap:.5rem;
}
.ticks li::before{content:"";width:7px;height:7px;flex:none;background:var(--gold-bright);transform:rotate(45deg)}

/* Two columns of equal height: the copy sits centred against the form panel,
   and the panel stretches to match rather than floating in the middle. */
.hero-grid{align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:center}
.hero-form{
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(165deg,var(--char-700) 0%,var(--char-900) 72%);
  border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  padding:clamp(1.4rem,2.6vw,2rem);
}
/* Tightened a step so the photograph field fits without the panel outgrowing
   the hero copy beside it. */
.hero-form .eyebrow{font-size:.7rem;margin-bottom:.7rem}
.hero-form h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);margin:0 0 .35rem}
.hero-form__lede{color:var(--grey);font-size:.88rem;margin:0 0 1.1rem}
.hero-form form.valuation{gap:.7rem;max-width:none}
.hero-form .field label{font-size:.75rem;margin-bottom:.3rem}
.hero-form .field input,.hero-form .field select{min-height:44px;padding:.6rem .85rem;font-size:.95rem}
.hero-form .btn{width:100%;margin-top:.35rem;min-height:50px;font-size:1.05rem}
.hero-form__note{font-size:.74rem;line-height:1.5;color:var(--grey);margin:.8rem 0 0}

/* File inputs render an unstyled system button by default, which looked like a
   different website. This dresses it as a ghost button. */
form.valuation input[type="file"]{
  padding:.4rem .5rem;font-family:var(--body);font-size:.82rem;color:var(--grey);cursor:pointer;
}
form.valuation input[type="file"]::file-selector-button{
  margin-right:.75rem;padding:.5rem .9rem;cursor:pointer;
  background:transparent;border:1px solid var(--line-strong);border-radius:7px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;color:var(--gold-lt);
  transition:border-color .2s ease,background-color .2s ease;
}
form.valuation input[type="file"]::file-selector-button:hover{
  border-color:var(--gold-bright);background:rgba(212,175,55,.1);
}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem)}
}

/* --------------------------------------------------------------------------
   Page banner + breadcrumbs
   -------------------------------------------------------------------------- */
.page-head{
  position:relative;overflow:hidden;
  padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem);
  background:
    radial-gradient(80% 120% at 15% 0%,rgba(184,134,40,.20) 0%,rgba(184,134,40,0) 60%),
    linear-gradient(180deg,var(--char-800) 0%,var(--black) 100%);
  border-bottom:1px solid var(--line);
}
.page-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(184,134,40,0) 45%);
}
.page-head h1{font-size:clamp(2.4rem,1.5rem + 4vw,4.5rem);font-weight:700;margin:0 0 .35rem;max-width:20ch}
.page-head .btns{margin-top:2rem}

.crumbs{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.82rem;color:var(--grey);margin-bottom:1.1rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.55rem;color:rgba(212,175,55,.35)}
.crumbs a{color:var(--grey)}
.crumbs a:hover{color:var(--gold-bright)}

.answer-block{
  border-left:2px solid var(--gold);
  padding:.2rem 0 .2rem 1.15rem;margin:1.5rem 0 0;max-width:66ch;
}
.answer-block .eyebrow{margin-bottom:.5rem}
.answer-block .eyebrow::before{display:none}
.answer-block p{font-size:1.15rem;color:var(--white);margin:0}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
.trustbar{padding-block:0;background:var(--char-900);border-block:1px solid var(--line)}
.tgrid{display:grid;gap:1px;background:var(--line);grid-template-columns:repeat(2,1fr)}
.tcell{background:var(--char-900);padding:clamp(1.25rem,2.6vw,2rem) clamp(1rem,2vw,1.6rem);border-top:2px solid transparent}
.tcell svg{width:22px;height:22px;stroke:var(--gold-bright);fill:none;stroke-width:1.4;margin-bottom:.8rem}
.tcell .tlabel{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:1.02rem;color:var(--white);margin:0 0 .3rem;
}
.tcell p{font-size:.9rem;color:var(--grey);margin:0}
@media(min-width:1000px){.tgrid{grid-template-columns:repeat(4,1fr)}}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  position:relative;
  background:linear-gradient(165deg,var(--char-700) 0%,var(--char-900) 70%);
  border:1px solid var(--line);
  border-top:2px solid var(--gold);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.2rem);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);border-top-color:var(--gold-bright)}
.card h3{font-size:1.35rem;letter-spacing:.05em;margin:0 0 .5rem}
.card p{color:var(--grey);font-size:.95rem}
.card > :last-child{margin-bottom:0}

a.cat{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(230px,30vw,290px);
  background:linear-gradient(165deg,var(--char-700) 0%,var(--char-900) 70%);
  border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:clamp(1.4rem,2.6vw,1.9rem);
  transition:transform .25s ease,border-color .25s ease;
}
a.cat:hover{transform:translateY(-5px);border-color:var(--line-strong);border-left-color:var(--gold-bright)}
a.cat .motif{position:absolute;inset:0;opacity:.5;transition:transform .5s ease,opacity .3s ease}
a.cat:hover .motif{transform:scale(1.05);opacity:.75}
a.cat .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 25%,rgba(0,0,0,.92))}
a.cat h3,a.cat p,a.cat .more{position:relative;z-index:2}
a.cat h3{font-size:1.35rem;letter-spacing:.05em;margin:0 0 .35rem;color:var(--white)}
/* Fixed rows so four cards line up whatever the copy length: the description gets
   two lines whether it needs them or not, and the link always sits on the baseline. */
a.cat p{color:var(--grey);font-size:.92rem;margin:0 0 1rem;min-height:2.7em}
a.cat .more{white-space:nowrap}

/* --------------------------------------------------------------------------
   Purity marks
   -------------------------------------------------------------------------- */
.purity{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
a.punch{
  display:block;text-align:center;padding:1.5rem 1rem 1.35rem;
  background:linear-gradient(165deg,var(--char-700) 0%,var(--char-900) 75%);
  border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);
  transition:transform .25s ease,border-color .25s ease;
}
a.punch:hover,a.punch:focus-visible{transform:translateY(-5px);border-color:var(--line-strong);border-top-color:var(--gold-bright)}
.punch .fine{
  display:block;font-family:var(--mono);font-weight:500;font-size:1.85rem;letter-spacing:.06em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums;
}
.punch .ct{
  display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:1.2rem;color:var(--white);margin-top:.35rem;
}
.punch .pc{display:block;font-size:.8rem;letter-spacing:.1em;color:var(--grey);margin-top:.25rem}
.punch .say{
  display:block;font-size:.85rem;line-height:1.45;color:var(--grey);
  max-height:0;opacity:0;overflow:hidden;margin-top:0;padding-top:0;border-top:1px solid transparent;
  transition:max-height .35s ease,opacity .25s ease,margin .35s ease,padding .35s ease;
}
a.punch:hover .say,a.punch:focus-visible .say{max-height:10rem;opacity:1;margin-top:.9rem;padding-top:.9rem;border-top-color:var(--line)}
@media(hover:none){.punch .say{max-height:10rem;opacity:1;margin-top:.9rem;padding-top:.9rem;border-top-color:var(--line)}}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.process{display:grid;gap:1.1rem;grid-template-columns:1fr;counter-reset:step}
@media(min-width:600px){.process{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .process{grid-template-columns:repeat(3,1fr)}
  .process.four{grid-template-columns:repeat(4,1fr)}
}
/* Inside the 820px article measure, four narrow columns read as a jumble */
@media(min-width:600px){.article .process,.article .process.four{grid-template-columns:repeat(2,1fr)}}
.step{
  position:relative;display:flex;flex-direction:column;
  padding:1.5rem 1.35rem 1.4rem;
  background:var(--char-900);
  border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  display:block;font-family:var(--display);font-weight:700;
  font-size:2.6rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(212,175,55,.8);
  margin-bottom:.85rem;
}
.step h3{font-size:1.2rem;letter-spacing:.06em;margin:0 0 .5rem}
.step p{margin:0;color:var(--grey);font-size:.95rem}

/* --------------------------------------------------------------------------
   Lead band — the short form that sits under the page head on inner pages
   -------------------------------------------------------------------------- */
.leadband{padding-block:clamp(2.5rem,5vw,4rem);background:linear-gradient(180deg,var(--char-900),var(--black))}
.leadband .wrap{display:grid;gap:clamp(1.75rem,3vw,3rem);align-items:start}
@media(min-width:900px){.leadband .wrap{grid-template-columns:.85fr 1.15fr}}
.leadband__copy h2{font-size:clamp(1.6rem,1.25rem + 1.4vw,2.25rem);margin:0 0 .6rem}
.leadband__copy p{color:var(--grey);margin:0 0 .8rem;max-width:42ch}
.leadband__call{font-size:.95rem}
.leadband__call a{font-family:var(--display);font-weight:700;letter-spacing:.05em;font-size:1.15rem}
.leadband__form{
  max-width:none;gap:.85rem;
  background:linear-gradient(165deg,var(--char-700),var(--char-900) 72%);
  border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);padding:clamp(1.25rem,2.4vw,1.75rem);
}
.leadband__form .field label{font-size:.75rem;margin-bottom:.3rem}
.leadband__form input,.leadband__form select{min-height:46px;padding:.6rem .85rem;font-size:.95rem}
.leadband__form .btn{width:100%;margin-top:.3rem}

/* --------------------------------------------------------------------------
   Booking band
   -------------------------------------------------------------------------- */
.booking{
  position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(80% 130% at 50% 100%,rgba(184,134,40,.18) 0%,rgba(184,134,40,0) 62%),
    linear-gradient(165deg,var(--char-700) 0%,var(--char-900) 72%);
  border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);
  padding:clamp(2rem,4.5vw,3.5rem) clamp(1.4rem,4vw,3rem);
}
.booking .eyebrow{justify-content:center}
.booking h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.75rem);margin:0 auto .7rem;max-width:26ch}
.booking p{color:var(--grey);max-width:60ch;margin:0 auto}
.booking .btns{justify-content:center;margin-top:1.9rem}

/* --------------------------------------------------------------------------
   Split statement
   -------------------------------------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:900px){.split{grid-template-columns:.95fr 1.05fr;align-items:start}.split .sticky{position:sticky;top:110px}}
.split h2{font-size:clamp(2rem,1.35rem + 2.9vw,3.5rem);max-width:13ch}
.reasons{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.reasons li{
  background:var(--char-900);
  border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.3rem 1.4rem;
  transition:border-color .2s ease,background-color .2s ease;
}
.reasons li:hover{border-left-color:var(--gold-bright);background:rgba(212,175,55,.05)}
.reasons h3{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:1.15rem;color:var(--white);margin:0 0 .4rem;
}
.reasons p{color:var(--grey);font-size:.95rem;margin:0}

/* --------------------------------------------------------------------------
   Areas
   -------------------------------------------------------------------------- */
.areas{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.areas{grid-template-columns:repeat(3,1fr)}}
a.area{
  display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem;min-height:128px;
  background:linear-gradient(165deg,var(--char-700) 0%,var(--char-900) 75%);
  border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.35rem 1.4rem;
  transition:transform .25s ease,border-color .25s ease,background-color .2s ease;
}
a.area:hover{transform:translateY(-4px);border-left-color:var(--gold-bright);background:rgba(212,175,55,.06)}
a.area .t{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:1.35rem;color:var(--white)}
a.area .s{font-family:var(--body);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright)}

details.reveal-list{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:1.1rem}
details.reveal-list summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:1.05rem;color:var(--gold-lt);
}
details.reveal-list summary::-webkit-details-marker{display:none}
details.reveal-list summary::marker{content:"";font-size:0}
details.reveal-list summary::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);
  transform:rotate(45deg) translateY(-2px);transition:transform .22s ease;
}
details.reveal-list[open] summary::after{transform:rotate(-135deg) translateY(-2px)}

/* An even grid rather than pills of nine different widths — the town list is a
   set of equals and should look like one. */
.linklist{display:grid;gap:.6rem;margin-top:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.linklist a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--char-900);
  border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;min-height:54px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.02rem;line-height:1.2;color:var(--white);
  transition:border-color .2s ease,background-color .2s ease;
}
.linklist a:hover{background:rgba(212,175,55,.1);border-top-color:var(--gold-bright)}

/* --------------------------------------------------------------------------
   Editorial
   -------------------------------------------------------------------------- */
.editorial{display:grid;gap:1.4rem}
@media(min-width:920px){.editorial{grid-template-columns:1.25fr 1fr}}
.stack{display:grid;gap:1.4rem}
a.article-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(165deg,var(--char-700) 0%,var(--char-900) 70%);
  border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);
  padding:clamp(1.5rem,2.8vw,2.2rem);
  transition:transform .25s ease,border-color .25s ease;
}
a.article-card:hover{transform:translateY(-5px);border-color:var(--line-strong);border-top-color:var(--gold-bright)}
a.article-card.feature{min-height:clamp(300px,36vw,400px)}
a.article-card .kicker{
  display:flex;gap:.8rem;align-items:center;
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:.68rem;color:var(--gold-bright);margin-bottom:1rem;
}
a.article-card .kicker .sep{width:14px;height:1px;background:var(--line-strong);flex:none}
a.article-card h3{font-size:1.45rem;letter-spacing:.04em;margin:0 0 .5rem;color:var(--white)}
a.article-card.feature h3{font-size:clamp(1.8rem,3.2vw,2.6rem)}
a.article-card p{color:var(--grey);font-size:.94rem;margin:0 0 1.15rem;max-width:52ch}
a.article-card .motif{position:absolute;inset:0;opacity:.35;transition:opacity .3s ease}
a.article-card:hover .motif{opacity:.55}
a.article-card > :not(.motif){position:relative;z-index:2}

.strip{
  display:grid;gap:1px;background:var(--line);
  border-block:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
a.newsitem{
  background:var(--char-900);padding:clamp(1.5rem,2.8vw,2.2rem);
  display:flex;flex-direction:column;gap:.7rem;transition:background-color .25s ease;
}
a.newsitem:hover{background:var(--char-700)}
a.newsitem .meta{
  display:flex;flex-wrap:wrap;gap:.9rem;margin:0;padding:0;border:0;
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--gold-bright);
}
a.newsitem h3{font-size:1.4rem;letter-spacing:.04em;margin:0;color:var(--white)}
a.newsitem p{color:var(--grey);font-size:.92rem;margin:0}
a.newsitem .more{margin-top:auto;padding-top:.3rem}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */
.prose{font-size:1.06rem}
.prose h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);margin:2.75rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;letter-spacing:.05em;margin:2rem 0 .75rem}
.prose p{max-width:70ch}
.prose ul,.prose ol{margin:1rem 0 1.5rem;padding:0;display:grid;gap:.75rem;list-style:none}
.prose ol{counter-reset:pl}
/* The marker is positioned, not a flex item: as flex, a leading <strong> became a
   column of its own and the sentence after it wrapped in a separate block. */
.prose li{
  position:relative;display:block;padding-left:1.9rem;
  color:var(--cream);font-size:.98rem;line-height:1.6;
}
.prose li strong{color:var(--white)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;
  border-left:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);
  transform:rotate(-45deg);
}
.prose ol li::before{
  counter-increment:pl;content:counter(pl,decimal-leading-zero);position:absolute;left:0;top:.05em;
  font-family:var(--mono);font-size:.82rem;color:var(--gold-bright);
}
.note{
  background:var(--char-900);
  border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.3rem 1.5rem;margin:2rem 0;font-size:.95rem;color:var(--grey);
}
.note > :last-child{margin-bottom:0}
.note.sources{font-size:.88rem}
.note.sources ul{margin:.6rem 0 0}

.tblwrap{overflow-x:auto;margin:2rem 0;border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.94rem}
caption{text-align:left;padding:1rem 1.2rem;color:var(--grey);font-size:.85rem;border-bottom:1px solid var(--line)}
th,td{padding:.85rem 1.2rem;text-align:left;border-bottom:1px solid var(--line)}
th{
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:.68rem;color:var(--gold-bright);white-space:nowrap;
}
td:first-child{color:var(--white)}
td{font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}

.toc{
  background:var(--char-900);border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.4rem 1.6rem;margin:0 0 2.5rem;
}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:.5rem}
.toc li{display:flex;gap:.7rem;font-size:.95rem}
.toc li::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--gold-bright);flex:none}
.toc a{color:var(--cream)}
.toc a:hover{color:var(--gold-bright)}

.takeaways{display:grid;gap:1rem;margin:2.5rem 0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.takeaway{
  background:var(--char-900);border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--radius);padding:1.2rem 1.4rem;
}
.takeaway p{margin:0;font-size:.95rem;color:var(--cream)}

.meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 2.5rem;padding-bottom:1.4rem;
  border-bottom:1px solid var(--line);
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:.7rem;color:var(--grey);
}

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */
.article > h2{font-size:clamp(1.9rem,1.35rem + 2.2vw,2.9rem);margin:0 0 1.5rem}
.article > h2 + .faq,.article > h2 + .linklist{margin-bottom:2.5rem}
.faq{display:grid;gap:.75rem}
.faq details{
  background:var(--char-800);border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .2s ease;
}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:1.15rem 1.3rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;font-size:1.15rem;color:var(--white);
  transition:background-color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:"";font-size:0}
.faq summary:hover{background:rgba(255,255,255,.03)}
.faq summary::after{
  content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .a{padding:0 1.3rem 1.25rem;color:var(--grey)}
.faq .a > :last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Final CTA — uses the mark angle
   -------------------------------------------------------------------------- */
.finalcta{
  position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(4rem,8vw,7rem);
  background:
    radial-gradient(90% 130% at 50% 100%,rgba(184,134,40,.28) 0%,rgba(184,134,40,0) 62%),
    var(--black);
  border-block:1px solid var(--line-strong);
}
.finalcta::before{
  content:"";position:absolute;left:-10%;right:-10%;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  transform:rotate(calc(var(--mark-angle) * -1));
}
.finalcta .crestmark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(46%,340px);height:auto;opacity:.07;pointer-events:none;
}
.finalcta .wrap{position:relative;z-index:2}
.finalcta h2{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.5rem);margin:0 auto .8rem;max-width:17ch}
.finalcta p{color:var(--grey);max-width:48ch;margin:0 auto}
.finalcta .btns{justify-content:center}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer.site{
  background:var(--char-900);border-top:1px solid var(--line);
  padding:clamp(3rem,6vw,4.5rem) 0 6.5rem;
}
@media(min-width:1040px){footer.site{padding-bottom:clamp(2.5rem,4vw,3.5rem)}}
.fgrid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:620px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fbrand img{height:76px;width:auto;margin-bottom:1.1rem;filter:drop-shadow(0 0 12px rgba(184,134,40,.25))}
.fbrand p{color:var(--grey);max-width:34ch;margin:0;font-size:.92rem}
footer.site h4{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:1.02rem;color:var(--white);margin:0 0 1.1rem;
}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:.55rem}
footer.site li a{color:var(--grey);font-size:.92rem}
footer.site li a:hover{color:var(--white)}
.fareas{margin-top:clamp(2.5rem,5vw,3.5rem)}
.legal{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.6rem;border-top:1px solid var(--line)}
.legal p{margin:0;font-size:.8rem;line-height:1.65;color:var(--grey);max-width:96ch}

/* --------------------------------------------------------------------------
   Mobile action bar
   -------------------------------------------------------------------------- */
.actionbar{
  position:fixed;inset:auto 0 0;z-index:90;display:flex;gap:.55rem;
  padding:.65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-strong);
}
.actionbar a{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:50px;
  border-radius:var(--radius-sm);border:1px solid var(--line-strong);color:var(--white);
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:1.02rem;
}
.actionbar a.primary{background:var(--metal-btn);border-color:transparent;color:#0A0908;flex:1.4}
body.menu-open .actionbar{display:none}
@media(min-width:1040px){.actionbar{display:none}}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
form.valuation{display:grid;gap:1.15rem;max-width:640px}
form.valuation .field{margin:0}
form.valuation label{display:block;font-size:.85rem;font-weight:600;color:var(--cream);margin-bottom:.45rem}
form.valuation .opt{color:var(--grey);font-weight:400}
form.valuation input,form.valuation textarea,form.valuation select{
  width:100%;min-height:50px;padding:.85rem 1rem;
  background:var(--char-900);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  color:var(--white);font-family:var(--body);font-size:1rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
form.valuation textarea{min-height:130px;resize:vertical}
form.valuation input::placeholder,form.valuation textarea::placeholder{color:#5B5850}
form.valuation input:focus,form.valuation textarea:focus,form.valuation select:focus{
  outline:none;border-color:var(--gold-bright);box-shadow:0 0 0 3px rgba(184,134,40,.22);
}
form.valuation .hp{position:absolute;left:-9999px}
@media(min-width:640px){form.valuation .half{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .rise{opacity:1;transform:none}
  .crest .sweep{display:none}
}