:root{--brand:#9e1a32;--brand-dark:#721126;--ink:#252525;--ink-soft:#3d3d3d;--muted:#737373;--line:rgba(61,61,61,.14);--paper:#f7f5f2;--white:#fff;--shadow:0 22px 70px rgba(24,20,20,.12);--radius-lg:28px;--container:1240px;--header-h:82px;--ease:cubic-bezier(.2,.75,.25,1)}
*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 22px)}body{margin:0;color:var(--ink);background:#fff;font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}img,svg{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}::selection{color:#fff;background:var(--brand)}
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}.section-pad{padding:clamp(88px,10vw,150px) 0}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.skip-link{position:fixed;z-index:1000;top:12px;left:12px;padding:10px 14px;color:#fff;background:var(--brand);border-radius:8px;transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}
.site-header{position:fixed;z-index:100;inset:0 0 auto;height:var(--header-h);transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s var(--ease)}.site-header.is-scrolled{background:rgba(255,255,255,.86);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(18px)}.nav-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100%}.brand{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px}.brand-mark{width:21px;height:21px;background:var(--brand);clip-path:polygon(0 0,100% 0,74% 100%,18% 100%);transform:skewX(-7deg)}.brand-word{font-family:"Red Hat Display",sans-serif;font-size:1.22rem;font-weight:700;letter-spacing:-.025em}.primary-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}.nav-link{position:relative;padding:11px 2px;color:var(--ink-soft);font-size:.87rem;font-weight:500}.nav-link:after{content:"";position:absolute;right:0;bottom:5px;left:0;height:1.5px;background:var(--brand);transform:scaleX(0);transform-origin:right;transition:transform .28s var(--ease)}.nav-link:hover:after,.nav-link:focus-visible:after{transform:scaleX(1);transform-origin:left}.cart-link{justify-self:end;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;transition:.25s var(--ease)}.cart-link:hover,.cart-link:focus-visible{color:#fff;background:var(--brand);border-color:var(--brand);transform:translateY(-2px)}.cart-link svg{width:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.65}.nav-toggle{display:none}
h1,h2,h3{margin:0;font-family:"Red Hat Display",sans-serif;line-height:.98;letter-spacing:-.045em}h1{max-width:760px;font-size:clamp(3.75rem,7.2vw,7.3rem);font-weight:600}h1 span{color:var(--brand)}h2{font-size:clamp(2.55rem,5vw,5.2rem);font-weight:600}h3{font-size:1.5rem;font-weight:600;line-height:1.05}p{margin:0}.eyebrow,.section-kicker{color:var(--brand);font-size:.73rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}.section-heading{max-width:820px;margin-bottom:clamp(42px,6vw,72px)}.section-heading h2{margin-top:13px}.section-heading>p:last-child{max-width:640px;margin-top:24px;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 22px;border:1px solid transparent;border-radius:999px;font-size:.86rem;font-weight:600;transition:.25s var(--ease)}.button:hover,.button:focus-visible{transform:translateY(-3px)}.button-primary{color:#fff;background:var(--brand);box-shadow:0 10px 30px rgba(158,26,50,.2)}.button-primary:hover,.button-primary:focus-visible{background:var(--brand-dark);box-shadow:0 14px 36px rgba(158,26,50,.28)}.button-quiet{gap:10px;border-color:var(--line)}.button-quiet:hover,.button-quiet:focus-visible{border-color:rgba(158,26,50,.45)}.button-light{color:var(--ink);background:#fff}
.hero{position:relative;min-height:100svh;padding:calc(var(--header-h) + 78px) 0 70px;overflow:hidden;background:radial-gradient(circle at 78% 38%,rgba(158,26,50,.08),transparent 33%),linear-gradient(180deg,#fff,#faf9f7)}.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(500px,.88fr);gap:clamp(40px,5vw,85px);align-items:center}.hero-copy{position:relative;z-index:2}.hero-copy .eyebrow{margin-bottom:22px}.hero-lead{max-width:610px;margin-top:28px;color:var(--ink-soft);font-size:clamp(1.05rem,1.45vw,1.28rem)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr);max-width:720px;margin-top:clamp(50px,7vw,92px);border-top:1px solid var(--line)}.hero-proof>div{padding:20px 18px 0 0}.hero-proof>div+div{padding-left:22px;border-left:1px solid var(--line)}.hero-proof strong,.hero-proof span{display:block}.hero-proof strong{font-family:"Red Hat Display",sans-serif;font-size:1rem}.hero-proof span{margin-top:5px;color:var(--muted);font-size:.72rem;line-height:1.45}.hero-media{position:relative}.media-frame{position:relative;overflow:hidden;border-radius:min(3.5vw,40px);box-shadow:var(--shadow);transform:rotate(1.5deg);transition:transform .65s var(--ease)}.hero-media:hover .media-frame{transform:rotate(0) scale(1.01)}.media-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}.media-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 56%,rgba(24,20,20,.15));pointer-events:none}.media-label{position:absolute;z-index:2;right:18px;bottom:18px;display:flex;align-items:center;gap:9px;padding:10px 14px;color:#fff;background:rgba(28,26,26,.72);backdrop-filter:blur(12px);border-radius:999px;font-size:.67rem;letter-spacing:.06em;text-transform:uppercase}.pulse-dot{width:7px;height:7px;background:#fff;border-radius:50%;animation:pulse 2s infinite}.floating-card{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:13px 17px;background:rgba(255,255,255,.87);border:1px solid rgba(255,255,255,.75);border-radius:14px;box-shadow:0 12px 34px rgba(21,18,18,.13);backdrop-filter:blur(14px)}.floating-card span{color:var(--brand);font-size:.72rem;font-weight:600}.floating-card strong{font-family:"Red Hat Display",sans-serif;font-size:.82rem}.floating-card-top{top:13%;left:-8%}.floating-card-bottom{right:-4%;bottom:13%}.hero-glow{position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(70px);opacity:.12;pointer-events:none}.hero-glow-a{top:9%;right:8%;background:var(--brand)}.hero-glow-b{bottom:-160px;left:-90px;background:#d5c8b9}.scroll-cue{position:absolute;right:24px;bottom:26px;display:flex;align-items:center;gap:11px;color:var(--muted);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;writing-mode:vertical-rl}.scroll-cue i{display:block;width:1px;height:42px;overflow:hidden;background:var(--line)}.scroll-cue i:after{content:"";display:block;width:1px;height:18px;background:var(--brand);animation:scrollCue 2s infinite}
.split-heading{display:grid;grid-template-columns:.55fr 1.45fr;gap:clamp(35px,7vw,100px)}.split-heading h2{max-width:900px}.split-heading>div>p{max-width:690px;margin-top:28px;color:var(--muted);font-size:1.05rem}.action-strip{padding:clamp(80px,9vw,130px) 0;background:var(--paper)}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.action-card{overflow:hidden;background:#fff;border-radius:var(--radius-lg);transition:.4s var(--ease)}.action-card:hover{box-shadow:0 24px 50px rgba(30,25,25,.09);transform:translateY(-7px)}.action-media{position:relative;min-height:330px;overflow:hidden;background:#282828}.action-media:before,.action-media:after{content:"";position:absolute}.action-media-drill:before{top:22%;left:48%;width:44px;height:180px;background:linear-gradient(180deg,#b6b6b6,#505050);border-radius:8px 8px 18px 18px;transform:translateX(-50%)}.action-media-drill:after{right:18%;bottom:20%;left:18%;height:12px;background:#929292;border-radius:100%}.motion-line{position:absolute;top:13%;left:49%;width:1px;height:66%;background:rgba(255,255,255,.24);animation:verticalMotion 1.7s var(--ease) infinite alternate}.action-media-grind{background:linear-gradient(145deg,#242424,#3a3a3a)}.action-media-grind:before{top:36%;left:30%;width:48%;height:55px;background:linear-gradient(90deg,#9a1830,#c33853);border-radius:30px;transform:rotate(-13deg)}.action-media-grind:after{right:15%;bottom:24%;width:104px;height:104px;border:8px solid #a6a6a6;border-radius:50%}.motion-orbit{position:absolute;right:11%;bottom:20%;width:132px;height:132px;border:1px dashed rgba(255,255,255,.25);border-radius:50%;animation:rotate 8s linear infinite}.action-media-solder{background:linear-gradient(135deg,#2d2d2d,#1f1f1f)}.action-media-solder:before{top:32%;left:26%;width:56%;height:42px;background:linear-gradient(90deg,#9d1c35 0 72%,#aaa 72% 100%);border-radius:30px 5px 5px 30px;transform:rotate(18deg)}.action-media-solder:after{right:18%;bottom:27%;width:3px;height:88px;background:#d0d0d0;transform:rotate(18deg)}.motion-spark{position:absolute;right:18%;bottom:24%;width:11px;height:11px;background:#fff;border-radius:50%;box-shadow:0 0 16px #fff,0 0 28px rgba(255,171,77,.85);animation:spark 1.2s ease-in-out infinite alternate}.action-copy{padding:26px 28px 30px}.action-index{display:block;margin-bottom:32px;color:var(--brand);font-size:.67rem;font-weight:600;letter-spacing:.12em}.action-copy p{margin-top:14px;color:var(--muted);font-size:.88rem}
.feature-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(45px,8vw,120px);align-items:center}.feature-visual{overflow:hidden;border-radius:var(--radius-lg);background:var(--paper)}.feature-visual img{width:100%;aspect-ratio:6/5;object-fit:cover;transition:transform .9s var(--ease)}.feature-visual:hover img{transform:scale(1.025)}.feature-copy h2{margin-top:14px}.feature-copy>p:not(.section-kicker){max-width:590px;margin-top:26px;color:var(--muted)}.feature-list{padding:0;margin:38px 0 30px;list-style:none;border-top:1px solid var(--line)}.feature-list li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:21px 0;border-bottom:1px solid var(--line)}.feature-list li>span{color:var(--brand);font-size:.69rem;font-weight:600}.feature-list strong{font-family:"Red Hat Display",sans-serif;font-size:1rem}.feature-list p{margin-top:5px;color:var(--muted);font-size:.82rem}.text-link{display:inline-flex;gap:10px;align-items:center;color:var(--brand);font-size:.88rem;font-weight:600}.text-link span{transition:transform .25s var(--ease)}.text-link:hover span,.text-link:focus-visible span{transform:translateX(5px)}
.maker-band{padding:clamp(85px,10vw,150px) 0;color:#fff;background:var(--ink)}.maker-band-grid{display:grid;grid-template-columns:.4fr 1.6fr;gap:50px}.maker-band .section-kicker{color:#d7b2ba}.maker-words{display:flex;flex-direction:column}.maker-words span{display:block;padding:11px 0 16px;font-family:"Red Hat Display",sans-serif;font-size:clamp(3rem,6.4vw,7rem);font-weight:500;line-height:.86;letter-spacing:-.055em;border-bottom:1px solid rgba(255,255,255,.12);transition:.3s var(--ease)}.maker-words span:hover{padding-left:20px;color:#e2a2ae}.product-preview-grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(42px,7vw,95px);align-items:center}.product-preview-copy h2{max-width:540px;margin-top:14px}.product-preview-copy>p:not(.section-kicker){max-width:470px;margin-top:25px;color:var(--muted)}.product-preview-copy .button{margin-top:30px}.product-teaser{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);transition:.4s var(--ease)}.product-teaser:hover,.product-teaser:focus-visible{box-shadow:var(--shadow);transform:translateY(-7px)}.product-teaser-visual{overflow:hidden;background:var(--paper)}.product-teaser-visual img{width:100%;aspect-ratio:9/7;object-fit:cover;transition:transform .75s var(--ease)}.product-teaser:hover img{transform:scale(1.03)}.product-teaser-meta{display:flex;align-items:center;justify-content:space-between;padding:23px 24px 25px}.product-teaser-meta span:first-child{display:block;color:var(--muted);font-size:.7rem}.product-teaser-meta strong{display:block;margin-top:3px;font-family:"Red Hat Display",sans-serif;font-size:1.35rem}.round-arrow{display:grid!important;place-items:center;width:44px;height:44px;color:#fff!important;background:var(--brand);border-radius:50%;transition:transform .3s var(--ease)}.product-teaser:hover .round-arrow{transform:rotate(45deg)}.community-proof{padding:0 0 clamp(80px,10vw,140px)}.proof-card{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;padding:clamp(38px,6vw,78px);background:var(--paper);border-radius:var(--radius-lg)}.proof-card h2{max-width:700px;margin-top:14px;font-size:clamp(2.3rem,4.3vw,4.7rem)}.proof-card>p{align-self:end;max-width:460px;color:var(--muted)}.final-cta{color:#fff;background:radial-gradient(circle at 72% 30%,rgba(255,255,255,.12),transparent 22%),var(--brand)}.final-cta-inner{display:grid;grid-template-columns:1fr auto;align-items:end;gap:50px}.final-cta .section-kicker{grid-column:1/-1;color:#edc6ce}.final-cta h2{font-size:clamp(4rem,8vw,8.2rem)}.final-cta .button{margin-bottom:8px}
.site-footer{padding:54px 0;color:#c9c9c9;background:#1d1d1d}.footer-grid{display:grid;grid-template-columns:1fr auto;gap:38px 60px;align-items:start}.brand-footer{color:#fff}.site-footer p{margin-top:14px;font-size:.78rem}.footer-links{display:flex;flex-wrap:wrap;gap:24px;font-size:.78rem}.footer-links a:hover,.footer-links a:focus-visible{color:#fff}.footer-small{grid-column:1/-1;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--reveal-delay,0ms)}.reveal.is-visible{opacity:1;transform:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}@keyframes scrollCue{from{transform:translateY(-20px);opacity:0}40%{opacity:1}to{transform:translateY(44px);opacity:0}}@keyframes verticalMotion{from{transform:translateY(-8px);opacity:.4}to{transform:translateY(16px);opacity:1}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes spark{from{transform:scale(.72);opacity:.55}to{transform:scale(1.25);opacity:1}}
@media(max-width:1050px){.hero{min-height:auto}.hero-grid{grid-template-columns:1fr}.hero-copy{max-width:850px}.hero-media{width:min(90%,760px);margin:20px auto 0}.scroll-cue{display:none}.feature-layout,.product-preview-grid{gap:50px}}
@media(max-width:860px){:root{--header-h:72px}.nav-wrap{grid-template-columns:1fr auto auto;gap:10px}.nav-toggle{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;border:1px solid var(--line);border-radius:50%;cursor:pointer}.nav-toggle>span:not(.sr-only){position:absolute;width:16px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}.nav-toggle>span:nth-of-type(2){transform:translateY(-3px)}.nav-toggle>span:nth-of-type(3){transform:translateY(3px)}.nav-toggle[aria-expanded=true]>span:nth-of-type(2){transform:rotate(45deg)}.nav-toggle[aria-expanded=true]>span:nth-of-type(3){transform:rotate(-45deg)}.primary-nav{position:fixed;z-index:1;top:0;right:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:calc(var(--header-h) + 34px) 20px 38px;background:rgba(255,255,255,.97);box-shadow:0 25px 50px rgba(24,20,20,.12);backdrop-filter:blur(16px);transform:translateY(-120%);transition:transform .4s var(--ease)}.primary-nav.is-open{transform:translateY(0)}.nav-link{width:100%;padding:13px 0;font-family:"Red Hat Display",sans-serif;font-size:1.35rem}.cart-link{grid-column:3}.split-heading,.feature-layout,.product-preview-grid,.maker-band-grid,.proof-card,.final-cta-inner{grid-template-columns:1fr}.action-grid{grid-template-columns:1fr}.action-card{display:grid;grid-template-columns:1.05fr .95fr}.action-media{min-height:270px}.maker-band-grid{gap:34px}.final-cta .section-kicker,.footer-small{grid-column:1}}
@media(max-width:620px){.container{width:min(calc(100% - 28px),var(--container))}.hero{padding-top:calc(var(--header-h) + 50px)}h1{font-size:clamp(3.15rem,15vw,5rem)}.hero-proof{grid-template-columns:1fr}.hero-proof>div{padding:16px 0;border-bottom:1px solid var(--line)}.hero-proof>div+div{padding-left:0;border-left:0}.floating-card{display:none}.action-card{grid-template-columns:1fr}.action-media{min-height:240px}.maker-words span{font-size:clamp(2.9rem,15vw,5rem)}.proof-card{gap:30px}.footer-grid{grid-template-columns:1fr}.footer-small{grid-column:1}}
:focus-visible{outline:3px solid rgba(158,26,50,.32);outline-offset:4px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}


/* Maker-word hover icons */
.maker-word{display:flex!important;align-items:center}
.maker-icon{position:relative;flex:0 0 auto;width:0;height:clamp(34px,4vw,58px);margin-right:0;opacity:0;transform:translateX(-12px) scale(.82);transition:width .34s var(--ease),margin-right .34s var(--ease),opacity .28s var(--ease),transform .34s var(--ease)}
.maker-word:hover .maker-icon{width:clamp(38px,4.6vw,66px);margin-right:clamp(12px,1.7vw,24px);opacity:1;transform:none}
.maker-word-prototype .maker-icon::before{content:"";position:absolute;inset:11%;border:2px solid currentColor;border-radius:50%}
.maker-word-prototype .maker-icon::after{content:"";position:absolute;inset:31%;border:2px solid currentColor;border-radius:50%}
.maker-word-repair .maker-icon::before,.maker-word-repair .maker-icon::after{content:"";position:absolute;top:48%;left:12%;width:76%;height:2px;background:currentColor;border-radius:2px}
.maker-word-repair .maker-icon::before{transform:rotate(42deg)}.maker-word-repair .maker-icon::after{transform:rotate(-42deg)}
.maker-word-modify .maker-icon{background:linear-gradient(currentColor,currentColor) 50% 20%/72% 2px no-repeat,linear-gradient(currentColor,currentColor) 50% 50%/72% 2px no-repeat,linear-gradient(currentColor,currentColor) 50% 80%/72% 2px no-repeat}
.maker-word-modify .maker-icon::before{content:"";position:absolute;left:28%;top:14%;width:7px;height:7px;border:2px solid currentColor;border-radius:50%;background:var(--ink);box-shadow:20px 17px 0 -2px var(--ink),20px 17px 0 0 currentColor,-2px 34px 0 -2px var(--ink),-2px 34px 0 0 currentColor}
.maker-word-craft .maker-icon::before{content:"";position:absolute;width:48%;aspect-ratio:1;top:24%;left:25%;border:2px solid currentColor;transform:rotate(45deg)}
.maker-word-craft .maker-icon::after{content:"";position:absolute;width:2px;height:68%;top:16%;left:49%;background:currentColor;transform:rotate(45deg)}
.maker-word-experiment .maker-icon::before,.maker-word-experiment .maker-icon::after{content:"";position:absolute;inset:13% 48%;width:2px;background:currentColor;border-radius:2px}
.maker-word-experiment .maker-icon::after{transform:rotate(90deg)}
.maker-word-experiment .maker-icon{background:linear-gradient(45deg,transparent 48%,currentColor 48% 52%,transparent 52%) center/72% 72% no-repeat,linear-gradient(-45deg,transparent 48%,currentColor 48% 52%,transparent 52%) center/72% 72% no-repeat}
@media(hover:none){.maker-icon{width:clamp(32px,8vw,46px);margin-right:12px;opacity:.7;transform:none}}


/* ==========================================================================
   V4: photographic hero + current product photography
   ========================================================================== */

.hero-photo {
  position: relative;
  min-height: 94svh;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: #171515;
}

.hero-photo-bg {
  position: absolute;
  inset: 0;
  background:
    url("../images/hero-workbench.jpg") center 48% / cover no-repeat;
  transform: scale(1.008);
}

.hero-photo-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(11, 10, 10, .88) 0%,
      rgba(11, 10, 10, .69) 30%,
      rgba(11, 10, 10, .24) 58%,
      rgba(11, 10, 10, .05) 78%,
      rgba(11, 10, 10, .14) 100%),
    linear-gradient(180deg, rgba(8,8,8,.28) 0%, transparent 35%, rgba(8,8,8,.28) 100%);
}

.hero-photo-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 700px) 1fr;
  grid-template-rows: 1fr auto;
  width: 100%;
  min-height: 94svh;
  padding-top: calc(var(--header-h) + clamp(70px, 11vh, 125px));
  padding-bottom: clamp(40px, 6vh, 72px);
}

.hero-photo-copy {
  align-self: center;
  padding-bottom: clamp(54px, 8vh, 96px);
}

.hero-photo .eyebrow {
  margin-bottom: 22px;
  color: #f2c6cf;
}

.hero-photo h1 {
  max-width: 720px;
  color: var(--white);
  text-shadow: 0 4px 28px rgba(0,0,0,.18);
}

.hero-photo h1 span {
  color: #e66d83;
}

.hero-photo .hero-lead {
  max-width: 580px;
  color: rgba(255,255,255,.82);
}

.button-glass {
  gap: 10px;
  color: var(--white);
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.08);
}

