@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&family=Dancing+Script:wght@400;500;600;700&display=swap');

:root {
  /* Forge neutrals — near-black warm charcoals through raw steel to ash */
  --forge-black: #14100d;   /* deepest background — night + fire scenes */
  --forge-900:   #1c1712;   /* base page surface */
  --forge-800:   #262019;   /* raised surface / cards on dark */
  --forge-700:   #332a21;   /* borders on dark, hairlines */
  --steel-600:   #4a4038;   /* muted metal */
  --steel-500:   #6e6155;   /* secondary text on dark */
  --steel-400:   #8c8378;   /* raw steel gray */
  --ash-300:     #b6aca0;   /* muted metal text */
  --ash-200:     #cabfb0;   /* muted text on dark */
  --ash-100:     #e7ddcd;   /* near-white warm */
  --cream:       #f4ecdd;   /* paper / primary text on dark */

  /* Ember — the fire. Primary brand accent. */
  --ember-700: #a5330f;
  --ember-600: #c8420f;
  --ember-500: #e4571f;   /* PRIMARY — flame orange */
  --ember-400: #f07032;
  --ember-300: #f79256;

  /* Molten — amber/gold highlight, the hottest part of the flame */
  --molten-500: #f2a03d;
  --molten-400: #f7b85c;
  --molten-300: #fcd08a;

  /* Copper — patina / raw copper, warm secondary metal */
  --copper-700: #7a4327;
  --copper-600: #9c5630;
  --copper-500: #b96c3d;   /* SECONDARY — bright copper */
  --copper-400: #cd8557;
  --rust-500:   #8a4a2b;   /* oxidized rust */

  /* Pine — deep Maine forest green. Grounding, natural accent. */
  --pine-700: #22392b;
  --pine-600: #2f4a38;   /* deep pine */
  --pine-500: #416b4f;
  --lichen-400: #7e8a6c; /* muted lichen sage */
  --lichen-300: #a2ad8c;

  /* Signal */
  --success: #4f7a4a;
  --warning: #d68a2a;
  --danger:  #b23b28;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg:            var(--forge-900);
  --bg-deep:       var(--forge-black);
  --surface:       var(--forge-800);
  --surface-raised:#2f2820;
  --border:        var(--forge-700);
  --border-strong: var(--steel-600);

  --text:          var(--cream);
  --text-muted:    var(--ash-200);
  --text-subtle:   var(--steel-500);
  --text-inverse:  var(--forge-black);

  --accent:            var(--ember-500);
  --accent-hover:      var(--ember-400);
  --accent-press:      var(--ember-600);
  --accent-contrast:   #fff8f0;
  --accent-secondary:  var(--copper-500);
  --accent-tertiary:   var(--pine-600);
  --highlight:         var(--molten-400);

  --focus-ring: var(--molten-400);
}

/* === typography.css === */
/* Scrap Addict Art — Typography tokens
   Display: Oswald (condensed industrial — stamped-steel headings)
   Body:    Spectral (warm serif — the fine-art / gallery voice)
   Script:  Caveat (hand-lettered — the brand signature / wordmark stand-in)
   NOTE: The real "Scrap Addict Art" wordmark is hand-lettered marker;
   Caveat is a substitute until a logo/font file is supplied. */
:root {
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Dancing Script", "Segoe Script", cursive;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Type scale — 1.25 major-third-ish, tuned for a poster-forward brand */
  --text-2xs: 0.6875rem;  /* 11px — labels, meta */
  --text-xs:  0.8125rem;  /* 13px */
  --text-sm:  0.9375rem;  /* 15px */
  --text-md:  1.0625rem;  /* 17px — body default */
  --text-lg:  1.25rem;    /* 20px */
  --text-xl:  1.5625rem;  /* 25px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 2.75rem;    /* 44px */
  --text-4xl: 3.75rem;    /* 60px */
  --text-5xl: 5rem;       /* 80px — hero */
  --text-6xl: 7rem;       /* 112px — display poster */

  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.14em;   /* eyebrow / all-caps labels */
  --tracking-widest: 0.24em;
}

/* === layout.css === */
/* Scrap Addict Art — Spacing, radius, shadow, motion
   Handmade brand: modest radii (forged, not soft-tech), heavy warm shadows,
   an ember glow for focus/emphasis. */
:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 6px;    /* default control radius */
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --border-hair: 1px;
  --border-thick: 2px;

  /* Shadows — warm, deep, forge-lit */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,.65);
  --shadow-lg: 0 20px 48px -12px rgba(0,0,0,.7);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);
  /* Ember glow — for lit / hover / focus emphasis */
  --glow-ember: 0 0 0 1px rgba(228,87,31,.45), 0 8px 30px -6px rgba(228,87,31,.4);
  --glow-molten: 0 0 24px -2px rgba(247,184,92,.55);

  --ease-out: cubic-bezier(.2,.7,.3,1);      /* @kind other */
  --ease-in-out: cubic-bezier(.55,.06,.3,1); /* @kind other */
  --dur-fast: 120ms;                         /* @kind other */
  --dur: 200ms;                              /* @kind other */
  --dur-slow: 380ms;                         /* @kind other */

  --container: 1200px;
  --container-wide: 1440px;
}

/* === base.css === */
/* Scrap Addict Art — base element defaults + a few utilities.
   Applied lightly; components carry their own styling. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--weight-600, 600);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 0.4em;
  color: var(--text);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--ember-400); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--molten-400); }

/* Eyebrow / kicker — the recurring all-caps label */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: var(--text-xs);
  color: var(--ember-400);
}

