@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; }

.lg-cap span{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--ember-400);display:block;margin-bottom:5px}.lg-cap h4{font-family:var(--font-display);text-transform:uppercase;font-size:20px;color:var(--cream);margin:0;line-height:1.05}.lg-backdrop{background:rgba(10,8,6,.96)}

  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}}
  /* Grid stacks */
  @media(max-width:900px){
    .sa-about-grid,.sa-why-grid,.sa-band-grid,.sa-events-grid,.sa-faq-grid,.sa-final-grid,.sa-featured-grid{grid-template-columns:1fr!important;gap:clamp(40px,6vw,88px)!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:left}
    .sa-gallery-head>div{max-width:none!important}
    .sa-events-grid>*:first-child>div[style*="flex"]>i{display:none!important}
    .sa-gallery-grid{grid-template-columns:repeat(5,1fr)!important}
    .sa-gallery-grid>*:nth-child(n+21){display:none!important}
  }
  @media(max-width:900px){.sa-about-inset,.sa-cat-inset{display:none!important}}
  @media(max-width:760px){
    .sa-foot{grid-template-columns:1fr!important;text-align:center}
    .sa-foot img{margin-left:auto;margin-right:auto}
    .sa-foot p{margin-left:auto!important;margin-right:auto!important}
    .sa-foot ul{justify-items:center}
    .sa-foot>div:first-child>div{justify-content:center}
    .sa-copy{flex-direction:column;align-items:center!important;text-align:center}
  }
  @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}
  }
  /* 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}
  }



.sa-home {
  background: var(--forge-900);
  color: var(--cream);
}

.sa-light::before {
  background-image: url('../images/mockup/light-panel-rust.jpg');
}

.sa-rust::before {
  background-image: url('../images/mockup/rust.jpg');
}

.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.sa-btn-lg {
  padding: 16px 26px;
  font-size: 14px;
}

.sa-btn-primary {
  background: linear-gradient(145deg, var(--ember-500), var(--ember-600));
  color: var(--accent-contrast);
  box-shadow: 0 10px 24px -10px rgba(228, 87, 31, 0.65);
}

.sa-btn-primary:hover {
  color: var(--accent-contrast);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(228, 87, 31, 0.75);
}

.sa-btn-secondary {
  background: transparent;
  color: var(--cream);
  border-color: var(--forge-700);
}

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

.sa-btn-copper {
  background: linear-gradient(145deg, var(--copper-500), var(--copper-600));
  color: var(--accent-contrast);
}

.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);
  animation: saFade 0.25s var(--ease-out);
}

.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%);
  animation: none;
  transition: transform var(--dur-slow) var(--ease-out);
}

.sa-drawer.is-open .sa-drawer__panel {
  transform: translateX(0);
  animation: saDrawerIn 0.32s var(--ease-out);
}

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

.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-faq-button {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: clamp(18px, 2vw, 24px);
  text-align: left;
  cursor: pointer;
  color: var(--cream);
}

.sa-faq-button span {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.sa-faq-panel {
  display: none;
  padding: 0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  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-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}

@media (max-width: 1100px) {
  .sa-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

@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;
}

.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-scroll {
  transform: translateX(-50%) translateY(28px);
}

.sa-hero.sa-hero-loaded .sa-hero-scroll {
  transform: translateX(-50%);
}

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

.sa-hero .sa-btn-primary {
  background: var(--ember-500);
  border: 1px solid var(--ember-500);
  padding: 16px 34px;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  box-shadow: none;
}

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

.sa-hero .sa-btn-secondary {
  background: var(--cream);
  color: var(--forge-black);
  border: 1.5px solid var(--cream);
  padding: 16px 34px;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

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

.sa-feature-row {
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}

.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-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-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: 900px) {
  .sa-contact-grid {
    grid-template-columns: 1fr;
  }
}

@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: 900px) {
  .sa-pd-grid,
  .sa-cart-grid {
    grid-template-columns: 1fr;
  }

  .sa-cart-row {
    flex-wrap: wrap;
  }
}

/* WooCommerce */
.sa-woo-add-to-cart form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 0;
}

.sa-woo-add-to-cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--steel-600);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.sa-woo-add-to-cart .quantity .qty {
  width: 48px;
  height: 44px;
  border: none;
  background: var(--cream);
  color: var(--forge-black);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: center;
}

.sa-woo-add-to-cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 28px;
  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: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.sa-woo-add-to-cart .single_add_to_cart_button:hover {
  background: var(--ember-600);
  transform: translateY(-1px);
}

.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);
}