.button-glass:hover,
.button-glass:focus-visible {
  color: var(--white);
  border-color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.15);
}

.hero-photo-proof {
  grid-column: 1 / 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.25);
}

.hero-photo-proof > div {
  padding: 19px 19px 0 0;
}

.hero-photo-proof > div + div {
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,.22);
}

.hero-photo-proof strong,
.hero-photo-proof span {
  display: block;
}

.hero-photo-proof strong {
  font-family: "Red Hat Display", sans-serif;
  font-size: .98rem;
  color: var(--white);
}

.hero-photo-proof span {
  margin-top: 5px;
  color: rgba(255,255,255,.62);
  font-size: .7rem;
  line-height: 1.45;
}

.scroll-cue-light {
  color: rgba(255,255,255,.65);
}

.scroll-cue-light i {
  background: rgba(255,255,255,.28);
}

.scroll-cue-light i::after {
  background: #fff;
}

/* Transparent header over the hero; turns white after scroll */
.site-header:not(.is-scrolled) {
  color: var(--white);
}

.site-header:not(.is-scrolled) .brand-word,
.site-header:not(.is-scrolled) .nav-link,
.site-header:not(.is-scrolled) .cart-link {
  color: var(--white);
}

.site-header:not(.is-scrolled) .cart-link,
.site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(255,255,255,.32);
}