/* Hand-lettered brand signature */
.script {
  font-family: var(--font-script);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

::selection { background: var(--ember-500); color: #fff8f0; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  html,body{margin:0;background:var(--forge-900)}
  html{scroll-behavior:smooth}
  /* Lighter gallery-paper scheme for alternating panels — remaps neutral tokens only, accents unchanged */
  .sa-light{--forge-black:#f5efe3;--forge-900:#faf5ec;--forge-800:#fffdf8;--forge-700:#e6dccb;--steel-600:#cdc2ae;--steel-500:#8a7e6c;--steel-400:#9e9280;--ash-300:#6e6354;--ash-200:#4c4235;--ash-100:#2b2318;--cream:#201a12;position:relative;isolation:isolate}
  .sa-light::before{content:"";position:absolute;inset:0;background:url("") center/cover;opacity:.32;mix-blend-mode:normal;pointer-events:none;z-index:0}
  .sa-light>*{position:relative;z-index:1}
  .sa-rust{position:relative;isolation:isolate}
  .sa-rust::before{content:"";position:absolute;inset:0;background:url("") center/cover;opacity:.2;mix-blend-mode:normal;pointer-events:none;z-index:0}
  .sa-rust>*{position:relative;z-index:1}
  a{color:var(--molten-400)}a:hover{color:var(--ember-400)}
  /* Scroll reveal */
  [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
  [data-reveal].sa-in{opacity:1;transform:none}
  /* Masonry gallery */
  .sa-masonry{column-count:4;column-gap:clamp(14px,1.4vw,22px)}
  @media(max-width:1100px){.sa-masonry{column-count:3}}
  @media(max-width:760px){.sa-masonry{column-count:2}}
  @media(max-width:460px){.sa-masonry{column-count:1}}
  /* Testimonial fade */
  .sa-fade{animation:saFade .5s var(--ease-out)}
  @keyframes saFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .sa-bounce{animation:saBounce 1.8s var(--ease-in-out) infinite}
  @keyframes saBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
  /* Nav collapse */
  .sa-burger{display:none}
  @media(max-width:1160px){.sa-navfull{display:none!important}.sa-burger{display:inline-flex!important;align-items:center;justify-content:center}}
  /* Tighten nav rows so links stay on one line between the burger breakpoint and 1360px */
  @media(max-width:1360px){
    .sa-header-inner{gap:16px!important}
    .sa-navfull>div,.sa-navfull>nav{gap:18px!important;flex-wrap:nowrap!important}
    .sa-navfull .sa-navlink,.sa-navfull>div>a:not(.sa-btn){font-size:13px!important;letter-spacing:.06em!important}
    .sa-navfull .sa-btn-sm{padding-left:14px!important;padding-right:14px!important}
  }
  /* Grid stacks */
  @media(max-width:900px){
    .sa-about-grid,.sa-why-grid,.sa-band-grid,.sa-events-grid,.sa-final-grid,.sa-featured-grid{grid-template-columns:1fr!important;gap:clamp(40px,6vw,88px)!important}
    .sa-faq-grid{grid-template-columns:1fr!important;gap:0!important}
    .sa-faq-grid>.sa-faq-item{border-left:none!important;border-top:1px solid var(--forge-700)!important}
    .sa-faq-grid>.sa-faq-item:first-child{border-top:none!important}
    .sa-about-inset{position:static!important;width:60%!important;margin-top:16px}
    .sa-band-media{order:-1}
    .sa-about-grid>*,.sa-why-grid>*,.sa-band-grid>*,.sa-events-grid>*:first-child,.sa-gallery-head{text-align:center!important}
    .sa-band-grid .sa-cat-text{width:auto!important;max-width:640px!important;margin-left:auto!important;margin-right:auto!important}
    .sa-about-grid p,.sa-why-grid p,.sa-band-grid p,.sa-events-grid>*:first-child p,.sa-gallery-head p{margin-left:auto!important;margin-right:auto!important}
    .sa-about-grid h2,.sa-why-grid h2,.sa-band-grid h2,.sa-events-grid>*:first-child h2,.sa-gallery-head h2{margin-left:auto!important;margin-right:auto!important}
    .sa-band-grid ul,.sa-why-grid ul{width:auto!important;text-align:center}
    .sa-band-grid ul li,.sa-why-grid ul li{display:block!important;text-align:center}
    .sa-band-grid ul li>i,.sa-why-grid ul li>i{display:inline-block!important;vertical-align:middle;margin-right:8px}
    .sa-about-grid>*>div,.sa-why-grid>*>div,.sa-band-grid>*>div,.sa-events-grid>*:first-child>div,.sa-gallery-head{justify-items:center!important}
    .sa-about-grid>*>div[style*="flex"],.sa-why-grid>*>div[style*="flex"],.sa-band-grid>*>div[style*="flex"],.sa-events-grid>*:first-child>div[style*="flex"],.sa-gallery-head{justify-content:center!important}
    .sa-why-grid>*:last-child>div{border-bottom-color:transparent!important;justify-content:center!important;text-align:center!important}
    .sa-gallery-head>div{max-width:none!important}
    .sa-events-note{flex-direction:column!important;align-items:center!important;gap:8px!important}
    .sa-gallery-grid:not(.sa-gallery-grid--page){grid-template-columns:repeat(5,1fr)!important}
    .sa-gallery-grid:not(.sa-gallery-grid--page)>*:nth-child(n+21){display:none!important}
    .sa-about-inset{display:none!important}
    .sa-band-media{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:clamp(10px,2.5vw,16px)!important;max-width:min(100%,520px)!important;margin-left:auto!important;margin-right:auto!important}
    .sa-band-media .sa-band-photo,.sa-band-media .sa-cat-inset{position:static!important;width:100%!important;left:auto!important;right:auto!important;bottom:auto!important;aspect-ratio:1/1!important}
    .sa-band-media .sa-cat-inset{display:block!important;border-width:3px!important}
    .sa-gallery-head{align-items:stretch!important;flex-direction:column!important}
    .sa-about-grid>*>div[style*="flex"]:has(.sa-btn),.sa-band-copy>div:has(.sa-btn),.sa-events-grid>*:first-child>div:has(.sa-btn){width:100%!important;align-items:stretch!important}
    .sa-about-grid .sa-btn,.sa-band-grid .sa-btn,.sa-events-grid>*:first-child .sa-btn,.sa-gallery-head .sa-btn{width:100%;box-sizing:border-box}
    .sa-cta-actions{width:100%;flex-direction:column;align-items:stretch}
    .sa-cta-actions .sa-btn{width:100%;box-sizing:border-box}
  }
  @media(max-width:760px){
    .sa-gallery-grid:not(.sa-gallery-grid--page){grid-template-columns:repeat(2,1fr)!important}
    .sa-foot{grid-template-columns:1fr!important;text-align:center;padding:40px 20px 28px!important;gap:28px!important}
    .sa-foot img{margin:0 auto 14px!important}
    .sa-foot p{margin:0 auto 16px!important}
    .sa-foot ul{justify-items:center}
    .sa-foot ul+ul{margin-top:calc(11px - 28px)!important}
    .sa-foot>div:first-child>div{justify-content:center}
    .sa-copy{flex-direction:column;align-items:center!important;text-align:center;padding-top:14px!important;padding-bottom:14px!important}
  }
  @media(max-width:560px){.sa-featured-grid>div{grid-template-rows:auto auto!important}}
  /* ============ Motion & rollovers ============ */
  /* Buttons: shine sweep */
  .sa-btn{position:relative;overflow:hidden}
  .sa-btn::after{content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s var(--ease-out);pointer-events:none}
  .sa-btn:hover::after{left:130%}
  /* Nav links: underline sweep */
  .sa-navlink{position:relative}
  .sa-navlink::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--ember-500);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
  .sa-navlink:hover::after{transform:scaleX(1)}
  /* Footer links: slide + dot */
  .sa-footlink{position:relative;display:inline-block;transition:transform .3s var(--ease-out),color .3s var(--ease-out)}
  .sa-footlink:hover{transform:translateX(7px)}
  .sa-footlink::before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ember-500);transform:translateY(-50%) scale(0);transition:transform .3s var(--ease-out)}
  .sa-footlink:hover::before{transform:translateY(-50%) scale(1)}
  /* Hero ember glow: slow breathing float */
  .sa-hero-glow{animation:saGlow 9s var(--ease-in-out) infinite}
  @keyframes saGlow{0%,100%{transform:translate(-30%,-50%) scale(1);opacity:.22}50%{transform:translate(-26%,-52%) scale(1.08);opacity:.3}}
  /* Figures / cards: hover lift for anything tagged */
  .sa-lift{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
  .sa-lift:hover{transform:translateY(-6px)}
  /* Script eyebrows: gentle shimmer */
  .sa-shimmer{background:linear-gradient(100deg,var(--ember-400) 30%,var(--molten-400) 50%,var(--ember-400) 70%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:saShimmer 6s linear infinite}
  @keyframes saShimmer{to{background-position:-200% center}}
  /* Reveal: add a touch of scale for depth */
  [data-reveal]{will-change:opacity,transform}
  /* Scroll progress bar */
  #sa-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--ember-500),var(--molten-400));z-index:200;pointer-events:none}
  /* Hover glow lift for cards/figures */
  .sa-lift:hover{box-shadow:0 18px 50px -18px rgba(228,87,31,.55),var(--shadow-lg)}
  /* Section-top ember shimmer line */
  .sa-rule{position:relative}
  .sa-rule::after{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--ember-500),transparent);background-size:220% 100%;opacity:.6;animation:saRule 7s linear infinite;z-index:3}
  @keyframes saRule{to{background-position:-220% 0}}
  @keyframes saDrawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
  /* Hero centering + darker image at mobile nav breakpoint */
  @media(max-width:1160px){
    .sa-hero-dim{opacity:1!important;background:rgba(6,4,3,.78)!important}
    .sa-hero-img-wide{display:none!important}
    .sa-hero-img-narrow{display:block!important}
    .sa-hero-content{text-align:center}
    .sa-hero-inner{margin:0 auto}
    .sa-hero-eyebrow{justify-content:center}
    .sa-hero-cta{justify-content:center}
    .sa-hero-inner p{margin-left:auto!important;margin-right:auto!important}
    .sa-hero-eyebrow span{font-size:38px!important}
    .sa-hero-inner h1{font-size:clamp(3.4rem,11vw,5.5rem)!important}
  }
  @media(max-width:600px){
    .sa-hero-cta{flex-direction:column;align-items:stretch}
    .sa-hero-cta .sa-btn{width:100%}
  }
  /* Mobile hero: image stacks in flow above the content */
  @media(max-width:760px){
    .sa-hero{height:auto!important;min-height:0!important;display:block!important}
    .sa-hero-img-narrow{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:400px!important;object-fit:cover!important;object-position:center 65%!important}
    .sa-hero-dim{display:none!important}
    .sa-hero-topfade{height:400px}
    .sa-hero-content{padding-top:40px!important;padding-bottom:56px!important}
    .sa-hero-inner h1{font-size:clamp(2.6rem,10vw,3.6rem)!important}
  }
  /* Mobile footer hero (CTA): image stacks in flow above the content, full width, 350px tall */
  @media(max-width:760px){
    .sa-cta{display:block!important}
    .sa-cta-bg{position:relative!important;inset:auto!important;display:block;width:100%;height:350px;object-fit:cover;object-position:center}
    .sa-cta-content{padding-top:40px!important;padding-bottom:56px!important}
    .sa-cta-card{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;max-width:none!important}
  }
  /* Hero content parallax hook */
  #sa-hero-shift{transition:transform .1s linear}
  /* Kinetic hover for any tagged icon chip */
  .sa-chip{transition:transform .35s var(--ease-out),background .35s var(--ease-out),color .35s var(--ease-out)}
  .sa-chip:hover{transform:rotate(-8deg) scale(1.08)}
  @media(prefers-reduced-motion:reduce){
    .sa-btn::after,.sa-hero-glow,.sa-shimmer,.sa-rule::after{animation:none!important;transition:none!important}
    .sa-footlink:hover,.sa-lift:hover,.sa-chip:hover{transform:none!important}
    #sa-progress{display:none}
  }


/* Shared form styles — based on the contact page form */

.sa-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sa-form-row,
.sa-contact-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.sa-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sa-form-card {
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 3.6vw, 52px);
  box-shadow: var(--shadow-lg);
}

