.p-hero{

  position:relative;overflow:hidden;overflow:clip;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;

  padding:clamp(22px,3.5vh,40px) 6vw clamp(28px,4.5vh,48px);
}

.p-hero--warm{background:radial-gradient(120% 90% at 50% 37%, #f6f3ee 0%, #ece6dc 35%, #ddd6c8 70%)}

.p-hero--warm::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.p-hero .hero--name{position:relative;display:flex;flex-direction:column;align-items:center;margin:0}
.p-hero .hl-name{
  font-family:var(--sans);font-weight:900;letter-spacing:-.04em;line-height:.82;
  font-size:clamp(4rem,17vw,14rem);color:var(--accent);
  position:relative;z-index:1;
}
.p-hero .hl-sub{
  display:block;font-family:var(--sans);font-weight:700;color:var(--ink);
  font-size:clamp(.82rem,1.4vw,1.1rem);letter-spacing:.16em;text-transform:uppercase;
  margin-top:clamp(6px,1vh,12px);
}

.p-hero .hero-media{position:relative;z-index:2;display:block;margin:0 0 clamp(-84px,-5.5vh,-40px)}
.p-hero .hero-media img{
  display:block;margin:0 auto;width:auto;height:auto;max-width:100%;
  max-height:clamp(190px,28vh,330px);
  filter:drop-shadow(0 6px 10px rgba(48,38,22,.18)) drop-shadow(0 26px 40px rgba(48,38,22,.24));
  -webkit-user-select:none;user-select:none;
}

.p-hero .copy{display:flex;flex-direction:column;align-items:center;max-width:60ch;margin-top:clamp(14px,2.4vh,28px)}
.p-hero .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(40px,5vw,76px)}
.p-hero .spec-rows{margin-top:clamp(14px,2vh,22px);display:flex;flex-direction:column;align-items:center;gap:7px}
.p-hero .spec-rows .row{display:flex;gap:.7em;align-items:baseline;flex-wrap:wrap;justify-content:center}

.p-hero--warm .spec-rows .k{color:#8a4e00}
.p-hero--warm .spec-rows .v{color:rgba(20,20,18,.72)}
.p-hero--warm .stat i{color:rgba(20,20,18,.72)}

.p-hero .p-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2.5vh,30px)}
.p-hero .p-actions .cta{margin-top:0;margin-left:0}

.p-hero--elpm .hl-name{font-size:clamp(2rem,8.4vw,6.6rem);letter-spacing:-.03em;white-space:nowrap}

.p-hero--elpm .copy{max-width:none}
.p-hero--elpm .stats{gap:clamp(24px,3.2vw,52px)}
.p-hero--elpm .hero-media{margin:0 0 clamp(-34px,-3vh,-18px)}
.p-hero--elpm .hero-media img{max-height:clamp(160px,27vh,270px)}
.p-hero--elpm .stat b{font-size:clamp(1.4rem,2.5vw,2.1rem)}

@media (max-width:860px){
  .p-hero .hl-name{font-size:clamp(3.4rem,22vw,6rem)}
  .p-hero .hero-media{margin:0 0 clamp(-42px,-3.6vh,-24px)}
  .p-hero .hero-media img{max-height:clamp(150px,24vh,210px)}
  .p-hero--elpm .hl-name{font-size:clamp(1.6rem,7.2vw,2.3rem)}
  .p-hero--elpm .hero-media{margin:0 0 clamp(-12px,-1.2vh,-4px)}
  .p-hero--elpm .hero-media img{max-height:clamp(130px,20vh,180px)}
  .p-hero .stats{gap:36px}
  .p-hero .stat b{font-size:1.9rem}
  .p-hero--elpm .stat b{font-size:clamp(1.3rem,5vw,1.6rem)}
}

@media (min-width:861px) and (max-height:820px){
  .p-hero .hl-name{font-size:clamp(3.6rem,12vw,8rem)}
  .p-hero .hero-media{margin:0 0 clamp(-56px,-5.5vh,-36px)}
  .p-hero .hero-media img{max-height:clamp(150px,28vh,240px)}
}

