@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --terracotta:#c1673f;
  --clay:#a9542f;
  --sand:#d8c4a0;
  --cream:#f6efe1;
  --forest:#4a5a3a;
  --navy:#26323f;
  --chalk:#f7f4ec;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Inter', sans-serif;
}

img { max-width: 100%; display: block; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.eyebrow {
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--clay); margin-bottom: 8px; font-weight: 600;
}

.section-title {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
  font-size: 24px; margin: 0 0 14px; color: var(--navy);
}

.body-text { font-size: 14px; line-height: 1.6; margin: 0 0 22px; }

.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; margin-top: 4px; }

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--sand);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 20px 14px;
}
.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sand);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.icon-link {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-link svg {
  width: 18px;
  height: 18px;
  color: var(--cream);
}

.stage { position: relative; display: inline-block; }

.btn-base {
  position: relative;
  z-index: 1;
  display: inline-block;
  border-radius: 24px;
  background: var(--terracotta);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 14px 30px;
  box-shadow: 0 3px 0 var(--clay);
  transition: box-shadow .15s ease, transform .15s ease;
  overflow: visible;
  font-family: 'Inter', sans-serif;
}
.btn-base:hover, .btn-base.js-preview { transform: translateY(1px); box-shadow: 0 2px 0 var(--clay); }
.btn-base:active, .btn-base.js-preview-active { transform: translateY(2px); box-shadow: 0 1px 0 var(--clay); }
.btn-small { padding: 8px 18px; font-size: 12px; }

.crimpWrap { position:absolute;z-index:0;left:50%;top:0;transform:translateX(-50%);width:80px;height:40px;pointer-events:none; }
.finger { position:absolute;top:0;width:15px;height:46px;border-radius:7px 7px 5px 5px;background:var(--sand);opacity:0;
  transform-origin:bottom center;transition:left .22s ease, transform .3s cubic-bezier(.3,1.3,.4,1), opacity .2s ease; }
.finger::after { content:'';position:absolute;left:50%;bottom:7px;width:5px;height:5px;border-radius:50%;background:var(--clay);
  transform:translateX(-50%);opacity:0;transition:opacity .18s ease; }

.finger:nth-child(1){left:0px;  transform:translateY(6px) rotate(-5deg);}
.finger:nth-child(2){left:14px; transform:translateY(6px) rotate(-1deg);}
.finger:nth-child(3){left:28px; transform:translateY(6px) rotate(1deg);}
.finger:nth-child(4){left:42px; transform:translateY(6px) rotate(5deg);}

/* .js-preview / .js-preview-active companion classes let JS simulate the same
   :hover / :active look programmatically (used to auto-preview the hero
   button 3s after page load, since a real click navigates away before the
   :active + puff animation has time to finish playing). Keep every rule
   below in sync if the hover/active visuals ever change. */
.btn-crimp:hover ~ .crimpWrap .finger, .btn-crimp.js-preview ~ .crimpWrap .finger { opacity: 1; }
.btn-crimp:hover ~ .crimpWrap .finger:nth-child(1), .btn-crimp.js-preview ~ .crimpWrap .finger:nth-child(1){transform:translateY(-18px) rotate(-5deg);}
.btn-crimp:hover ~ .crimpWrap .finger:nth-child(2), .btn-crimp.js-preview ~ .crimpWrap .finger:nth-child(2){transform:translateY(-18px) rotate(-1deg);}
.btn-crimp:hover ~ .crimpWrap .finger:nth-child(3), .btn-crimp.js-preview ~ .crimpWrap .finger:nth-child(3){transform:translateY(-18px) rotate(1deg);}
.btn-crimp:hover ~ .crimpWrap .finger:nth-child(4), .btn-crimp.js-preview ~ .crimpWrap .finger:nth-child(4){transform:translateY(-18px) rotate(5deg);}

.btn-crimp:active ~ .crimpWrap .finger, .btn-crimp.js-preview-active ~ .crimpWrap .finger { transition-duration: .1s; }
.btn-crimp:active ~ .crimpWrap .finger:nth-child(1), .btn-crimp.js-preview-active ~ .crimpWrap .finger:nth-child(1){left:0px;  transform:translateY(-14px) rotate(0deg) scaleY(.92);}
.btn-crimp:active ~ .crimpWrap .finger:nth-child(2), .btn-crimp.js-preview-active ~ .crimpWrap .finger:nth-child(2){left:15px; transform:translateY(-14px) rotate(0deg) scaleY(.92);}
.btn-crimp:active ~ .crimpWrap .finger:nth-child(3), .btn-crimp.js-preview-active ~ .crimpWrap .finger:nth-child(3){left:30px; transform:translateY(-14px) rotate(0deg) scaleY(.92);}
.btn-crimp:active ~ .crimpWrap .finger:nth-child(4), .btn-crimp.js-preview-active ~ .crimpWrap .finger:nth-child(4){left:45px; transform:translateY(-14px) rotate(0deg) scaleY(.92);}
.btn-crimp:active ~ .crimpWrap .finger::after, .btn-crimp.js-preview-active ~ .crimpWrap .finger::after { opacity: .7; }

.thumb { position:absolute;top:0;left:62px;width:16px;height:22px;border-radius:7px 8px 6px 6px;background:var(--sand);opacity:0;
  transform-origin:bottom center;transition:left .22s ease, transform .3s cubic-bezier(.3,1.3,.4,1), opacity .2s ease;
  transform:translateY(6px) rotate(10deg); }
.thumb::after { content:'';position:absolute;left:50%;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--clay);
  transform:translateX(-50%);opacity:0;transition:opacity .18s ease; }