.sa-form-label,
.sa-form-field > span:first-child,
.sa-checkout-page .form-row label,
.sa-checkout-page .woocommerce-form-coupon label,
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--forge-black);
}

.sa-form-field > span:first-child,
.sa-checkout-page .form-row label,
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
  display: block;
  margin-bottom: 8px;
}

.sa-form-input,
.sa-form-field input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']),
.sa-form-field select,
.sa-checkout-page .form-row input.input-text,
.sa-checkout-page .form-row select,
.sa-checkout-page .woocommerce-form-coupon input.input-text,
.gform_wrapper .ginput_container input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']),
.gform_wrapper .ginput_container select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--steel-600);
  border-radius: 0;
  padding: 11px 2px;
  font-family: var(--font-body);
  font-size: 16.5px;
  color: var(--forge-black);
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--dur) var(--ease-out);
}

.sa-form-field select,
.sa-checkout-page .form-row select,
.gform_wrapper .ginput_container select {
  appearance: none;
}

.sa-form-textarea,
.sa-form-field textarea,
.sa-checkout-page .form-row textarea,
.gform_wrapper .ginput_container textarea {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--forge-700);
  border-radius: var(--radius-md);
  padding: 12px;
  font-family: var(--font-body);
  font-size: 16.5px;
  color: var(--forge-black);
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  transition: border-color var(--dur) var(--ease-out);
}

.sa-form-input:focus,
.sa-form-field input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']):focus,
.sa-form-field select:focus,
.sa-checkout-page .form-row input.input-text:focus,
.sa-checkout-page .form-row select:focus,
.sa-checkout-page .woocommerce-form-coupon input.input-text:focus,
.gform_wrapper .ginput_container input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']):focus,
.gform_wrapper .ginput_container select:focus,
.sa-form-textarea:focus,
.sa-form-field textarea:focus,
.sa-checkout-page .form-row textarea:focus,
.gform_wrapper .ginput_container textarea:focus {
  border-color: var(--ember-500);
}

.sa-form-success {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ember-600);
  background: var(--forge-800);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0;
}

.sa-checkout-page .form-row .required,
.gform_wrapper .gfield_required {
  color: var(--ember-600);
  text-decoration: none;
}

.sa-checkout-page .form-row.woocommerce-invalid input.input-text,
.sa-checkout-page .form-row.woocommerce-invalid select,
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: var(--danger);
}

/* Inline "X is a required field" text — otherwise inherits the light ash text color meant for dark backgrounds. */
.sa-checkout-page .form-row .checkout-inline-error-message {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--danger);
}

/* Select2 (WooCommerce country/state) */
.sa-checkout-page .select2-container {
  width: 100% !important;
}

.sa-checkout-page .select2-container .select2-selection--single {
  height: auto;
  min-height: auto;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--steel-600);
  border-radius: 0;
  padding: 11px 2px;
  transition: border-color var(--dur) var(--ease-out);
}

.sa-checkout-page .select2-container--open .select2-selection--single,
.sa-checkout-page .select2-container--focus .select2-selection--single {
  border-color: var(--ember-500);
  box-shadow: none;
}

.sa-checkout-page .select2-container .select2-selection__rendered {
  padding: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  color: var(--forge-black);
  line-height: 1.4;
}

.sa-checkout-page .select2-container .select2-selection__arrow {
  height: 100%;
  right: 2px;
}

/* Gravity Forms — match the mockup .sa-form look. The wrapper carries
   .gravity-theme, so selectors below include it to outrank GF's own theme CSS. */
.sa-form-card {
  display: flex;
  flex-direction: column;
}

.sa-form-card .gform_wrapper.gravity-theme {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.sa-form-card .gform_wrapper.gravity-theme .gform_heading,
.sa-form-card .gform_wrapper.gravity-theme .gform_required_legend,
.sa-form-card .gform_wrapper.gravity-theme .gfield_required {
  display: none;
}

.sa-form-card .gform_wrapper.gravity-theme form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.sa-form-card .gform_wrapper.gravity-theme .gform_body {
  margin: 0;
}

/* Same 12-col grid GF uses, with the mockup's 26px gutters so half-width fields sit side by side. */
.sa-form-card .gform_wrapper.gravity-theme .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 26px;
  row-gap: 26px;
}

.sa-form-card .gform_wrapper.gravity-theme .gfield {
  margin: 0;
  padding: 0;
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_label,
.sa-form-card .gform_wrapper.gravity-theme .gform-field-label:not(.gform-field-label--type-inline) {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.55;
  color: var(--forge-black);
  margin: 0 0 8px;
  padding: 0;
}

.sa-form-card .gform_wrapper.gravity-theme .ginput_container input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']),
.sa-form-card .gform_wrapper.gravity-theme .ginput_container select {
  display: block;
  margin: 0;
  padding: 11px 2px;
  font-size: 16.5px;
  line-height: 1.4;
}

.sa-form-card .gform_wrapper.gravity-theme .ginput_container select[multiple] {
  height: auto;
  padding: 6px 0;
}

.sa-form-card .gform_wrapper.gravity-theme .ginput_container select[multiple] option {
  padding: 6px 2px;
  font-family: var(--font-body);
  color: var(--forge-black);
}

.sa-form-card .gform_wrapper.gravity-theme .ginput_container select[multiple] option:checked {
  background: var(--ember-500) linear-gradient(0deg, var(--ember-500), var(--ember-500));
  color: var(--cream);
}

/* Choice lists (radio / checkbox / consent) */
.sa-form-card .gform_wrapper.gravity-theme .gfield_radio,
.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 4px 0 0;
}

.sa-form-card .gform_wrapper.gravity-theme .gchoice,
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent {
  padding-top: 4px;
}

.sa-form-card .gform_wrapper.gravity-theme .gform-field-label--type-inline {
  display: block;
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--forge-black);
  cursor: pointer;
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio'],
.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox input[type='checkbox'],
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--steel-600);
  border-radius: 4px;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio'] {
  border-radius: 50%;
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio']::before,
.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox input[type='checkbox']::before,
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox']::before {
  content: '';
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--dur) var(--ease-out);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio']::before {
  border-radius: 50%;
  background: var(--cream);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox input[type='checkbox']::before,
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox']::before {
  width: 11px;
  height: 7px;
  margin-top: -2px;
  border-left: 2.5px solid var(--cream);
  border-bottom: 2.5px solid var(--cream);
  transform: scale(0) rotate(-45deg);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio']:hover,
.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox input[type='checkbox']:hover,
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox']:hover {
  border-color: var(--ember-500);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio']:checked,
.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox input[type='checkbox']:checked,
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox']:checked {
  background: var(--ember-500);
  border-color: var(--ember-500);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio']:checked::before {
  transform: scale(1);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox input[type='checkbox']:checked::before,
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox']:checked::before {
  transform: scale(1) rotate(-45deg);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_radio input[type='radio']:focus-visible,
.sa-form-card .gform_wrapper.gravity-theme .gfield_checkbox input[type='checkbox']:focus-visible,
.sa-form-card .gform_wrapper.gravity-theme .ginput_container_consent input[type='checkbox']:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* "Other" choice: the text box drops below the option, indented past the radio, and reads as disabled until "Other" is picked. */
.sa-form-card .gform_wrapper.gravity-theme .gchoice {
  flex-wrap: wrap;
}

.sa-form-card .gform_wrapper.gravity-theme .gchoice > br {
  display: none;
}