@media (prefers-reduced-motion:no-preference){

  .p-hero--warm::after{content:'';position:absolute;inset:0;pointer-events:none;background:#141412;opacity:0;animation:ph-dim 1.1s ease-out both}

  .p-hero--warm .hero-media img{animation:ph-drop .9s cubic-bezier(.22,.9,.3,1) both}

  .p-hero--warm .hl-name{animation:ph-rise .9s ease-out .08s both}
  .p-hero--warm .hl-sub{animation:ph-fade .7s ease-out .32s both}
  .p-hero--warm .p-actions{animation:ph-fade .7s ease-out .44s both}
  @supports (animation-timeline: view()){
    .p-hero--warm .hero-media{
      animation:ph-par-lead 1s linear both;
      animation-timeline:view();animation-range:exit 0% exit 100%;
    }
    .p-hero--warm .hl-name{
      animation:ph-rise .9s ease-out .08s both,ph-par-lag 1s linear both;
      animation-timeline:auto,view();
      animation-range:normal,exit 0% exit 100%;
      animation-composition:replace,add;
    }
  }
}
@keyframes ph-dim{from{opacity:.22}to{opacity:0}}
@keyframes ph-drop{
  from{opacity:0;transform:translateY(-14px);filter:drop-shadow(0 2px 4px rgba(48,38,22,0)) drop-shadow(0 8px 16px rgba(48,38,22,0))}
  to{opacity:1;transform:none;filter:drop-shadow(0 6px 10px rgba(48,38,22,.18)) drop-shadow(0 26px 40px rgba(48,38,22,.24))}
}
@keyframes ph-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes ph-fade{from{opacity:0}to{opacity:1}}
@keyframes ph-par-lead{from{transform:translateY(0)}to{transform:translateY(-36px)}}
@keyframes ph-par-lag{from{transform:translateY(0)}to{transform:translateY(60px)}}

.p-head [data-buy]{transition:opacity .25s ease,transform .25s ease}
.p-head.buy-hidden [data-buy]{opacity:0;transform:translateY(-4px);pointer-events:none}
@media (prefers-reduced-motion:reduce){.p-head [data-buy]{transition:none}}

.gal{margin-top:clamp(28px,4vh,46px);
  --gal-edge:calc(max((100vw - 1120px)/2, 0px) + 6vw)}
.gal-track{
  display:flex;gap:clamp(14px,1.8vw,24px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gal-edge);
  padding:4px var(--gal-edge) 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gal-track::-webkit-scrollbar{display:none}
.gal-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.gal-track{cursor:grab}
.gal-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;-webkit-user-select:none}
.gal-card img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

.gal-card{
  flex:0 0 min(84vw,440px);min-width:0;scroll-snap-align:start;
  display:flex;flex-direction:column;
}

.gal-card figure{
  margin:0;aspect-ratio:4/3;background:#f4f1ea;overflow:hidden;
  transition:box-shadow .25s ease;
}

@media (hover:hover){
  .gal-card:hover figure{box-shadow:0 14px 30px rgba(48,38,22,.10)}
}
.gal-card figure img{width:100%;height:100%;object-fit:cover;display:block}

.gal-card--contain figure img{object-fit:contain;padding:9%}

.gal-card--ui figure img{
  width:74%;height:auto;min-height:100%;object-fit:cover;object-position:top;
  display:block;margin:9% auto 0;
  border-radius:10px;border:1px solid var(--ink-12);
  box-shadow:0 6px 14px rgba(48,38,22,.12),0 22px 44px rgba(48,38,22,.22);
}
.gal-body{padding:clamp(14px,1.8vw,20px) 4px 0;display:flex;flex-direction:column;gap:8px}
.gal-body .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}

.gal-demo{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#a15c00;background:rgba(243,156,18,.14);padding:3px 8px;border-radius:999px;vertical-align:middle}
.gal-body h3{font-family:var(--sans);font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.gal-body p{font-size:.95rem;line-height:1.5;color:var(--ink-60)}

.gal-nav{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:14px;padding-inline:var(--gal-edge)}
.gal-nav[hidden]{display:none}

.gal-pro{display:flex;align-items:center;gap:14px;margin-right:auto;min-width:0}
.gal-pro[hidden]{display:none}
.gal-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-60);white-space:nowrap;font-variant-numeric:tabular-nums}
.gal-bar{position:relative;width:min(180px,26vw);height:2px;border-radius:999px;overflow:hidden;background:rgba(20,20,18,.12)}
.gal-bar i{position:absolute;inset:0;width:0;border-radius:999px;background:var(--accent);transition:width .15s linear}
@media (prefers-reduced-motion:reduce){.gal-bar i{transition:none}}
.gal-btn{
  width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,18,.08);color:var(--ink);
  transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.gal-btn:hover{background:var(--accent);color:var(--night)}
.gal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gal-btn[disabled]{opacity:.35;cursor:default;background:rgba(20,20,18,.08);color:var(--ink)}
.gal-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sw{list-style:none;margin:clamp(36px,6vh,64px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(48px,8vh,96px)}
.sw li{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:center}
.sw li:nth-child(even) .sw-shot{order:2}
.sw-shot{display:flex;justify-content:center;min-width:0}
.sw-shot img{
  display:block;width:min(76%,330px);height:auto;max-height:540px;
  object-fit:cover;object-position:top;
  border-radius:12px;border:1px solid var(--ink-12);
  box-shadow:0 10px 22px rgba(48,38,22,.10),0 34px 70px rgba(48,38,22,.16);
}
.sw-copy{min-width:0}
.sw-copy .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:12px}
.sw-copy h3{font-family:var(--sans);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.01em;margin-bottom:10px}
.sw-copy p{font-size:.98rem;line-height:1.55;color:var(--ink-60);max-width:46ch}
@media (max-width:860px){
  .sw{gap:clamp(36px,6vh,56px)}
  .sw li{grid-template-columns:1fr;gap:18px}
  .sw li:nth-child(even) .sw-shot{order:0}
  .sw-shot img{width:min(84%,300px);max-height:440px}
}

.mroad{list-style:none;margin:clamp(32px,5vh,56px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(40px,7vh,84px)}
.mroad li{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:center}
.mroad li:nth-child(even) .m-img{order:2}
.m-img{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#f4f1ea}
.m-img img{width:100%;height:100%;object-fit:cover;display:block}
.m-copy .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:12px}
.m-copy h3{font-family:var(--sans);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.01em;margin-bottom:10px}
.m-copy p{font-size:.98rem;line-height:1.55;color:var(--ink-60);max-width:48ch}
@media (max-width:860px){
  .mroad li{grid-template-columns:1fr;gap:16px}
  .mroad li:nth-child(even) .m-img{order:0}
}

.buy-note{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;line-height:1.55;color:var(--ink-60)}