.btn-crimp:hover ~ .crimpWrap .thumb, .btn-crimp.js-preview ~ .crimpWrap .thumb { opacity:1;transform:translateY(-12px) rotate(14deg); }
.btn-crimp:active ~ .crimpWrap .thumb, .btn-crimp.js-preview-active ~ .crimpWrap .thumb { left:54px;transform:translateY(-9px) rotate(-16deg) scaleY(.9);transition-duration:.1s; }
.btn-crimp:active ~ .crimpWrap .thumb::after, .btn-crimp.js-preview-active ~ .crimpWrap .thumb::after { opacity: .7; }

.tipWrap { position:absolute;left:50%;top:0;transform:translateX(-50%);width:80px;height:22px;pointer-events:none; }
.fingertip { position:absolute;top:0;width:16px;height:18px;border-radius:50%;background:var(--sand);opacity:0;
  transform-origin:top center;transition:opacity .15s ease, transform .18s cubic-bezier(.3,1.3,.4,1);transform:translateY(-12px) scale(.6); }
.fingertip::after{content:'';position:absolute;left:50%;top:4px;width:6px;height:7px;border-radius:50%;
  background:var(--cream);transform:translateX(-50%);opacity:.95;}
.fingertip:nth-child(1){left:-1px;} .fingertip:nth-child(2){left:14px;} .fingertip:nth-child(3){left:29px;} .fingertip:nth-child(4){left:44px;}
.btn-crimp:active .fingertip, .btn-crimp.js-preview-active .fingertip { opacity: 1; transform: translateY(-4px) scale(1); }

.thumbtip { position:absolute;top:0;left:54px;width:16px;height:16px;border-radius:50%;background:var(--sand);opacity:0;
  transform-origin:top center;transition:opacity .15s ease, transform .18s cubic-bezier(.3,1.3,.4,1);transform:translateY(-10px) rotate(14deg) scale(.6); }
.thumbtip::after{content:'';position:absolute;left:55%;top:3px;width:7px;height:8px;border-radius:50%;
  background:var(--cream);transform:translateX(-50%) rotate(-16deg);opacity:.95;}
.btn-crimp:active .thumbtip, .btn-crimp.js-preview-active .thumbtip { opacity: 1; transform: translateY(-3px) rotate(-16deg) scale(1); }