/* Selector is padded with :not()s purely to outrank the generic input rule above (0,9,1). */
.sa-form-card .gform_wrapper.gravity-theme .ginput_container .gchoice input.gchoice_other_control:not([type='hidden']):not([type='radio']):not([type='checkbox']):not([type='submit']) {
  flex: 0 0 auto;
  width: calc(100% - 32px);
  margin: 6px 0 0 32px;
  padding: 8px 2px;
  font-size: 15px;
  transition: border-color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.sa-form-card .gform_wrapper.gravity-theme .gchoice .gchoice_other_control:disabled {
  opacity: 0.45;
  border-bottom-style: dashed;
  cursor: not-allowed;
}

.sa-form-card .gform_wrapper.gravity-theme .gchoice .gchoice_other_control::placeholder {
  color: var(--steel-500);
  opacity: 1;
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_error .gform-field-label--type-inline {
  color: var(--forge-black);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_error input[type='radio'],
.sa-form-card .gform_wrapper.gravity-theme .gfield_error input[type='checkbox'] {
  border-color: var(--danger);
}

/* Mockup textarea shares the underline input style (no box, no radius), rows="4". */
.sa-form-card .gform_wrapper.gravity-theme .ginput_container textarea {
  display: block;
  margin: 0;
  padding: 11px 2px;
  border: none;
  border-bottom: 1.5px solid var(--forge-700);
  border-radius: 0;
  font-size: 16.5px;
  line-height: 1.4;
  resize: vertical;
  /* 4 rows × 16.5px × 1.4 + 22px padding + 1.5px border; GF's rows="10"/.medium would otherwise size it. */
  height: 115px;
  min-height: 115px;
}

.sa-form-card .gform_wrapper.gravity-theme .ginput_container textarea:focus {
  border-color: var(--ember-500);
}

/* GF adds a full red border on invalid inputs; keep the underline-only look. */
.sa-form-card .gform_wrapper.gravity-theme .gfield_error input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']),
.sa-form-card .gform_wrapper.gravity-theme .gfield_error select:not([multiple]),
.sa-form-card .gform_wrapper.gravity-theme .gfield_error [aria-invalid='true']:not([type='checkbox']):not([type='radio']):not(select[multiple]) {
  border: none;
  border-bottom: 1.5px solid var(--danger);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_error textarea,
.sa-form-card .gform_wrapper.gravity-theme .gfield_error textarea[aria-invalid='true'] {
  border: none;
  border-bottom: 1.5px solid var(--danger);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_error label,
.sa-form-card .gform_wrapper.gravity-theme .gfield_error legend {
  color: var(--danger);
}

.sa-form-card .gform_wrapper.gravity-theme .gfield_validation_message,
.sa-form-card .gform_wrapper.gravity-theme .validation_message {
  background: none;
  border: none;
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger);
}

.sa-form-card .gform_wrapper.gravity-theme .gform_validation_errors {
  background: var(--forge-800);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-md);
  box-shadow: none;
  margin: 0;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
}

.sa-form-card .gform_wrapper.gravity-theme .gform_validation_errors:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.sa-form-card .gform_wrapper.gravity-theme .gform_validation_errors > h2 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--danger);
  margin: 0;
}

.sa-form-card .gform_wrapper.gravity-theme .gform_validation_errors .gform_validation_error_link {
  color: var(--ember-600);
}

.sa-form-card .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon {
  display: none;
}

.sa-form-card .gform_wrapper.gravity-theme .gform_footer,
.sa-form-card .gform_wrapper.gravity-theme .gform_page_footer {
  display: block;
  margin: auto 0 0;
  padding: 0;
}

.sa-form .sa-btn,
.sa-form-card .gform_wrapper.gravity-theme .gform_footer .sa-btn,
.sa-form-card .gform_wrapper.gravity-theme .gform_page_footer .sa-btn {
  width: 100%;
  justify-content: center;
  margin: 0;
}

.sa-form-card .gform_wrapper.gravity-theme button.gform_button.sa-btn {
  appearance: none;
  min-height: unset;
  height: auto;
  box-shadow: none;
}

@media (max-width: 480px) {
  .sa-form-row,
  .sa-contact-two {
    grid-template-columns: 1fr !important;
  }

  .sa-form-card .gform_wrapper.gravity-theme .gfield.gfield--width-half {
    grid-column: span 12;
  }
}


#review-us {
  --color-brand-green: var(--accent);
}

#review-us .review-us-inner {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

#review-us .review-us-stars {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

#review-us .review-us-star {
  color: #ffc200;
  width: 20px;
  height: 20px;
}

#review-us .review-us-intro {
  margin-top: 2rem;
}

#review-us .review-us-lead {
  margin-bottom: 1rem;
  color: var(--ash-100);
}

#review-us #review-tab {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

#review-us #review-tab button {
  border: none;
  background: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

#review-us #review-tab button:hover {
  opacity: 0.9;
}

#review-us #review-tab button.active {
  color: var(--cream);
}

#review-us #review-tab button .review-us-tab-icon {
  color: var(--ash-300);
  display: inline-flex;
  width: 100px;
  height: 100px;
  margin-bottom: 30px;
  transition: opacity 0.2s, color 0.2s;
}

#review-us #review-tab button .review-us-tab-icon svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  #review-us #review-tab button .review-us-tab-icon {
    width: 150px;
    height: 150px;
  }
}

#review-us #review-tab button:hover .review-us-tab-icon,
#review-us #review-tab button.active .review-us-tab-icon {
  color: var(--accent);
}

#review-us #review-tabContent {
  margin-top: 2rem;
}

#review-us .hidden {
  display: none;
}

#review-us .message {
  background-color: var(--accent);
  border-radius: 30px;
  padding: 20px 15px;
  margin-bottom: 2rem;
  position: relative;
  color: var(--cream);
  font-weight: 500;
  display: inline-block;
}

@media (min-width: 768px) {
  #review-us .message {
    padding: 30px;
  }
}

#review-us .message::before {
  content: "";
  position: absolute;
  top: -14px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid var(--accent);
}

#review-us #nav-yes .message::before {
  left: 28%;
}

#review-us #nav-no .message::before {
  left: 65%;
}

#review-us .review-us-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

#review-us .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 100%;
  max-height: 150px;
  background-color: #fefefe;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  padding: 15px;
  transition: filter 0.2s;
  text-decoration: none;
}

#review-us .logo:hover {
  filter: brightness(0.95);
}

@media (min-width: 640px) {
  #review-us .logo {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

@media (min-width: 768px) {
  #review-us .logo {
    flex: 1 1 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    padding: 30px;
  }
}

#review-us .logo img {
  max-height: 4rem;
  width: auto;
  object-fit: contain;
}

#review-us .review-us-form-wrap {
  text-align: left;
  margin-top: 1rem;
}



.sa-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  color: var(--forge-black);
  font-family: var(--font-body);
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}

.sa-skip-link:focus {
  transform: none;
}

/* Interior pages: the header overlays the first section, whose content starts below this shared top padding. */
.sa-skip-target {
  position: absolute;
  top: clamp(150px, 17vw, 230px);
  left: 0;
  width: 1px;
  height: 1px;
  outline: none;
}

.sa-home {
  background: var(--forge-900);
  color: var(--cream);
  /* Pre-reveal offsets (e.g. .sa-feature-row's translateX(36px)) push content
     past the viewport edge on mobile. clip, not hidden, so position: sticky still works. */
  overflow-x: clip;
}

/* Body overflow propagates to the viewport (and stops clipping) unless <html> sets
   its own; mobile browsers still pan a viewport-level overflow, so clip at both. */
html:has(> body.sa-home) {
  overflow-x: hidden;
  overflow-x: clip;
}

.sa-light::before {
  background-image: var(--sa-light-panel-bg);
}

.sa-rust::before {
  background-image: var(--sa-rust-bg);
}

.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  line-height: 1;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.sa-btn-sm {
  padding: 8px 16px;
  font-size: var(--text-xs);
}

.sa-btn-lg {
  padding: 16px 34px;
  font-size: var(--text-md);
}

.sa-btn-primary {
  background: var(--ember-500);
  color: var(--accent-contrast);
  border-color: var(--ember-500);
}

.sa-btn-primary:hover {
  color: var(--cream);
  transform: translateY(-2px);
  background: var(--forge-black);
  border-color: var(--forge-black);
  box-shadow: var(--glow-ember);
}

.sa-btn-secondary {
  background: var(--cream);
  color: var(--forge-black);
  border: 1.5px solid var(--cream);
}

.sa-btn-secondary:hover {
  color: var(--cream);
  transform: translateY(-2px);
  background: var(--forge-black);
  border-color: var(--forge-black);
}

.sa-btn-copper {
  background: var(--copper-600);
  color: #fff;
  border-color: var(--copper-600);
}

.sa-btn-copper:hover {
  color: var(--cream);
  transform: translateY(-2px);
  background: var(--forge-black);
  border-color: var(--forge-black);
}

.sa-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--forge-700);
  background: var(--forge-800);
  color: var(--cream);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.sa-icon-btn:hover {
  border-color: var(--ember-500);
  color: var(--molten-400);
}