.site-header.is-scrolled {
  color: var(--ink);
}

.action-card-photo .action-media {
  min-height: 0;
  aspect-ratio: 16 / 11;
  background: #1f1f1f;
}

.action-card-photo .action-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .75s var(--ease);
}

.action-card-photo:hover .action-media img {
  transform: scale(1.035);
}

.feature-visual img {
  object-position: center center;
}

@media (max-width: 1050px) {
  .hero-photo-layout {
    grid-template-columns: minmax(0, 650px) 1fr;
  }

  .hero-photo-bg {
    background-position: 58% 50%;
  }
}

@media (max-width: 860px) {
  .hero-photo {
    min-height: 860px;
  }

  .hero-photo-layout {
    min-height: 860px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    padding-top: calc(var(--header-h) + 78px);
  }

  .hero-photo-bg {
    background-position: 62% center;
  }

  .hero-photo-shade {
    background:
      linear-gradient(90deg, rgba(10,9,9,.82), rgba(10,9,9,.48) 70%, rgba(10,9,9,.2)),
      linear-gradient(180deg, rgba(8,8,8,.18), rgba(8,8,8,.12) 50%, rgba(8,8,8,.48));
  }

  .hero-photo-proof {
    grid-column: 1;
    width: min(100%, 680px);
  }

  .site-header:not(.is-scrolled) .primary-nav {
    color: var(--ink);
  }

  .site-header:not(.is-scrolled) .primary-nav .nav-link {
    color: var(--ink);
  }
}