.puffWrap { position:absolute;z-index:2;left:50%;top:2px;transform:translateX(-50%);width:120px;height:50px;pointer-events:none; }
.puff { position:absolute;border-radius:50%;background:var(--chalk);opacity:0; }
.puff:nth-child(1){left:8px; top:20px; width:5px;height:5px;}
.puff:nth-child(2){left:20px;top:9px;  width:6px;height:6px;}
.puff:nth-child(3){left:32px;top:24px; width:4px;height:4px;}
.puff:nth-child(4){left:88px;top:24px; width:4px;height:4px;}
.puff:nth-child(5){left:100px;top:9px;  width:6px;height:6px;}
.puff:nth-child(6){left:112px;top:20px;width:5px;height:5px;}

@keyframes puffL1{0%{opacity:0;transform:translate(0,0) scale(.5);}20%{opacity:.9;}100%{opacity:0;transform:translate(-16px,-22px) scale(1.2);}}
@keyframes puffL2{0%{opacity:0;transform:translate(0,0) scale(.5);}20%{opacity:.9;}100%{opacity:0;transform:translate(-8px,-28px) scale(1.1);}}
@keyframes puffL3{0%{opacity:0;transform:translate(0,0) scale(.5);}20%{opacity:.9;}100%{opacity:0;transform:translate(-20px,-8px) scale(1.15);}}
@keyframes puffR1{0%{opacity:0;transform:translate(0,0) scale(.5);}20%{opacity:.9;}100%{opacity:0;transform:translate(20px,-8px) scale(1.15);}}
@keyframes puffR2{0%{opacity:0;transform:translate(0,0) scale(.5);}20%{opacity:.9;}100%{opacity:0;transform:translate(8px,-28px) scale(1.1);}}
@keyframes puffR3{0%{opacity:0;transform:translate(0,0) scale(.5);}20%{opacity:.9;}100%{opacity:0;transform:translate(16px,-22px) scale(1.2);}}

.puffWrap.puffing .puff:nth-child(1){animation:puffL1 .6s ease-out forwards;}
.puffWrap.puffing .puff:nth-child(2){animation:puffL2 .6s ease-out .03s forwards;}
.puffWrap.puffing .puff:nth-child(3){animation:puffL3 .6s ease-out .06s forwards;}
.puffWrap.puffing .puff:nth-child(4){animation:puffR3 .6s ease-out .06s forwards;}
.puffWrap.puffing .puff:nth-child(5){animation:puffR2 .6s ease-out .03s forwards;}
.puffWrap.puffing .puff:nth-child(6){animation:puffR1 .6s ease-out forwards;}