.sa-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.sa-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
}

.sa-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.6);
  backdrop-filter: blur(3px);
}

.sa-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: var(--forge-900);
  border-left: 1px solid var(--forge-700);
  box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.sa-drawer.is-open .sa-drawer__panel {
  transform: translateX(0);
}

.sa-burger__close,
.sa-burger[aria-expanded='true'] .sa-burger__open {
  display: none;
}

.sa-burger[aria-expanded='true'] .sa-burger__close {
  display: block;
}

.sa-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--forge-800);
}

.sa-drawer__logo {
  display: block;
  height: auto;
  max-height: 42px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
}

.sa-drawer__close {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-md);
  color: var(--cream);
  cursor: pointer;
}

.sa-drawer__links {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px 24px;
}

.sa-drawer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 15.5px;
  letter-spacing: 0.06em;
  color: var(--ash-100);
  padding: 15px 0;
  border-bottom: 1px solid var(--forge-800);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}

.sa-drawer-link:hover {
  color: var(--molten-400);
  padding-left: 8px;
}

.sa-drawer-link::after {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23e4571f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.sa-drawer__foot {
  padding: 20px 24px;
  border-top: 1px solid var(--forge-800);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sa-featured-track {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  transition: transform 0.6s var(--ease-out);
}

.sa-featured-slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * clamp(18px, 2vw, 28px)) / var(--per-view));
}

.sa-reviews-track {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  transition: transform 0.6s var(--ease-out);
}

.sa-review-slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * clamp(18px, 2vw, 28px)) / var(--per-view));
}

.sa-carousel-viewport {
  overflow: hidden;
  /* Cards lift 4px and swap to --shadow-lg on hover. That shadow reaches
     20px + 48px/2 - 12px = 32px past the card's bottom edge, i.e. 28px past
     its resting position once the lift is applied, so anything under ~28px
     here slices the shadow off with a hard line. Chrome's blur tail runs
     longer than that nominal figure, so the clearance below is rounded well
     up -- there is nothing above or below the track to hide, so the vertical
     padding costs nothing. The negative margins cancel the padding so the
     surrounding spacing is unchanged.
     Note: the left/right shadow of the first/last card is still clipped --
     a carousel cannot pad sideways without revealing the next slide. */
  padding-top: 24px;
  margin-top: -24px;
  padding-bottom: 64px;
  margin-bottom: -64px;
}

/* Swipe: the browser keeps vertical scrolling, we claim the horizontal axis.
   Set on the static viewport too, since iOS can hold stale touch regions for
   the moving track. */
.sa-carousel-viewport,
.sa-featured-track,
.sa-reviews-track {
  touch-action: pan-y;
}

.is-swipeable .sa-featured-track,
.is-swipeable .sa-reviews-track {
  cursor: grab;
}

.sa-featured-track.is-dragging,
.sa-reviews-track.is-dragging {
  /* Follow the finger/pointer directly; the transition returns for the snap. */
  transition: none;
  cursor: grabbing;
  user-select: none;
}

.sa-featured-track img,
.sa-reviews-track img {
  -webkit-user-drag: none;
}

.sa-faq-item {
  transition: background var(--dur) var(--ease-out);
}

.sa-faq-button {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: clamp(20px, 2.4vw, 30px) clamp(22px, 3vw, 36px);
  text-align: left;
  cursor: pointer;
}

.sa-faq-question {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(16px, 1.7vw, 21px);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--cream);
}

@media (max-width: 640px) {
  .sa-faq-question {
    font-size: 18px;
  }
}

.sa-faq-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--forge-700);
  display: grid;
  place-items: center;
  color: var(--ember-400);
  transition: border-color var(--dur);
}

.sa-faq-panel {
  display: none;
  margin: 0;
  padding: 0 clamp(22px, 3vw, 36px) clamp(24px, 2.6vw, 32px);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ash-200);
}

.sa-faq-item.is-open .sa-faq-panel {
  display: block;
}

.sa-faq-item.is-open {
  background: rgba(228, 87, 31, 0.05);
}

.sa-faq-item.is-open .sa-faq-question {
  color: var(--ember-400);
}

.sa-faq-item.is-open .sa-faq-toggle {
  border-color: var(--ember-500);
}

.sa-gallery-grid {
  display: grid;
  gap: clamp(8px, 1vw, 16px);
}

.sa-gallery-grid:not(.sa-gallery-grid--page) {
  grid-template-columns: repeat(7, 1fr);
}

.sa-gallery-grid--page {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}

@media (max-width: 1040px) {
  .sa-gallery-grid--page {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .sa-gallery-grid:not(.sa-gallery-grid--page) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .sa-gallery-grid--page {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .sa-featured-grid {
    grid-template-columns: 1fr !important;
  }
}

.sa-shot {
  display: block;
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--forge-700);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  /* Keep the [data-reveal] opacity/transform transition alongside the hover shadow */
  transition: box-shadow var(--dur) var(--ease-out), opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.sa-shot:hover {
  box-shadow: var(--shadow-lg);
}

.sa-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-out);
}

.sa-shot:hover img {
  transform: scale(1.06);
}

.sa-shot__cap {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 20px;
  background: linear-gradient(180deg, transparent, rgba(15, 12, 9, 0.9));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.sa-shot:hover .sa-shot__cap {
  opacity: 1;
  transform: translateY(0);
}

.sa-band-grid {
  align-items: center;
}

.sa-band-photo img {
  transition: transform 1.2s var(--ease-out);
}

.sa-band-photo:hover img {
  transform: scale(1.05);
}

.sa-band-photo img.is-flipped {
  transform: scaleX(-1);
}

.sa-band-photo:hover img.is-flipped {
  transform: scaleX(-1) scale(1.05);
}

.sa-feature-card {
  cursor: pointer;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--forge-700);
  background: var(--cream);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.sa-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.sa-feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.1s var(--ease-out);
}

.sa-feature-card:hover img {
  transform: scale(1.06);
}

.sa-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--forge-700);
  font-size: 14px;
  color: var(--steel-500);
}

.sa-site-header.is-solid {
  position: fixed;
  background: rgba(20, 16, 13, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--forge-700);
}

.sa-site-header.is-solid .sa-header-inner {
  padding-top: 18px;
  padding-bottom: 14px;
}

.sa-home {
  position: relative;
}

.sa-hero-photo {
  transform: scale(1.08);
  transition: transform 2.2s var(--ease-out);
}

.sa-hero.sa-hero-loaded .sa-hero-photo {
  transform: scale(1);
}

.sa-hero-rise {
  opacity: 0;
  transform: translateY(28px);
}

.sa-hero.sa-hero-loaded .sa-hero-rise {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.sa-hero .sa-btn::after {
  display: none;
}

.sa-feature-row {
  /* Keep the [data-reveal] opacity/transform transition alongside the hover ones */
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* Feature rows cascade in from the right (see [data-stagger] in home.js) */
.sa-feature-row[data-reveal]:not(.sa-in) {
  transform: translateX(36px);
}

/* !important so the hover outline beats the inline border-bottom and the
   mobile rule that hides row separators (border-bottom-color: transparent). */
#why .sa-feature-row:hover {
  background: rgba(228, 87, 31, 0.05) !important;
  border-color: rgba(228, 87, 31, 0.35) !important;
}

.sa-shop-grid,
.sa-sculpt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 36px);
}

.sa-contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.sa-contact-map {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: var(--forge-800);
  filter: grayscale(0.3) contrast(1.05);
}

.sa-contact-map .leaflet-popup-content-wrapper {
  background: var(--cream);
  color: var(--forge-black);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.sa-contact-map .leaflet-popup-tip {
  background: var(--cream);
  border: 1px solid var(--forge-700);
}

.sa-contact-map .leaflet-popup-content {
  margin: 12px 16px;
  line-height: 1.5;
}

.sa-map-popup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 14px;
}

.sa-map-popup strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sa-carousel-dots .sa-dot {
  width: 18px;
  height: 18px;
  border-radius: 99px;
  border: 1px solid var(--steel-400);
  cursor: pointer;
  padding: 0;
  background: var(--cream);
  transition: all var(--dur) var(--ease-out);
}

.sa-carousel-dots .sa-dot.is-active {
  width: 52px;
  border: none;
  background: var(--ember-500);
}

.sa-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Featured arrows sit on true forge-900; testimonials is .sa-light. Remap the same tokens on the nav so both sliders share one button look. */
#featured .sa-carousel-nav {
  --forge-800: #fffdf8;
  --forge-700: #e6dccb;
  --cream: #201a12;
}