@media (max-width: 620px) {
  .hero-photo {
    min-height: 790px;
  }

  .hero-photo-layout {
    min-height: 790px;
    padding-top: calc(var(--header-h) + 58px);
    padding-bottom: 28px;
  }

  .hero-photo-bg {
    background-position: 67% center;
  }

  .hero-photo-shade {
    background:
      linear-gradient(90deg, rgba(10,9,9,.86), rgba(10,9,9,.5)),
      linear-gradient(180deg, rgba(8,8,8,.22), rgba(8,8,8,.2) 60%, rgba(8,8,8,.58));
  }

  .hero-photo-copy {
    padding-bottom: 30px;
  }

  .hero-photo-proof {
    grid-template-columns: 1fr;
  }

  .hero-photo-proof > div {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }

  .hero-photo-proof > div + div {
    padding-left: 0;
    border-left: 0;
  }
}

/* V5 action grid ---------------------------------------------------------- */
.action-grid-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.action-grid-four .action-card {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(260px, .94fr);
  min-height: 340px;
}

.action-grid-four .action-media {
  aspect-ratio: auto;
  min-height: 340px;
}

.action-grid-four .action-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.action-card-featured {
  border: 1px solid rgba(158, 26, 50, .22);
}

.action-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 8px 11px;
  color: #fff;
  background: rgba(158, 26, 50, .92);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .action-grid-four {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .action-grid-four .action-card {
    grid-template-columns: 1fr;
  }

  .action-grid-four .action-media {
    min-height: 240px;
  }
}


/* ==========================================================================
   V7: warmer premium canvas + softer section transitions
   ========================================================================== */

:root {
  --canvas: #f4f2ef;
  --canvas-deep: #ebe7e2;
}

body {
  background: var(--canvas);
}

/* Let the warm canvas carry the page instead of returning repeatedly to white. */
.intro,
.feature-story,
.product-preview {
  background: var(--canvas);
}

.action-strip {
  background: var(--canvas-deep);
}

/* White cards become deliberate elevated surfaces. */
.action-card {
  background: #fff;
}

.feature-visual {
  background: #fff;
  box-shadow: 0 18px 55px rgba(35, 30, 28, .07);
}

/* Turn the dark maker moment into a contained feature panel on larger screens. */
.maker-band {
  margin: 0 clamp(14px, 2.4vw, 34px);
  border-radius: clamp(24px, 3vw, 42px);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(158,26,50,.16), transparent 26%),
    #252525;
}

.community-proof {
  background: var(--canvas);
}

.proof-card {
  background: #fff;
  box-shadow: 0 18px 55px rgba(35, 30, 28, .055);
}

/* Give the final brand CTA breathing room so it does not read as another flag stripe. */
.final-cta {
  margin: clamp(18px, 2.4vw, 34px);
  border-radius: clamp(24px, 3vw, 42px);
  overflow: hidden;
}

/* Footer stays visually separate and grounded. */
.site-footer {
  margin-top: clamp(18px, 3vw, 42px);
}

@media (max-width: 620px) {
  .maker-band,
  .final-cta {
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 22px;
  }
}


/* ==========================================================================
   V8: spacing refinement between dark maker panel and white proof card
   ========================================================================== */

.community-proof {
  padding-top: clamp(52px, 6vw, 88px);
}

@media (max-width: 620px) {
  .community-proof {
    padding-top: 40px;
  }
}


/* ==========================================================================
   V9: consistent spacing for the final three homepage feature cards
   Dark maker panel -> community proof card -> burgundy CTA
   ========================================================================== */

:root {
  --bottom-card-gap: clamp(28px, 3.4vw, 48px);
}

/* Reset inherited section spacing around the final card sequence. */
.maker-band {
  margin-bottom: 0;
}

.community-proof {
  padding-top: var(--bottom-card-gap);
  padding-bottom: var(--bottom-card-gap);
}

.final-cta {
  margin-top: 0;
  margin-bottom: 0;
}

/* Keep equal visual separation before the footer without affecting card-to-card rhythm. */
.site-footer {
  margin-top: var(--bottom-card-gap);
}

@media (max-width: 620px) {
  :root {
    --bottom-card-gap: 24px;
  }

  .community-proof {
    padding-top: var(--bottom-card-gap);
    padding-bottom: var(--bottom-card-gap);
  }
}


/* ==========================================================================
   V10: alternating image/text rhythm in "See VersaCarve in action"
   Cards 02 and 04 reverse their columns on desktop/tablet.
   ========================================================================== */

@media (min-width: 621px) {
  .action-grid-four .action-card:nth-child(even) .action-media {
    order: 2;
  }

  .action-grid-four .action-card:nth-child(even) .action-copy {
    order: 1;
  }
}

/* Mobile returns to a consistent image-first stack for fast scanning. */
@media (max-width: 620px) {
  .action-grid-four .action-card .action-media {
    order: 1;
  }

  .action-grid-four .action-card .action-copy {
    order: 2;
  }
}


/* ==========================================================================
   V11: standardized burgundy navigation bar across all pages
   ========================================================================== */

.site-header,
.site-header.is-scrolled,
.site-header:not(.is-scrolled) {
  color: #fff;
  background: #9E1A32;
  box-shadow: 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: none;
}

.site-header .brand-word,
.site-header.is-scrolled .brand-word,
.site-header:not(.is-scrolled) .brand-word,
.site-header .nav-link,
.site-header.is-scrolled .nav-link,
.site-header:not(.is-scrolled) .nav-link,
.site-header .cart-link,
.site-header.is-scrolled .cart-link,
.site-header:not(.is-scrolled) .cart-link {
  color: #fff;
}

.site-header .brand-mark {
  background: #fff;
}

.site-header .cart-link,
.site-header.is-scrolled .cart-link,
.site-header:not(.is-scrolled) .cart-link,
.site-header .nav-toggle,
.site-header.is-scrolled .nav-toggle,
.site-header:not(.is-scrolled) .nav-toggle {
  border-color: rgba(255,255,255,.42);
  color: #fff;
}

.site-header .cart-link:hover,
.site-header .cart-link:focus-visible {
  color: #9E1A32;
  background: #fff;
  border-color: #fff;
}

.site-header .nav-link::after,
.site-header.is-scrolled .nav-link::after,
.site-header:not(.is-scrolled) .nav-link::after {
  background: #fff;
}

/* Mobile menu follows the same burgundy navigation language. */
@media (max-width: 860px) {
  .site-header .primary-nav,
  .site-header.is-scrolled .primary-nav,
  .site-header:not(.is-scrolled) .primary-nav {
    color: #fff;
    background: #9E1A32;
  }

  .site-header .primary-nav .nav-link,
  .site-header.is-scrolled .primary-nav .nav-link,
  .site-header:not(.is-scrolled) .primary-nav .nav-link {
    color: #fff;
  }
}

/* V15 remove maker word hover icon treatment */
.maker-icon {
  display:none !important;
}

.maker-word:hover .maker-icon {
  width:0;
  margin-right:0;
  opacity:0;
}


/* Homepage title card spacing adjustment */
.hero-content,
.hero-copy,
.hero-text {
  padding-left: clamp(20px, 4vw, 60px);
  padding-right: clamp(20px, 4vw, 60px);
}

/* Remove extra line beneath Repair in maker words */
.maker-words span:last-child::after {
  display: none;
}


/* Homepage hero title spacing adjustment */
.hero-content,
.hero-copy,
.hero-text {
  padding-left: clamp(28px, 5vw, 80px);
  padding-right: clamp(28px, 5vw, 80px);
}