.hero { padding: 56px 0 60px; text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.logo-big {
  width: 130px; height: 130px; border-radius: 50%; object-fit: cover;
  margin: 0 0 22px; border: 4px solid var(--sand);
  box-shadow: 0 6px 16px rgba(38,50,63,.18);
}
.hero-title {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
  font-size: 26px; color: var(--navy); margin: 0 0 6px;
}
.hero-sub {
  font-size: 13px; letter-spacing: .4px; color: var(--clay);
  margin: 0 0 26px; text-transform: uppercase;
}
.about-inner { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.about-photo {
  flex: 1 1 320px; min-height: 280px; border-radius: 8px;
}
.about-copy { flex: 1 1 320px; padding: 34px 32px; }

/* .about-photo has only min-height (280px), and align-items:center on its flex
   parent means it doesn't stretch to the row height, so a height:100% child
   (the carousel's img) can't resolve against it and falls back to the image's
   own intrinsic aspect ratio — with these portrait product photos that produced
   an oversized ~660px-tall box that dwarfed the copy column. Pin an explicit
   height so the carousel crops via object-fit:cover into a balanced box instead.
   540px (raised from an earlier 420px pass, which itself over-cropped these
   mostly-portrait product photos) still sits well under that ~660px "dwarfing"
   territory and close to the ~350-450px natural height of the .about-copy
   text column beside it.
   This must stay ABOVE the @media (max-width:600px) block below: both rules
   share identical specificity (two classes), so the mobile override only wins
   the cascade at narrow widths if it appears later in source order. */
.about-photo.carousel { height: 540px; }

.gallery { padding: 40px 0 60px; }
/* Raised from 220/320px (mobile/desktop) to 290/520px to cut down on vertical
   cropping of the mostly-portrait gallery photos (0.56-0.75 aspect) via
   object-fit:cover. Side effect worth knowing: at the mobile 290px height the
   box's aspect (~1.16) is narrower than the autoplay video's 16:9 (1.78)
   frame, so cover now crops a bit more off the VIDEO's sides on mobile than
   before (it was already side-cropped at 220px, just less so) — an accepted
   tradeoff, the video's main scene stays centered and in frame. At desktop
   (520px) the box's aspect (~2.04) is actually now much closer to the video's
   1.78 than the old 320px box (~3.31) was, so on desktop the video ends up
   LESS cropped than before, not more. */
.gallery-carousel, .gallery-carousel .carousel-slide { height: 290px; }
@media (min-width: 700px) {
  .gallery-carousel, .gallery-carousel .carousel-slide { height: 520px; }
}
.gallery-carousel { border-radius: 8px; background: var(--navy); }

/* landscape-4 and landscape-6 are portrait source photos; on desktop the
   gallery box is still wider than tall (~2.04 aspect at 520px) so cover still
   crops a horizontal band off the top/bottom, and the default center crop
   misses the climber(s) entirely. Values below were picked by measuring the
   climbers' actual vertical position in each photo: landscape-4's climber
   sits ~33-40% down the frame (sunset glow stays in view too), landscape-6
   has one climber near the top (~16-22%) and a second near the bottom
   (~87%) — too far apart to both fit in one crop, so this keeps the
   ascending climber (the one actually mid-route) in frame. Re-checked against
   the taller 520px/290px (desktop/mobile) box: both values still keep their
   climber comfortably in frame, no change needed. */
.carousel-slide img[src*="landscape-4"] { object-position: center 36%; }
.carousel-slide img[src*="landscape-6"] { object-position: center 20%; }

/* landscape-5's climbers sit in the left ~25% of this 16:9 photo. At the
   mobile gallery height (290px) the box is narrower than the photo (aspect
   ~1.16 vs 1.78), so cover crops the sides instead of top/bottom — a center
   crop pushes the left edge in far enough to cut the belayer out of frame.
   Shifting the crop left keeps every climber in frame. Desktop stays a
   top/bottom crop (box wider than the photo) where center is already fine
   vertically, and this X-axis shift has no effect there. */
.carousel-slide img[src*="landscape-5"] { object-position: 10% center; }

/* product-4's bag hangs low in the frame (roughly the bottom 40%, held up
   against a rock overhang that fills the rest) — on the taller About box a
   center crop only catches a sliver of its top edge. Shifting the crop down
   keeps the whole bag (label, chalk window and kraft base) in frame. */
.carousel-slide img[src*="product-4"] { object-position: center 85%; }

.testimonials { padding: 40px 0 60px; }
.testimonials-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px 24px; margin-top: 32px;
}
@media (min-width: 700px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { margin: 0; }
/* aspect-ratio (not a fixed height) so the box scales cleanly at any card
   width across the 1/2/3-column breakpoints above, without needing a
   per-breakpoint height like the other carousels. 2:3 matches most of these
   photos' own portrait aspect (~0.667) closely, so cover crops very little
   off them; the couple of landscape/square outliers crop more on the sides,
   checked via simulation and still framed fine at this ratio. */
.testimonial-photo { aspect-ratio: 2 / 3; border-radius: 8px; background: var(--navy); }
.testimonial-quote {
  margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; font-style: italic; color: var(--navy);
}
.testimonial-quote p { margin: 0 0 6px; }
.testimonial-quote cite { font-size: 12.5px; font-weight: 600; font-style: normal; color: var(--clay); }

.order { padding: 40px 0 60px; max-width: 460px; margin: 0 auto; }
.back-link {
  display: inline-block; margin-bottom: 18px; font-size: 13px; font-weight: 600;
  color: var(--clay); text-decoration: none;
}
.back-link:hover { color: var(--terracotta); }

.order-block { border-top: 1px solid var(--sand); padding-top: 20px; margin-top: 20px; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1 1 0; min-width: 0; }
.field { margin-top: 12px; }
.field:first-child { margin-top: 0; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px;
}
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field textarea, .field select {
  width: 100%; border: 1px solid var(--sand); border-radius: 8px; padding: 10px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--navy); box-sizing: border-box;
}
.field textarea { resize: vertical; }

.radio-option {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--navy);
  margin-top: 10px; cursor: pointer;
}
.radio-option:first-child { margin-top: 0; }
.radio-option:has(input:disabled) { color: var(--sand); cursor: not-allowed; }
.fee-note { color: var(--clay); font-size: 12px; }