/* Home sections: inline padding clamps to 64px on phones — tighten it once the grids stack. */
@media (max-width: 900px) {
  .sa-section-inner {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 760px) {
  .sa-section-inner {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .sa-about-grid,
  .sa-why-grid,
  .sa-band-grid,
  .sa-events-grid {
    gap: 32px !important;
  }
}

@media (max-width: 719px) {
  #testimonials [data-reviews-dots],
  #featured [data-featured-dots] {
    display: none !important;
  }

  #testimonials [data-reviews-nav],
  #featured [data-featured-nav] {
    display: flex !important;
  }

  #testimonials .sa-review-card {
    align-items: center;
    text-align: center;
  }

  #testimonials .sa-review-card blockquote {
    text-align: center;
  }

  #testimonials .sa-review-card figcaption {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.sa-footlink {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ash-200);
  text-decoration: none;
}

@media (max-width: 1040px) {
  .sa-shop-grid,
  .sa-sculpt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .sa-contact-grid {
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 720px) {
  .sa-shop-grid,
  .sa-sculpt-grid {
    grid-template-columns: 1fr;
  }
}

.sa-pd-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;
}

.sa-cart-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.sa-cart-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 640px) {
  .sa-evt-row,
  .sa-events-grid > ul > li {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .sa-evt-row > *:first-child,
  .sa-events-grid > ul > li > *:first-child {
    width: 100% !important;
    flex-shrink: 1 !important;
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: clamp(14px, 2vw, 20px);
    border-bottom: 1px solid var(--forge-700);
  }

  .sa-evt-row > *:nth-child(2),
  .sa-events-grid > ul > li > *:last-child {
    width: 100%;
  }

  .sa-evt-row > *:nth-child(2) > div[style*='flex'] {
    justify-content: center !important;
  }

  .sa-evt-tag {
    width: 100%;
  }
}

/* Match the .sa-why-grid stack breakpoint so the icon stacks with the card. */
@media (max-width: 900px) {
  #why .sa-feature-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: clamp(14px, 2vw, 20px) !important;
  }

  #why .sa-feature-row > *:first-child {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: var(--radius-md);
  }

  #why .sa-feature-row > *:last-child {
    width: 100%;
    padding-top: clamp(14px, 2vw, 20px);
    border-top: 1px solid var(--forge-700);
  }

  #why .sa-feature-row h3,
  #why .sa-feature-row p {
    text-align: center !important;
  }
}

@media (max-width: 860px) {
  .sa-pd-grid,
  .sa-cart-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sa-cart-page {
    background-attachment: scroll !important;
  }

  .sa-cart-row {
    display: grid;
    grid-template-columns: min(72px, 22vw) 1fr;
    grid-template-areas:
      "thumb info"
      "actions actions";
    gap: 14px 16px;
    align-items: start;
  }

  .sa-cart-row__thumb {
    grid-area: thumb;
    width: min(72px, 22vw) !important;
  }

  .sa-cart-row__info {
    grid-area: info;
  }

  .sa-cart-row__actions {
    grid-area: actions;
    width: 100%;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--forge-700);
  }

  .sa-cart-row__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
}

/* WooCommerce notices (add to cart, cart updates, removals) */
.sa-cart-added-box {
  margin-top: 20px;
}

.sa-woo-cart-notices {
  margin-top: 0;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.sa-woo-cart-notices:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info)) {
  display: none;
  margin-bottom: 0;
}

.sa-cart-added-box__content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.sa-cart-added-box__icon {
  width: 20px;
  height: 20px;
  color: var(--success);
  flex-shrink: 0;
}

.sa-cart-added-box__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--forge-black);
}

.sa-product-cart-notice:not(:has(.woocommerce-message, .woocommerce-error, .woocommerce-info)) {
  display: none;
}

.sa-woo-cart-notices .woocommerce-notices-wrapper,
.sa-product-cart-notice .woocommerce-notices-wrapper {
  margin: 0;
}

.sa-woo-cart-notices .woocommerce-message,
.sa-woo-cart-notices .woocommerce-error,
.sa-woo-cart-notices .woocommerce-info,
.sa-woo-cart-notices .woocommerce-NoticeGroup .woocommerce-message,
.sa-woo-cart-notices .woocommerce-NoticeGroup .woocommerce-error,
.sa-woo-cart-notices .woocommerce-NoticeGroup .woocommerce-info,
.sa-product-cart-notice .woocommerce-message,
.sa-product-cart-notice .woocommerce-error,
.sa-product-cart-notice .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 22px;
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border-top: 1px solid var(--forge-700);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--forge-black);
  list-style: none;
}

.sa-woo-cart-notices .woocommerce-message::before,
.sa-woo-cart-notices .woocommerce-error::before,
.sa-woo-cart-notices .woocommerce-info::before,
.sa-product-cart-notice .woocommerce-message::before,
.sa-product-cart-notice .woocommerce-error::before,
.sa-product-cart-notice .woocommerce-info::before {
  display: none;
}

.sa-woo-cart-notices .woocommerce-message a.button,
.sa-woo-cart-notices .woocommerce-info a.button,
.sa-woo-cart-notices .woocommerce-error a.button,
.sa-woo-cart-notices .woocommerce-message a.wc-forward,
.sa-woo-cart-notices .woocommerce-info a.wc-forward,
.sa-woo-cart-notices .woocommerce-error a.wc-forward,
.sa-woo-cart-notices .woocommerce-message a.restore-item,
.sa-woo-cart-notices .woocommerce-info a.restore-item,
.sa-woo-cart-notices .woocommerce-error a.restore-item,
.sa-product-cart-notice .woocommerce-message a.button,
.sa-product-cart-notice .woocommerce-info a.button,
.sa-product-cart-notice .woocommerce-error a.button,
.sa-product-cart-notice .woocommerce-message a.wc-forward,
.sa-product-cart-notice .woocommerce-info a.wc-forward,
.sa-product-cart-notice .woocommerce-error a.wc-forward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: auto;
  padding: 10px 18px;
  border: 1px solid var(--steel-600);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--forge-black);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}

.sa-woo-cart-notices .woocommerce-message a.button:hover,
.sa-woo-cart-notices .woocommerce-info a.button:hover,
.sa-woo-cart-notices .woocommerce-error a.button:hover,
.sa-woo-cart-notices .woocommerce-message a.wc-forward:hover,
.sa-woo-cart-notices .woocommerce-info a.wc-forward:hover,
.sa-woo-cart-notices .woocommerce-error a.wc-forward:hover,
.sa-woo-cart-notices .woocommerce-message a.restore-item:hover,
.sa-woo-cart-notices .woocommerce-info a.restore-item:hover,
.sa-woo-cart-notices .woocommerce-error a.restore-item:hover,
.sa-product-cart-notice .woocommerce-message a.button:hover,
.sa-product-cart-notice .woocommerce-info a.button:hover,
.sa-product-cart-notice .woocommerce-error a.button:hover,
.sa-product-cart-notice .woocommerce-message a.wc-forward:hover,
.sa-product-cart-notice .woocommerce-info a.wc-forward:hover,
.sa-product-cart-notice .woocommerce-error a.wc-forward:hover {
  border-color: var(--ember-500);
  color: var(--ember-600);
}

/* WooCommerce */
.sa-woo-add-to-cart form.cart {
  margin: 0;
  display: inline;
}

.sa-woocommerce-cart .woocommerce {
  color: var(--ash-100);
}

.sa-woocommerce-cart .woocommerce-cart-form,
.sa-woocommerce-cart .cart-collaterals .cart_totals {
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-lg);
}

.sa-woocommerce-cart .shop_table {
  width: 100%;
  border-collapse: collapse;
  color: var(--forge-black);
  font-family: var(--font-body);
}

.sa-woocommerce-cart .shop_table th,
.sa-woocommerce-cart .shop_table td {
  padding: 14px 10px;
  border-bottom: 1px solid var(--steel-600);
  vertical-align: middle;
}

.sa-woocommerce-cart .shop_table .product-name a {
  color: var(--forge-black);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
}

.sa-woocommerce-cart .button,
.sa-woocommerce-cart .checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--ember-500);
  color: var(--accent-contrast);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
}

.sa-woocommerce-cart .cart-collaterals {
  margin-top: clamp(24px, 3vw, 40px);
}

.sa-woocommerce-cart .cart_totals h2,
.sa-woocommerce-cart .woocommerce-notices-wrapper + .woocommerce-info {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--forge-black);
}

.sa-woocommerce-cart .woocommerce-info,
.sa-woocommerce-cart .woocommerce-message {
  background: var(--forge-800);
  border-top-color: var(--ember-500);
  color: var(--ash-100);
}