/* Homepage hero: keep all title-card content away from viewport edges */
.hero .container,
.hero-inner,
.hero-content {
  padding-left: clamp(32px, 5vw, 76px) !important;
  padding-right: clamp(32px, 5vw, 76px) !important;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .hero .container,
  .hero-inner,
  .hero-content {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* Feature story background image update */
.feature-story {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(245,243,239,0) 0%,
      rgba(245,243,239,0.05) 32%,
      rgba(245,243,239,0.65) 52%,
      rgba(245,243,239,1) 68%
    ),
    url("../images/workspace-feature-bg.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}

.feature-story .feature-visual {
  visibility: hidden;
}

.feature-story .feature-layout {
  position: relative;
  z-index: 1;
}

.feature-story .feature-copy {
  margin-left: auto;
}


/* Add breathing room between feature section and hands-on curiosity card */
.feature-system-background {
    margin-bottom: clamp(32px, 4vw, 64px);
}


/* Homepage campaign card width alignment */
.campaign-card,
.from-campaign-card,
.campaign-section .card {
    width: 100%;
    max-width: none;
}

/* Ensure consistent card spacing */
.feature-system-background {
    margin-bottom: clamp(48px, 5vw, 80px);
}


.campaign-funds {
    margin-bottom: 18px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #9E1A32;
}


/* ==========================================================================
   Homepage refinements — campaign width and section spacing
   ========================================================================== */

/* The feature section and dark maker card are separate visual cards.
   Give them a visible, consistent gap rather than relying on a non-existent
   feature-system-background selector. */
.feature-story {
  margin-bottom: clamp(36px, 4vw, 60px);
}

/* Keep the maker panel's existing horizontal inset while honoring the new gap. */
.maker-band {
  margin-top: 0;
}

/* The campaign card should align horizontally with the dark and burgundy cards,
   rather than being constrained by the standard .container max-width. */
.community-proof {
  padding-left: clamp(14px, 2.4vw, 34px);
  padding-right: clamp(14px, 2.4vw, 34px);
}

.community-proof .proof-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Maintain the original two-column editorial layout inside the wider card. */
.proof-card {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
}

.proof-card-story {
  align-self: end;
  max-width: 500px;
}

.proof-card-story > p {
  color: var(--muted);
}

.campaign-funds {
  margin: 0 0 18px;
  color: #9E1A32;
  font-size: 1.05rem;
  font-weight: 600;
}

@media (max-width: 860px) {
  .proof-card {
    grid-template-columns: 1fr;
  }

  .proof-card-story {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .feature-story {
    margin-bottom: 24px;
  }

  .community-proof {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* Kickstarter funds display */
.campaign-funds-display {
    margin-bottom: 28px;
}

.campaign-funds-display .fund-amount {
    font-size: clamp(3rem, 5vw, 5.5rem);
    line-height: 0.95;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: #9E1A32;
    margin-bottom: 12px;
}

.campaign-funds-display .fund-label {
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: lowercase;
    color: #9E1A32;
    letter-spacing: 0.01em;
}

/* Keep old campaign-funds styling from affecting the new display */
.campaign-funds {
    display: none;
}


/* VersaCarve scroll reveal animations */
[data-reveal],
[data-slide] {
    opacity: 0;
    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}

[data-reveal] {
    transform: translateY(24px);
}

[data-slide="left"] {
    transform: translateX(-60px);
}

[data-slide="right"] {
    transform: translateX(60px);
}

.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-slide] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* VersaCarve approved logo marks */
.brand-logo img,
.brand-logo-img {
  display: block;
  width: auto;
  height: 34px;
  object-fit: contain;
}

/* Default navigation uses white logo to match white nav text */
.site-header .brand-logo img,
.site-header .brand-logo-img {
  content: url("../images/logo-top-white.png");
}

/* Light-background logo utility if needed */
.logo-on-light,
.logo-on-light img {
  content: url("../images/logo-footer-red-white.png");
}

@media (max-width: 620px) {
  .brand-logo img,
  .brand-logo-img {
    height: 30px;
  }
}


/* Updated VersaCarve logo usage */
.site-header .brand-logo img,
.site-header .brand-logo-img {
    content: url("../images/logo-top-white.png");
}

.site-footer .brand-logo img,
.site-footer .brand-logo-img {
    content: url("../images/logo-footer-red-white.png");
}

/* VersaCarve mark + wordmark pairing */
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-header .brand-mark-img {
  display: block;
  width: auto;
  height: 28px;
  object-fit: contain;
}
.site-header .brand-word {
  color: #ffffff !important;
}
.site-footer .brand-footer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-footer .footer-brand-mark-img {
  display: block;
  width: auto;
  height: 34px;
  object-fit: contain;
}
.site-footer .footer-brand-word {
  color: #9E1A32;
  font-family: inherit;
  font-weight: 600;
}
@media (max-width: 620px) {
  .site-header .brand-mark-img { height: 25px; }
  .site-footer .footer-brand-mark-img { height: 30px; }
}


/* V4.6 — Official horizontal VersaCarve logo lockups */
.horizontal-brand-logo {
  display: block;
  width: auto;
  height: 44px;
  object-fit: contain;
}

.brand-header-logo,
.brand-footer {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.brand-header-logo .horizontal-brand-logo,
.brand-footer .horizontal-brand-logo {
  height: 44px;
}

@media (max-width: 700px) {
  .brand-header-logo .horizontal-brand-logo,
  .brand-footer .horizontal-brand-logo {
    height: 38px;
  }
}


/* ==========================================================================
   V4.8 — Home function showcase
   Large media panel with title-driven interaction.
   ========================================================================== */

.action-showcase {
  display: grid;
  grid-template-columns: minmax(330px, .75fr) minmax(0, 1.45fr);
  gap: 0;
  margin-top: 54px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(158,26,50,.12);
  border-radius: 28px;
}

.action-showcase-menu {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border-right: 1px solid var(--line);
}

.action-showcase-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: start;
  width: 100%;
  min-height: 116px;
  padding: 26px 24px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease);
}

.action-showcase-item:last-child {
  border-bottom: 0;
}

.action-showcase-item:hover,
.action-showcase-item.is-active {
  background: #f5f1ed;
}

.action-showcase-item .action-index {
  padding-top: 4px;
  color: var(--brand);
  font-size: .68rem;
  font-weight: 700;
}

.action-showcase-text {
  display: block;
  min-width: 0;
}

.action-showcase-text strong {
  display: block;
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(1.5rem, 2vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
}

.action-showcase-desc {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
  opacity: 0;
  transition:
    grid-template-rows .28s var(--ease),
    margin-top .28s var(--ease),
    opacity .22s var(--ease);
}

.action-showcase-desc::before {
  content: "";
  min-height: 0;
}

.action-showcase-item.is-active .action-showcase-desc {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
}

.action-showcase-item.is-active .action-showcase-desc::before {
  content: none;
}

.action-showcase-arrow {
  align-self: center;
  justify-self: end;
  color: var(--brand);
  font-size: 1.1rem;
  opacity: .45;
  transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.action-showcase-item:hover .action-showcase-arrow,
.action-showcase-item.is-active .action-showcase-arrow {
  opacity: 1;
  transform: translateX(0);
}

.action-showcase-stage {
  position: relative;
  min-height: 620px;
  background: #ebe7e2;
}

.action-showcase-visual {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(.995);
  transition: opacity .32s var(--ease), transform .42s var(--ease);
}

.action-showcase-visual.is-active {
  opacity: 1;
  transform: scale(1);
}

.action-showcase-visual[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.action-showcase-visual.is-active[hidden] {
  visibility: visible;
}

.action-showcase-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.action-showcase-visual .action-badge {
  position: absolute;
  left: 24px;
  top: 24px;
}

@media (max-width: 980px) {
  .action-showcase {
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  }

  .action-showcase-stage {
    min-height: 540px;
  }

  .action-showcase-item {
    min-height: 104px;
    padding: 22px 20px;
  }
}

@media (max-width: 760px) {
  .action-showcase {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
  }

  .action-showcase-menu {
    order: 2;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .action-showcase-stage {
    order: 1;
    min-height: 420px;
  }

  .action-showcase-item {
    min-height: auto;
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    padding: 19px 18px;
  }

  .action-showcase-text strong {
    font-size: 1.45rem;
  }

  .action-showcase-desc {
    font-size: .84rem;
  }
}

@media (max-width: 520px) {
  .action-showcase-stage {
    min-height: 330px;
  }
}


/* ==========================================================================
   V4.9 — Full-width home function showcase
   Keep heading copy aligned to the page grid, but let the interactive
   image/text showcase use the full browser width like the Tool Clutter section.
   ========================================================================== */

.action-strip-full {
  padding-bottom: 0;
  overflow: hidden;
}

.action-strip-full > .container {
  padding-bottom: 52px;
}

.action-showcase-fullwidth {
  width: 100%;
  margin: 0;
}

.action-showcase-fullwidth .action-showcase {
  display: grid;
  grid-template-columns: minmax(360px, 34vw) minmax(0, 1fr);
  width: 100%;
  max-width: none;
  min-height: 720px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}

.action-showcase-fullwidth .action-showcase-menu {
  min-height: 720px;
  border-right: 1px solid var(--line);
}

.action-showcase-fullwidth .action-showcase-item {
  flex: 1 1 25%;
  min-height: 0;
  padding: 30px clamp(28px, 3vw, 54px);
}

.action-showcase-fullwidth .action-showcase-stage {
  min-height: 720px;
}

.action-showcase-fullwidth .action-showcase-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1400px) {
  .action-showcase-fullwidth .action-showcase {
    grid-template-columns: minmax(420px, 32vw) minmax(0, 1fr);
    min-height: 760px;
  }

  .action-showcase-fullwidth .action-showcase-menu,
  .action-showcase-fullwidth .action-showcase-stage {
    min-height: 760px;
  }
}

@media (max-width: 980px) {
  .action-showcase-fullwidth .action-showcase {
    grid-template-columns: minmax(310px, 40vw) minmax(0, 1fr);
    min-height: 620px;
  }

  .action-showcase-fullwidth .action-showcase-menu,
  .action-showcase-fullwidth .action-showcase-stage {
    min-height: 620px;
  }
}

@media (max-width: 760px) {
  .action-strip-full > .container {
    padding-bottom: 34px;
  }

  .action-showcase-fullwidth .action-showcase {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .action-showcase-fullwidth .action-showcase-stage {
    order: 1;
    min-height: 58vh;
  }

  .action-showcase-fullwidth .action-showcase-menu {
    order: 2;
    min-height: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .action-showcase-fullwidth .action-showcase-item {
    flex: 0 0 auto;
    padding: 21px 20px;
  }
}

@media (max-width: 520px) {
  .action-showcase-fullwidth .action-showcase-stage {
    min-height: 420px;
  }
}


/* ==========================================================================
   V4.10 — Blend function showcase into the heading section
   Same background throughout, with a soft fade into the media rather than
   a hard visual seam.
   ========================================================================== */

.action-strip-full {
  --action-bg: #ebe7e2;
  background: var(--action-bg);
}

.action-strip-full > .container {
  background: var(--action-bg);
}

.action-showcase-fullwidth,
.action-showcase-fullwidth .action-showcase,
.action-showcase-fullwidth .action-showcase-menu {
  background: var(--action-bg);
}

.action-showcase-fullwidth .action-showcase-menu {
  border-right: 0;
}

.action-showcase-fullwidth .action-showcase-item {
  background: transparent;
  border-bottom-color: rgba(32, 32, 32, .10);
}

.action-showcase-fullwidth .action-showcase-item:hover,
.action-showcase-fullwidth .action-showcase-item.is-active {
  background: rgba(255, 255, 255, .18);
}

.action-showcase-fullwidth .action-showcase-stage {
  position: relative;
  background: var(--action-bg);
  overflow: hidden;
}

/* Softly dissolve the text-side background into the image. */
.action-showcase-fullwidth .action-showcase-stage::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0 auto 0 0;
  width: clamp(110px, 11vw, 220px);
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--action-bg) 0%,
    rgba(235, 231, 226, .92) 18%,
    rgba(235, 231, 226, .55) 48%,
    rgba(235, 231, 226, .16) 76%,
    rgba(235, 231, 226, 0) 100%
  );
}

.action-showcase-fullwidth .action-showcase-visual {
  border: 0;
}

/* Keep the active text treatment subtle so it still reads as one section. */
.action-showcase-fullwidth .action-showcase-item.is-active .action-showcase-arrow,
.action-showcase-fullwidth .action-showcase-item:hover .action-showcase-arrow {
  opacity: 1;
}

@media (max-width: 760px) {
  .action-showcase-fullwidth .action-showcase-menu {
    border-top: 0;
  }

  .action-showcase-fullwidth .action-showcase-stage::before {
    width: 100%;
    height: 90px;
    inset: auto 0 0 0;
    background: linear-gradient(
      to bottom,
      rgba(235, 231, 226, 0) 0%,
      rgba(235, 231, 226, .30) 45%,
      var(--action-bg) 100%
    );
  }
}


/* ==========================================================================
   V4.11 — Rebalance the full-width home showcase
   Heading copy uses the same left width as the selector column.
   Media begins at the same vertical position and fills the full showcase height.
   Active function rows use VersaCarve burgundy with white text.
   ========================================================================== */

.action-strip-full {
  --action-left: clamp(360px, 34vw, 560px);
  --action-bg: #ebe7e2;
  background: var(--action-bg);
}

/* Make the heading occupy only the same left-side width as the function list. */
.action-strip-full .action-heading-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.action-strip-full .section-heading {
  width: var(--action-left);
  max-width: none;
  margin: 0;
  padding: 68px clamp(32px, 4vw, 72px) 42px;
}

.action-strip-full .section-heading h2 {
  font-size: clamp(3rem, 5.2vw, 5.8rem);
  line-height: .94;
}

.action-strip-full .section-heading > p:last-child {
  max-width: 34rem;
}

/* Remove the separate heading block height so media can start at the top of showcase. */
.action-strip-full > .container {
  padding-bottom: 0;
}

.action-showcase-fullwidth {
  position: relative;
  margin-top: 0;
}

/* Extend the visual treatment upward behind the heading area. */
.action-showcase-fullwidth::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(-1 * clamp(260px, 20vw, 360px));
  right: 0;
  width: calc(100% - var(--action-left));
  height: clamp(260px, 20vw, 360px);
  background: var(--action-bg);
  pointer-events: none;
}

.action-showcase-fullwidth .action-showcase {
  position: relative;
  z-index: 1;
  grid-template-columns: var(--action-left) minmax(0, 1fr);
  min-height: 660px;
}

/* Selector rows: slightly more compact so the media remains well proportioned. */
.action-showcase-fullwidth .action-showcase-menu {
  min-height: 660px;
}

.action-showcase-fullwidth .action-showcase-item {
  flex: 1 1 25%;
  min-height: 0;
  padding: 22px clamp(28px, 3vw, 54px);
}

.action-showcase-fullwidth .action-showcase-text strong {
  font-size: clamp(1.55rem, 1.9vw, 2.05rem);
  line-height: 1.02;
}

.action-showcase-fullwidth .action-showcase-desc {
  font-size: .86rem;
  line-height: 1.45;
}

/* Strong active state */
.action-showcase-fullwidth .action-showcase-item:hover,
.action-showcase-fullwidth .action-showcase-item.is-active {
  color: #fff;
  background: var(--brand);
}

.action-showcase-fullwidth .action-showcase-item:hover .action-index,
.action-showcase-fullwidth .action-showcase-item.is-active .action-index,
.action-showcase-fullwidth .action-showcase-item:hover .action-showcase-desc,
.action-showcase-fullwidth .action-showcase-item.is-active .action-showcase-desc,
.action-showcase-fullwidth .action-showcase-item:hover .action-showcase-arrow,
.action-showcase-fullwidth .action-showcase-item.is-active .action-showcase-arrow {
  color: #fff;
}

.action-showcase-fullwidth .action-showcase-item:hover .action-showcase-desc,
.action-showcase-fullwidth .action-showcase-item.is-active .action-showcase-desc {
  opacity: .92;
}

/* Media fills the complete showcase height. */
.action-showcase-fullwidth .action-showcase-stage {
  min-height: 660px;
}

.action-showcase-fullwidth .action-showcase-visual,
.action-showcase-fullwidth .action-showcase-visual img {
  height: 100%;
}

/* Fade starts from the very top of the image area. */
.action-showcase-fullwidth .action-showcase-stage::before {
  inset: 0 auto 0 0;
  width: clamp(140px, 13vw, 260px);
  background: linear-gradient(
    to right,
    var(--action-bg) 0%,
    rgba(235, 231, 226, .94) 14%,
    rgba(235, 231, 226, .68) 38%,
    rgba(235, 231, 226, .28) 68%,
    rgba(235, 231, 226, 0) 100%
  );
}

/* Large screens */
@media (min-width: 1400px) {
  .action-strip-full {
    --action-left: clamp(430px, 32vw, 590px);
  }

  .action-showcase-fullwidth .action-showcase,
  .action-showcase-fullwidth .action-showcase-menu,
  .action-showcase-fullwidth .action-showcase-stage {
    min-height: 700px;
  }
}

/* Tablet */
@media (max-width: 980px) {
  .action-strip-full {
    --action-left: clamp(320px, 40vw, 430px);
  }

  .action-strip-full .section-heading {
    padding: 54px 28px 34px;
  }

  .action-strip-full .section-heading h2 {
    font-size: clamp(2.7rem, 6.5vw, 4.3rem);
  }

  .action-showcase-fullwidth .action-showcase,
  .action-showcase-fullwidth .action-showcase-menu,
  .action-showcase-fullwidth .action-showcase-stage {
    min-height: 600px;
  }
}

/* Mobile remains stacked, with burgundy active rows. */
@media (max-width: 760px) {
  .action-strip-full .section-heading {
    width: 100%;
    padding: 42px 20px 28px;
  }

  .action-showcase-fullwidth::before {
    display: none;
  }

  .action-showcase-fullwidth .action-showcase {
    min-height: 0;
  }

  .action-showcase-fullwidth .action-showcase-stage {
    min-height: 54vh;
  }

  .action-showcase-fullwidth .action-showcase-item {
    padding: 18px 20px;
  }

  .action-showcase-fullwidth .action-showcase-text strong {
    font-size: 1.45rem;
  }
}

/* V4.12: true top-aligned showcase */
.action-strip-full{--action-left:clamp(390px,34vw,555px);padding-top:0}
.action-strip-full .action-heading-wrap,.action-showcase-fullwidth::before{display:none}
.action-showcase-fullwidth .action-showcase{align-items:stretch;min-height:760px}
.action-showcase-fullwidth .action-showcase-menu{display:flex;flex-direction:column;min-height:760px;background:var(--action-bg)}
.action-showcase-fullwidth .action-showcase-menu .section-heading{flex:0 0 auto;width:100%;margin:0;padding:58px clamp(30px,3.2vw,54px) 38px}
.action-showcase-fullwidth .action-showcase-menu .section-heading h2{max-width:470px;margin-bottom:24px;font-size:clamp(2.75rem,3.65vw,4.35rem);line-height:.98;letter-spacing:-.045em}
.action-showcase-fullwidth .action-showcase-menu .section-heading>p:last-child{max-width:430px;font-size:.96rem;line-height:1.55}
.action-showcase-fullwidth .action-showcase-item{flex:1 1 0;min-height:112px;padding:20px clamp(30px,3.2vw,54px)}
.action-showcase-fullwidth .action-showcase-text strong{font-size:clamp(1.35rem,1.55vw,1.72rem);line-height:1.08}
.action-showcase-fullwidth .action-showcase-desc{margin-top:8px;font-size:.82rem;line-height:1.42}
.action-showcase-fullwidth .action-showcase-stage{min-height:760px;height:auto}
.action-showcase-fullwidth .action-showcase-visual,.action-showcase-fullwidth .action-showcase-visual img{height:100%;min-height:760px}
.action-showcase-fullwidth .action-showcase-stage::before{top:0;bottom:0;height:100%;width:clamp(150px,13vw,250px)}
@media(min-width:1500px){
.action-strip-full{--action-left:clamp(440px,32vw,590px)}
.action-showcase-fullwidth .action-showcase,.action-showcase-fullwidth .action-showcase-menu,.action-showcase-fullwidth .action-showcase-stage,.action-showcase-fullwidth .action-showcase-visual,.action-showcase-fullwidth .action-showcase-visual img{min-height:800px}}
@media(max-width:980px){
.action-strip-full{--action-left:clamp(330px,40vw,430px)}
.action-showcase-fullwidth .action-showcase-menu .section-heading{padding:42px 26px 30px}
.action-showcase-fullwidth .action-showcase-menu .section-heading h2{font-size:clamp(2.35rem,5vw,3.4rem)}
.action-showcase-fullwidth .action-showcase,.action-showcase-fullwidth .action-showcase-menu,.action-showcase-fullwidth .action-showcase-stage,.action-showcase-fullwidth .action-showcase-visual,.action-showcase-fullwidth .action-showcase-visual img{min-height:680px}}
@media(max-width:760px){
.action-showcase-fullwidth .action-showcase-menu .section-heading{padding:40px 20px 28px}
.action-showcase-fullwidth .action-showcase-menu .section-heading h2{font-size:clamp(2.45rem,12vw,3.6rem)}
.action-showcase-fullwidth .action-showcase,.action-showcase-fullwidth .action-showcase-menu{min-height:0}
.action-showcase-fullwidth .action-showcase-stage,.action-showcase-fullwidth .action-showcase-visual,.action-showcase-fullwidth .action-showcase-visual img{min-height:52vh}}


/* V4.13 — Five showcase items */
.action-showcase-fullwidth .action-showcase-item {
  flex: 1 1 0;
  min-height: 96px;
  padding-top: 17px;
  padding-bottom: 17px;
}

.action-showcase-fullwidth .action-showcase-text strong {
  font-size: clamp(1.28rem, 1.45vw, 1.62rem);
}

.action-showcase-fullwidth .action-showcase-desc {
  font-size: .8rem;
  line-height: 1.4;
}


/* V4.14 — Action showcase video */
.action-showcase-video {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  background: #000;
}


/* ==========================================================================
   V4.17 — Homepage section reorder + rebuilt "A workshop that fits your space"
   ========================================================================== */

/* The removed maker-band is no longer present in the homepage markup. */

/* Rebuilt intro as a contained rounded card using the former maker-panel grey. */
.intro-card-section {
  padding: clamp(34px, 4vw, 56px) 0;
  background: var(--canvas);
}

.intro-card {
  margin: 0 clamp(18px, 2.4vw, 34px);
  padding: clamp(42px, 6vw, 82px);
  color: #fff;
  background: #252525;
  border-radius: clamp(24px, 3vw, 42px);
  overflow: hidden;
}

.intro-card-grid {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: clamp(35px, 7vw, 100px);
  align-items: start;
}

.intro-card .section-kicker {
  color: #d7b2ba;
}

.intro-card h2 {
  max-width: 900px;
  color: #fff;
}

.intro-card-grid > div > p {
  max-width: 690px;
  margin-top: 28px;
  color: rgba(255,255,255,.68);
  font-size: 1.05rem;
}

/* New requested sequence:
   Hero -> Intro card -> Action showcase -> Kickstarter proof -> System -> CTA */
.action-strip-full {
  margin-top: 0;
}

.community-proof {
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(34px, 4vw, 56px);
  background: var(--canvas);
}

.feature-story {
  padding-top: clamp(58px, 7vw, 96px);
  padding-bottom: clamp(58px, 7vw, 96px);
}

/* Remove old spacing assumptions that expected maker-band before proof-card. */
.community-proof + .feature-story {
  margin-top: 0;
}

.final-cta {
  margin-top: 0;
}

@media (max-width: 860px) {
  .intro-card-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .intro-card {
    padding: 38px 28px;
  }
}

@media (max-width: 620px) {
  .intro-card-section {
    padding: 24px 0;
  }

  .intro-card {
    margin-left: 8px;
    margin-right: 8px;
    padding: 32px 22px;
    border-radius: 22px;
  }

  .intro-card-grid > div > p {
    margin-top: 18px;
    font-size: .96rem;
  }

  .community-proof {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}


/* ==========================================================================
   V4.18 — Unified page background + intro-card media
   ========================================================================== */

:root {
  --page-flow-bg: #ebe7e2;
}

/* Keep the homepage flow visually continuous. */
body,
main,
.intro,
.action-strip,
.action-strip-full,
.community-proof,
.feature-story,
.product-preview,
.shop-list-main {
  background: var(--page-flow-bg) !important;
}

/* White cards/surfaces that visually interrupt the homepage flow are unified. */
.proof-card,
.feature-visual,
.action-showcase-fullwidth,
.action-showcase-fullwidth .action-showcase,
.action-showcase-fullwidth .action-showcase-menu {
  background: var(--page-flow-bg) !important;
}

/* Rebuilt intro card with full-height right-edge video. */
.intro-card-with-video {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 34%);
  min-height: 420px;
  padding: 0;
  overflow: hidden;
  background: #252525;
}

.intro-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: clamp(42px, 6vw, 82px);
}

.intro-card-grid {
  width: 100%;
}

.intro-card-media {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
}

.intro-card-media video {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  object-fit: cover;
}

/* Rounded, feathered blend from the dark card into the video. */
.intro-card-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 -1px;
  width: clamp(130px, 12vw, 220px);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at left center,
      rgba(37,37,37,1) 0%,
      rgba(37,37,37,.98) 18%,
      rgba(37,37,37,.84) 40%,
      rgba(37,37,37,.48) 62%,
      rgba(37,37,37,.12) 82%,
      rgba(37,37,37,0) 100%
    );
}

/* Ensure video truly reaches the right edge and full card height. */
.intro-card-media,
.intro-card-media video {
  border-radius: 0;
}

@media (max-width: 980px) {
  .intro-card-with-video {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 38%);
    min-height: 380px;
  }

  .intro-card-media video {
    min-height: 380px;
  }
}

@media (max-width: 760px) {
  .intro-card-with-video {
    display: flex;
    flex-direction: column;
  }

  .intro-card-content {
    padding: 34px 24px 28px;
  }

  .intro-card-media {
    min-height: 260px;
  }

  .intro-card-media video {
    min-height: 260px;
  }

  .intro-card-media::before {
    inset: -1px 0 auto 0;
    width: 100%;
    height: 110px;
    background:
      linear-gradient(
        to bottom,
        #252525 0%,
        rgba(37,37,37,.96) 22%,
        rgba(37,37,37,.68) 52%,
        rgba(37,37,37,.20) 80%,
        rgba(37,37,37,0) 100%
      );
  }
}


/* ==========================================================================
   V4.19 — Fix intro video blend + restore Designed as a System image
   ========================================================================== */

/* Remove the old overlay that could leave a visible vertical seam. */
.intro-card-media::before {
  display: none !important;
}

/* Fade the video itself into the dark card.
   This avoids a separate overlay edge and keeps the right edge/full height intact. */
.intro-card-media {
  background: #252525;
}

.intro-card-media video {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.18) 10%,
    rgba(0,0,0,.48) 24%,
    rgba(0,0,0,.78) 38%,
    #000 56%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.18) 10%,
    rgba(0,0,0,.48) 24%,
    rgba(0,0,0,.78) 38%,
    #000 56%,
    #000 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Restore the Designed as a System background image that was unintentionally
   overwritten by the unified #ebe7e2 background rule. */
.feature-story {
  background:
    linear-gradient(
      90deg,
      rgba(235,231,226,0) 0%,
      rgba(235,231,226,.05) 32%,
      rgba(235,231,226,.68) 52%,
      rgba(235,231,226,1) 68%
    ),
    url("../images/workspace-feature-bg.png") !important;
  background-size: cover !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
}

/* Keep the intentionally hidden placeholder column hidden so the section
   continues to use the full-width background image treatment. */
.feature-story .feature-visual {
  visibility: hidden;
}

@media (max-width: 760px) {
  .intro-card-media video {
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.28) 18%,
      rgba(0,0,0,.72) 36%,
      #000 55%,
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.28) 18%,
      rgba(0,0,0,.72) 36%,
      #000 55%,
      #000 100%
    );
  }
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-page{background:var(--paper)}
.about-page .site-header:not(.is-scrolled) .nav-link{color:rgba(255,255,255,.86)}
.about-page .site-header:not(.is-scrolled) .cart-link{color:#fff;border-color:rgba(255,255,255,.34)}
.about-page .site-header:not(.is-scrolled) .nav-toggle{color:#fff;border-color:rgba(255,255,255,.34)}
.about-hero{position:relative;min-height:clamp(620px,78svh,900px);display:flex;align-items:flex-end;overflow:hidden;background:var(--paper)}
.about-hero-image{position:absolute;inset:0 0 0;background:url("../images/about-versacarve-project.jpg") center 42%/cover no-repeat}
.about-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,12,.08) 0%,rgba(12,12,12,.03) 42%,rgba(247,245,242,.08) 66%,var(--paper) 100%)}
.about-hero-copy{position:relative;z-index:2;padding-bottom:clamp(70px,9vw,125px)}
.about-hero-copy .section-kicker{margin-bottom:18px;color:var(--brand)}
.about-hero-copy h1{max-width:900px;color:#fff;font-size:clamp(3.7rem,7vw,7.1rem);text-shadow:0 3px 28px rgba(0,0,0,.22)}
.about-hero-copy h1 span{color:#fff}
.about-story{margin-top:-1px;padding:clamp(30px,4vw,58px) 0 clamp(100px,12vw,170px);background:var(--paper)}
.about-story-inner{width:min(calc(100% - 40px),860px);margin-inline:auto}
.about-story-inner p{margin-top:30px;color:#555;font-size:clamp(1.04rem,1.3vw,1.18rem);line-height:1.85}
.about-story-inner .about-lead{margin-top:0;color:var(--ink);font-family:"Red Hat Display",sans-serif;font-size:clamp(1.65rem,2.6vw,2.5rem);font-weight:500;line-height:1.35;letter-spacing:-.025em}
.about-story-inner .about-emphasis{margin:clamp(48px,6vw,72px) 0;color:var(--brand);font-family:"Red Hat Display",sans-serif;font-size:clamp(2rem,3.6vw,3.7rem);font-weight:600;line-height:1.08;letter-spacing:-.04em}
.about-story-inner .about-closing{margin-top:clamp(55px,7vw,88px);color:var(--ink);font-family:"Red Hat Display",sans-serif;font-size:clamp(2.4rem,5vw,5.3rem);line-height:1.05;letter-spacing:-.045em}
.about-story-inner .about-closing strong{color:var(--brand);font-weight:600}
@media(max-width:860px){.about-page .site-header:not(.is-scrolled) .primary-nav{background:rgba(255,255,255,.97)}.about-page .site-header:not(.is-scrolled) .primary-nav .nav-link{color:var(--ink-soft)}.about-hero{min-height:70svh}.about-hero-image{background-position:55% 42%}}
@media(max-width:620px){.about-hero{min-height:640px}.about-hero-image{background-position:58% center}.about-hero-shade{background:linear-gradient(180deg,rgba(12,12,12,.12),rgba(12,12,12,.04) 44%,rgba(247,245,242,.16) 68%,var(--paper) 100%)}.about-hero-copy{padding-bottom:70px}.about-story-inner{width:min(calc(100% - 32px),860px)}}