.order-qty { margin: 0; }
.qty-stepper { display: flex; align-items: center; gap: 10px; }
.qty-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sand);
  background: var(--cream); color: var(--navy); font-size: 18px; line-height: 1;
  cursor: pointer;
}
.qty-btn:hover { background: var(--sand); }
#qty {
  width: 56px; text-align: center; font-size: 15px; font-weight: 600; color: var(--navy);
  border: 1px solid var(--sand); border-radius: 8px; padding: 8px 4px;
  font-family: 'Inter', sans-serif;
}

.order-total { margin: 20px 0 0; font-size: 15px; font-weight: 600; }
#submit-order { display: block; width: 100%; margin-top: 20px; text-align: center; }
.order-error { color: var(--terracotta); font-size: 12.5px; margin: 10px 0 0; }
.order-confirmation {
  color: var(--forest); font-size: 13.5px; font-weight: 600; margin: 14px 0 0;
  background: var(--cream); border: 1px solid var(--sand); border-radius: 8px; padding: 12px;
}
.order-confirmation a { color: var(--clay); text-decoration: underline; }
.order-confirmation a:hover { color: var(--terracotta); }

.site-footer {
  background: var(--navy); color: var(--cream);
  text-align: center; padding: 24px 0; font-size: 12px;
}
.site-footer p { margin: 0; }

@media (max-width: 600px) {
  /* This used to need >= ~15px top padding to keep the crimp-hand header CTA's
     raised fingers from clipping against the viewport edge (see commit
     44aba79) - that button was later removed, so the constraint no longer
     applies, but the value still reads fine as general breathing room. */
  .header-inner { padding: 26px 16px 10px; }
  .hero { padding: 40px 0 44px; }
  .logo-big { width: 100px; height: 100px; }
  .about-copy { padding: 26px 20px; }
  /* Raised from 260px alongside the desktop 540px bump above — same
     less-cropping rationale, see the comment on the desktop rule. */
  .about-photo.carousel { height: 330px; min-height: 330px; }
}

.lang-toggle {
  font-size: 12px; font-weight: 600; color: var(--navy); text-decoration: none;
  padding: 5px 9px; border: 1px solid var(--sand); border-radius: 6px;
}
.lang-toggle:hover { background: var(--sand); }

.carousel { position: relative; overflow: hidden; }
.carousel-slide { display: none; width: 100%; height: 100%; }
.carousel-slide.is-active { display: block; }
.carousel-slide img, .carousel-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(38,50,63,.55); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 1; padding: 0;
}
.carousel-arrow:hover { background: rgba(38,50,63,.8); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

.carousel-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 1; }
.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; padding: 0; cursor: pointer; }
.carousel-dot.is-active { background: #fff; }

.stockist-links { font-size: 12px; margin-left: 2px; }
.stockist-links a { color: var(--clay); text-decoration: underline; }
.stockist-links a:hover { color: var(--terracotta); }