/* Checkout */
.sa-checkout-empty {
  text-align: center;
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 96px) 24px;
  box-shadow: var(--shadow-lg);
}

.sa-checkout-empty p {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--forge-black);
  margin: 0 0 28px;
}

.sa-checkout-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(24px, 3vw, 36px);
}

.sa-checkout-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ember-400);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.sa-checkout-back:hover {
  color: var(--molten-400);
}

.sa-checkout-note {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ash-200);
  margin: 0;
}

.sa-checkout-note a {
  color: var(--ember-600);
  font-weight: 600;
  text-decoration: none;
}

.sa-checkout-note a:hover {
  color: var(--molten-400);
}

.sa-checkout-page .woocommerce {
  color: var(--ash-100);
}

.sa-checkout-page .clear {
  display: none;
}

/* Coupon toggle + form */
.sa-checkout-page .woocommerce-form-coupon-toggle {
  margin-bottom: 20px;
}

.sa-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info {
  margin: 0;
}

.sa-checkout-page .woocommerce-form-coupon {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.5vw, 24px);
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}

.sa-checkout-page .woocommerce-form-coupon .form-row {
  margin: 0;
  padding: 0;
}

.sa-checkout-page .woocommerce-form-coupon .form-row-first,
.sa-checkout-page .woocommerce-form-coupon .form-row-last {
  width: auto;
  float: none;
}

.sa-checkout-page .woocommerce-form-coupon .button {
  height: 48px;
  padding: 0 24px;
  white-space: nowrap;
}

/* Layout */
.sa-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}

.sa-checkout-panel {
  background: var(--cream);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3vw, 40px);
  box-shadow: var(--shadow-lg);
}

.sa-checkout-panel--summary {
  position: sticky;
  top: clamp(96px, 12vw, 120px);
}

.sa-checkout-panel #order_review_heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--forge-black);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--forge-700);
}

.sa-checkout-panel .col2-set {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
}

.sa-checkout-panel .col-1,
.sa-checkout-panel .col-2 {
  width: 100%;
  float: none;
}

/* Section headings */
.sa-checkout-page .woocommerce-billing-fields h3,
.sa-checkout-page .woocommerce-shipping-fields h3,
.sa-checkout-page .woocommerce-additional-fields h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--forge-black);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--steel-600);
}

.sa-checkout-page .woocommerce-shipping-fields {
  margin-top: clamp(8px, 1.5vw, 16px);
}

.sa-checkout-page #ship-to-different-address {
  margin: 0 0 18px;
}

.sa-checkout-page #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--forge-800);
  cursor: pointer;
}

/* Form fields */
.sa-checkout-page .woocommerce-billing-fields__field-wrapper,
.sa-checkout-page .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.sa-checkout-page .form-row {
  margin: 0;
  padding: 0;
}

.sa-checkout-page .form-row-wide,
.sa-checkout-page .form-row-wide .woocommerce-input-wrapper,
.sa-checkout-page #billing_address_1_field,
.sa-checkout-page #billing_address_2_field,
.sa-checkout-page #billing_company_field,
.sa-checkout-page #billing_email_field,
.sa-checkout-page #billing_phone_field,
.sa-checkout-page #shipping_address_1_field,
.sa-checkout-page #shipping_address_2_field,
.sa-checkout-page #shipping_company_field,
.sa-checkout-page #order_comments_field {
  grid-column: 1 / -1;
}

.sa-checkout-page .form-row textarea {
  min-height: 110px;
}

.sa-checkout-page input[type='checkbox'],
.sa-checkout-page input[type='radio'] {
  accent-color: var(--ember-500);
  width: 16px;
  height: 16px;
}

/* Order review table */
.sa-checkout-page .shop_table {
  width: 100%;
  border-collapse: collapse;
  color: var(--forge-black);
  font-family: var(--font-body);
  font-size: 15px;
}

.sa-checkout-page .shop_table thead {
  display: none;
}

.sa-checkout-page .shop_table th,
.sa-checkout-page .shop_table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--steel-600);
  vertical-align: middle;
}

.sa-checkout-page .shop_table .product-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
}

.sa-checkout-page .shop_table .product-quantity {
  color: var(--ash-200);
  font-weight: 500;
}

.sa-checkout-page .shop_table tfoot th,
.sa-checkout-page .shop_table tfoot td {
  font-weight: 600;
  color: var(--forge-800);
}

.sa-checkout-page .shop_table tfoot tr:last-child th,
.sa-checkout-page .shop_table tfoot tr:last-child td {
  border-bottom: none;
  padding-top: 18px;
}

.sa-checkout-page .order-total th,
.sa-checkout-page .order-total td {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  color: var(--forge-black);
}

.sa-checkout-page .order-total .amount {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 700;
  color: var(--ember-600);
}

/* Payment */
.sa-checkout-page #payment {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--forge-700);
}

.sa-checkout-page #payment .payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sa-checkout-page #payment .wc_payment_method {
  margin: 0;
  background: var(--forge-800);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out);
}

.sa-checkout-page #payment .wc_payment_method:hover,
.sa-checkout-page #payment .wc_payment_method:has(input:checked) {
  border-color: var(--ember-500);
}

.sa-checkout-page #payment .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cream);
  cursor: pointer;
}

.sa-checkout-page #payment .payment_box {
  margin: 0;
  padding: 14px 16px 16px;
  background: rgba(8, 5, 3, 0.35);
  border-top: 1px solid var(--forge-700);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ash-100);
}

.sa-checkout-page #payment .payment_box p {
  margin: 0;
}

.sa-checkout-page #payment .place-order {
  margin: 0;
  padding: 0;
}

.sa-checkout-page #place_order,
.sa-checkout-page .button,
.sa-checkout-page .woocommerce-form-coupon .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  width: 100%;
  padding: 16px 28px;
  border: 1px solid var(--ember-500);
  border-radius: var(--radius-md);
  background: var(--ember-500);
  color: var(--accent-contrast);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.sa-checkout-page #place_order:hover,
.sa-checkout-page .button:hover,
.sa-checkout-page .woocommerce-form-coupon .button:hover {
  color: var(--cream);
  transform: translateY(-2px);
  background: var(--forge-black);
  border-color: var(--forge-black);
  box-shadow: var(--glow-ember);
}

.sa-checkout-page .woocommerce-form-coupon .button {
  width: auto;
}

/* Notices + legal */
.sa-checkout-page .woocommerce-info,
.sa-checkout-page .woocommerce-message,
.sa-checkout-page .woocommerce-error,
.sa-checkout-page .woocommerce-NoticeGroup .woocommerce-error,
.sa-checkout-page .woocommerce-NoticeGroup .woocommerce-message,
.sa-checkout-page .woocommerce-NoticeGroup .woocommerce-info {
  background: var(--forge-800);
  border: 1px solid var(--forge-700);
  border-left: 3px solid var(--ember-500);
  border-radius: var(--radius-md);
  color: var(--ash-100);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
  padding: 14px 16px;
  list-style: none;
}

.sa-checkout-page .woocommerce-error {
  border-left-color: #c0392b;
}

.sa-checkout-page .woocommerce-message {
  border-left-color: #3d8b5f;
}

.sa-checkout-page .woocommerce-info a,
.sa-checkout-page .woocommerce-message a,
.sa-checkout-page .woocommerce-error a,
.sa-checkout-page .showcoupon {
  color: var(--molten-400);
  font-weight: 600;
  text-decoration: none;
}

.sa-checkout-page .woocommerce-info a:hover,
.sa-checkout-page .showcoupon:hover {
  color: var(--ember-400);
}

.sa-checkout-page .woocommerce-privacy-policy-text,
.sa-checkout-page .woocommerce-terms-and-conditions-wrapper {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ash-200);
  margin: 16px 0 0;
}

.sa-checkout-page .woocommerce-terms-and-conditions-wrapper label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ash-200);
}

.sa-checkout-page .woocommerce-terms-and-conditions-wrapper a {
  color: var(--ember-600);
}

@media (max-width: 900px) {
  .sa-checkout-grid {
    grid-template-columns: 1fr;
  }

  .sa-checkout-panel--summary {
    position: static;
  }

  .sa-checkout-page .woocommerce-billing-fields__field-wrapper,
  .sa-checkout-page .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .sa-checkout-page .form-row-first,
  .sa-checkout-page .form-row-last {
    grid-column: 1 / -1;
  }

  .sa-checkout-page .woocommerce-form-coupon {
    grid-template-columns: 1fr;
  }

  .sa-checkout-page .woocommerce-form-coupon .button {
    width: 100%;
  }

  .sa-checkout-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Scroll to top */
.sa-scroll-up {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 120;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ember-500);
  border-radius: var(--radius-md);
  background: var(--ember-500);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.sa-scroll-up.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sa-scroll-up:hover {
  background: var(--forge-black);
  border-color: var(--forge-black);
  color: var(--cream);
}

/* Standard WordPress pages — editor content inside the cream card (partials/standard-page) */
.sa-page-content {
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.72;
  color: var(--forge-black);
}

.sa-page-content > *:first-child {
  margin-top: 0;
}

.sa-page-content > *:last-child {
  margin-bottom: 0;
}

.sa-page-content p,
.sa-page-content ul,
.sa-page-content ol,
.sa-page-content blockquote,
.sa-page-content figure,
.sa-page-content table {
  margin: 0 0 1.2em;
}

.sa-page-content h1,
.sa-page-content h2,
.sa-page-content h3,
.sa-page-content h4,
.sa-page-content h5,
.sa-page-content h6 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--forge-black);
  margin: 1.6em 0 0.6em;
}

.sa-page-content h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.sa-page-content h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
}

.sa-page-content h4,
.sa-page-content h5,
.sa-page-content h6 {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}

.sa-page-content a:not(.sa-btn) {
  color: var(--ember-600);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sa-page-content a:not(.sa-btn):hover {
  color: var(--ember-700);
}

.sa-page-content ul,
.sa-page-content ol {
  padding-left: 1.4em;
}

.sa-page-content li {
  margin-bottom: 0.4em;
}

.sa-page-content blockquote {
  border-left: 3px solid var(--ember-500);
  padding: 4px 0 4px 20px;
  color: var(--steel-600);
  font-style: italic;
}

.sa-page-content blockquote p:last-child {
  margin-bottom: 0;
}

.sa-page-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.sa-page-content hr {
  border: 0;
  border-top: 1px solid var(--forge-700);
  opacity: 0.35;
  margin: 2em 0;
}

.sa-page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.sa-page-content th,
.sa-page-content td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(51, 42, 33, 0.25);
  text-align: left;
}

.sa-page-content th {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.sa-page-content .page-nav {
  margin-top: 2em;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.1em;
}

/* Meet the Artist: editor (WYSIWYG) body copy */
.sa-about-body p { margin: 0; }
.sa-about-body a { color: var(--molten-400); }

/* Alert popup (Options → Alert Popup; components/alert-modal) */
.sa-alert-modal {
  position: fixed;
  inset: 0;
  z-index: 130; /* above the scroll-up button, below #sa-progress */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}

.sa-alert-modal[hidden] {
  display: none;
}

.sa-alert-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sa-alert-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 6, 0.7);
  backdrop-filter: blur(3px);
}

.sa-alert-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: calc(100dvh - 2 * clamp(16px, 3vw, 32px));
  background: var(--cream);
  color: var(--forge-black);
  border: 1px solid var(--forge-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(14px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}

.sa-alert-modal.is-open .sa-alert-modal__dialog {
  transform: none;
}

/* Ember rule across the top, matching the page progress bar */
.sa-alert-modal__dialog::before {
  content: '';
  flex-shrink: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ember-500), var(--molten-400));
}

.sa-alert-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(22px, 3.2vw, 34px) 0;
}

.sa-alert-modal__title {
  margin: 0;
  padding-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--forge-black);
}

.sa-alert-modal__close {
  flex-shrink: 0;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(51, 42, 33, 0.35);
  border-radius: var(--radius-md);
  color: var(--forge-black);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.sa-alert-modal__close:hover {
  border-color: var(--ember-500);
  color: var(--ember-600);
}

.sa-alert-modal__body {
  min-height: 0;
  overflow-y: auto;
  padding: 18px clamp(22px, 3.2vw, 34px) 22px;
}

.sa-alert-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px clamp(22px, 3.2vw, 34px) clamp(20px, 3vw, 26px);
  border-top: 1px solid rgba(51, 42, 33, 0.18);
}

.sa-alert-modal__close:focus-visible,
.sa-alert-modal .sa-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

body.sa-alert-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .sa-alert-modal,
  .sa-alert-modal__dialog {
    transition: none;
  }
}

/* ============ Panel motion ============
   Brings the quieter panels (reviews, about/category insets, CTA, footer) in
   line with the hover + reveal motion the gallery, categories and hero already have. */

/* Reviews: same hover lift as the featured cards */
.sa-review-card {
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.sa-review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* About photo + insets: slow zoom on hover like .sa-band-photo */
.sa-about-photo img,
.sa-about-inset img,
.sa-cat-inset img {
  transition: transform 1.2s var(--ease-out);
}

.sa-about-photo:hover img,
.sa-about-inset:hover img,
.sa-cat-inset:hover img {
  transform: scale(1.05);
}

/* CTA backdrop settles from a slight zoom once its card reveals (same move as the hero photo) */
.sa-cta-bg {
  transform: scale(1.08);
  transition: transform 2.2s var(--ease-out);
}

.sa-cta:has(.sa-in) .sa-cta-bg {
  transform: scale(1);
}

/* Footer social buttons */
.sa-social-link {
  border: 1px solid var(--steel-600);
  color: var(--ash-200);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.sa-social-link:hover {
  transform: translateY(-3px);
  border-color: var(--ember-500);
  color: var(--ember-400);
  background: rgba(228, 87, 31, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .sa-feature-row[data-reveal]:not(.sa-in),
  .sa-hero-rise,
  .sa-hero.sa-hero-loaded .sa-hero-rise {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sa-hero-photo,
  .sa-hero.sa-hero-loaded .sa-hero-photo,
  .sa-cta-bg,
  .sa-cta:has(.sa-in) .sa-cta-bg {
    transform: none;
    transition: none;
  }

  .sa-review-card:hover,
  .sa-feature-card:hover,
  .sa-social-link:hover,
  .sa-about-photo:hover img,
  .sa-about-inset:hover img,
  .sa-cat-inset:hover img {
    transform: none;
  }
}

@media print {
  [data-reveal],
  .sa-hero-rise {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Editor content in the Form Page sidebar (e.g. Accessibility Statement).
   Reuses .sa-page-content for prose, scaled down for the narrower column, and
   restores block flow over the flex column .sa-form-card uses for form rows. */
.sa-form-page-copy {
  display: block;
  font-size: 16.5px;
  line-height: 1.6;
}

.sa-form-page-copy h2 {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  margin: 1.3em 0 0.4em;
}

.sa-form-page-copy h3 {
  font-size: 1.05rem;
}

.sa-form-page-copy p,
.sa-form-page-copy ul,
.sa-form-page-copy ol {
  margin: 0 0 0.9em;
}

/* Search results page */
.sa-search-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.sa-search-form .sa-form-input {
  flex: 1;
  min-width: 0;
}

.sa-search-form .sa-btn {
  flex-shrink: 0;
}

.sa-search-results {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.sa-search-result {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid rgba(20, 16, 13, 0.14);
}

.sa-search-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--ash-100);
}

.sa-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sa-search-body {
  min-width: 0;
}

.sa-search-type {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ember-600);
  margin-bottom: 6px;
}

.sa-search-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.1;
  margin: 0;
}

.sa-search-title a {
  color: var(--forge-black);
  text-decoration: none;
}

.sa-search-title a:hover,
.sa-search-title a:focus-visible {
  color: var(--ember-600);
}

.sa-search-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ember-600);
  margin-top: 6px;
}

.sa-search-excerpt {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--forge-black);
  margin: 8px 0 0;
}

.sa-search-empty {
  margin-top: 32px;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  color: var(--forge-black);
}

.sa-search-empty p {
  margin: 0;
}

.sa-search-pagination {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 16, 13, 0.14);
}

.sa-search-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sa-search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--forge-black);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--forge-black);
  text-decoration: none;
}

.sa-search-pagination .page-numbers.current,
.sa-search-pagination a.page-numbers:hover {
  background: var(--ember-500);
  border-color: var(--ember-500);
  color: var(--cream);
}

.sa-search-pagination .page-numbers.dots {
  border-color: transparent;
}

.sa-search-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 560px) {
  .sa-search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .sa-search-result {
    gap: 16px;
  }

  .sa-search-thumb {
    width: 72px;
    height: 72px;
  }
}

/* Meet the Artist process cards: center the icon when stacked, and keep the
   last card's icon border intact (the #why last-child rule hides it). */
@media (max-width: 900px) {
  .sa-why-grid > div > div.sa-step-icon {
    margin-left: auto !important;
    margin-right: auto !important;
    border-bottom-color: var(--copper-600) !important;
  }
}