:root{
  --orange:#C08A3E;
  --black:#201a17;
  --near-black:#2a2320;
  --gray:#6b5e55;
  --line:#e8ddd2;
  --page-bg:#f8f3ec;
  --panel-bg:#fbf8f3;
  --bg:#f8f3ec;
  --white:#fcf9f5;
  --radius:20px;
  --radius-lg:24px;
  --gutter:156px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--page-bg);
  color:var(--near-black);
  line-height:1.4;
  overflow-x:hidden;
}
h1,h2,h3,.footer-logo,.stat-num{
  font-family:'Jost',sans-serif;
  font-weight:400;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}
ul{list-style:none;}
img{display:block;max-width:100%;}
.accent{color:var(--orange);}
.dot-orange{color:var(--orange);}

/* ---------- HERO PANEL ---------- */
.hero{
  position:relative;
  max-width:1920px;
  width:100%;
  margin:0 auto;
  background:var(--panel-bg);
  border-radius:0 0 32px 32px;
  padding:0 0 8px;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.hero-fill{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;}

/* flat header, straight on the hero media (no capsule bg) */
/* grid keeps logo / nav / actions on one shared baseline, and centers the
   nav column on the true page width regardless of how wide the side
   columns are (which absolute + translate(-50%) couldn't guarantee once
   padding made the site-header box taller than the actual content row) */
.site-header{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  width:100%;max-width:1920px;margin:0 auto;
  padding:36px var(--gutter) 0;
  flex:0 0 auto;
  gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;justify-self:start;}
.logo img{height:32px;width:auto;display:block;}
.logo-word{
  font-family:'Jost',sans-serif;font-size:18px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.nav-links{
  justify-self:center;
  display:flex;gap:52px;font-size:13px;font-weight:500;color:#fff;
}
.nav-links a{opacity:.9;transition:opacity .2s ease,color .2s ease;}
.nav-links a:hover{opacity:1;color:var(--orange);}
.header-actions{display:flex;align-items:center;gap:14px;justify-self:end;}
.lang-switch{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.16);color:#fff;font-size:13px;font-weight:500;
  padding:9px 16px;border-radius:50px;border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  white-space:nowrap;
}
.lang-switch svg{width:15px;height:15px;flex-shrink:0;}
.header-cta{
  background:var(--orange);color:#fff;font-size:13px;font-weight:500;
  padding:11px 22px;border-radius:50px;white-space:nowrap;
}
/* the homepage hero sits on a warm orange/video background where a
   matching orange button would disappear — keep it dark there only */
.hero .header-cta{background:rgba(34,26,22,.9);}

/* ---------- MOBILE MENU: hamburger + full-screen overlay, ≤900px only
   (the in-flow nav-links/lang-switch/header-cta hide at that width with
   nothing replacing them until now) ---------- */
.menu-toggle{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:40px;height:40px;flex-shrink:0;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
}
.menu-toggle span{width:16px;height:1.5px;background:#fff;transition:transform .25s ease,opacity .25s ease;}
.menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu-links{display:flex;flex-direction:column;align-items:center;gap:26px;}
.mobile-menu-links a{font-family:'Jost',sans-serif;font-size:30px;color:#fff;}
.mobile-menu-links a:active{color:var(--orange);}
body.menu-open{overflow:hidden;}

.btn-pill{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  background:var(--black);color:#fff;font-size:14px;font-weight:500;
  padding:14px 24px;border-radius:100px;
}
.btn-pill.dark{background:var(--orange);}
.btn-pill .arrow{transition:transform .25s ease;}
.btn-pill:hover .arrow{transform:translateX(4px);}

/* ---------- hero bottom row: location / scroll cue / news teaser ---------- */
.hero-bottom-row{
  position:relative;z-index:1;
  width:100%;max-width:1920px;margin:0 auto;
  padding:0 40px 40px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  flex:0 0 auto;
}
.hero-location{
  display:flex;align-items:center;gap:9px;
  color:#fff;font-size:13px;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.pulse-dot{
  width:8px;height:8px;border-radius:50%;background:#8FAE6B;flex-shrink:0;
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(92,255,110,.55);}
  70%{box-shadow:0 0 0 8px rgba(92,255,110,0);}
  100%{box-shadow:0 0 0 0 rgba(92,255,110,0);}
}

.hero-news-card{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.32);color:#fff;
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.35);
  border-radius:100px;padding:8px 20px 8px 8px;
  max-width:320px;flex-shrink:0;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.hero-news-tag{
  background:var(--black);color:#fff;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:100px;flex-shrink:0;
  text-transform:uppercase;letter-spacing:.02em;
}
.hero-news-card p{font-size:13px;line-height:1.3;}

/* ---------- hero background video ---------- */
/* no filter on the <video> itself — Safari stalls video decoding when a
   CSS filter is applied directly to it. Blur is done via a backdrop-filter
   layer on top instead, which keeps the video actually playing/visible. */
.hero-bg-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-bg-blur{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
}
/* soft fade at the very bottom edge so the video doesn't cut hard into the
   page background below — smooths the hero → next-section transition */
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:90px;z-index:0;
  background:linear-gradient(to bottom, transparent, var(--page-bg));
  pointer-events:none;
}


/* ---------- STATEMENT ---------- */
.statement{max-width:900px;margin:0 auto;padding:0 24px;text-align:center;flex:0 0 auto;}
.statement-hello{
  font-family:'Caveat',cursive;font-size:42px;color:var(--orange);margin-bottom:8px;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
.hello-script{font-weight:600;}
.statement-text{
  font-family:'Jost',sans-serif;font-size:clamp(26px,4vw,44px);line-height:1.35;
  color:#fff;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.statement-text .word{color:rgba(255,255,255,.4);transition:color .2s;}
.statement-text .word.lit{color:#fff;}
.statement-tags-wrap{
  position:relative;margin:36px auto 0;max-width:440px;
  padding:26px 14px 16px;
}
.statement-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.statement-tags span{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(34,26,22,.85);color:#fff;border-radius:100px;padding:12px 20px;font-size:14px;font-weight:500;
}
.statement-tags svg{width:16px;height:16px;flex-shrink:0;}

/* hand-drawn circle + caption around the tag pills, same casual
   marker-on-a-note language as the "(hello)" script heading */
.tags-circle{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.tags-circle path{
  fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(192,138,62,.4));
  stroke-dasharray:1160;stroke-dashoffset:1160;
  animation:tagsCircleDraw 1.6s ease-out 1.1s forwards;
}
@keyframes tagsCircleDraw{to{stroke-dashoffset:0;}}
.tags-note{
  position:absolute;top:-6px;right:6px;z-index:2;
  font-family:'Caveat',cursive;font-weight:600;font-size:26px;color:var(--orange);
  transform:rotate(-7deg);
  text-shadow:0 2px 10px rgba(0,0,0,.4);
  opacity:0;
  animation:tagsNoteIn .5s ease-out 2.5s forwards;
}
@keyframes tagsNoteIn{
  from{opacity:0;transform:rotate(-7deg) translateY(6px);}
  to{opacity:1;transform:rotate(-7deg) translateY(0);}
}
@media (prefers-reduced-motion:reduce){
  .tags-circle path{animation:none;stroke-dashoffset:0;}
  .tags-note{animation:none;opacity:1;}
}

/* ---------- SECTION SHARED ---------- */
section{max-width:1920px;margin:0 auto;padding:90px var(--gutter);}
.eyebrow{color:var(--gray);font-size:14px;font-weight:400;margin-bottom:10px;letter-spacing:-0.01em;}
.section-title{font-size:clamp(32px,4.5vw,64px);font-weight:400;margin-bottom:16px;}
.section-desc{color:var(--gray);max-width:520px;margin-bottom:40px;}
.section-desc.light{color:rgba(255,255,255,.75);}

/* giant watermark-style headings (Testimonials, Works, About, Contact) */
.section-watermark{
  font-size:clamp(60px,14vw,204px);line-height:1;color:rgba(34,26,22,.82);
  margin-bottom:0;
}
.works-watermark{
  text-align:center;
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
}

@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ---------- WORKS: full-width stacked case studies ---------- */
/* the watermark heading here is centered (unlike other sections), so the
   rest of the header is centered to match instead of clashing against it */
.works .eyebrow{max-width:480px;text-align:center;margin-left:auto;margin-right:auto;}

/* starts fully below the heading; script.js scrolls it up over the
   watermark's lower half as the section comes into view */
.work-list{position:relative;z-index:1;display:flex;flex-direction:column;gap:56px;will-change:transform;}
.works-cta{display:flex;width:max-content;}

/* hand-drawn circle + caption, same casual marker-note language as the
   hero's "what we do" annotation — drawn in on scroll (script.js) */
.works-cta-wrap{position:relative;margin:76px auto 0;width:max-content;}
.works-cta-circle{position:absolute;left:-56px;right:-56px;top:-46px;bottom:-38px;pointer-events:none;z-index:0;}
.works-cta-circle path{
  fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(192,138,62,.35));
}
.works-cta-note{
  position:absolute;top:-62px;left:50%;z-index:2;
  transform:translateX(-50%) rotate(-6deg);
  font-family:'Caveat',cursive;font-weight:600;font-size:22px;color:var(--orange);
  white-space:nowrap;opacity:0;
}

/* ---------- WORKS TEASER: tilted 3D mosaic of real project shots ---------- */
/* GSAP's sink-behind-heading tween animates translateY on the WRAPPER
   (#workGrid); the tilt itself lives one level down on .works-mosaic so
   the two transforms never collide/overwrite each other. */
.works-mosaic-wrap{position:relative;z-index:1;will-change:transform;padding:40px 0 60px;}
/* the mosaic's own box (max-width:1100px, centered) is the only stable
   reference frame for the hand-drawn call-outs below — #workGrid is
   wider than this at large viewports (no cap of its own), which is
   why % positions against it drifted away from the tiles. This stage
   carries the sizing/centering un-tilted so .mosaic-note children can
   sit flat, in %, still lined up with the tiles inside the tilted
   .works-mosaic one level down. */
.works-mosaic-stage{position:relative;max-width:1100px;margin:0 auto;}
.works-mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,195px);
  grid-template-areas:
    "a a a b"
    "a a a c"
    "d e f c";
  gap:18px;
  transform:perspective(2000px) rotateX(10deg) rotateY(-16deg) rotate(2deg);
  transform-style:preserve-3d;
}
.works-mosaic-tile{
  position:relative;display:block;border-radius:16px;overflow:hidden;
  background:var(--black);
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  transition:transform .35s ease,box-shadow .35s ease;
}
.works-mosaic-tile:hover{transform:translateZ(40px) scale(1.03);box-shadow:0 40px 80px rgba(0,0,0,.55);}
.works-mosaic-tile img,.works-mosaic-tile video{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.works-mosaic-label{
  position:absolute;left:14px;bottom:14px;z-index:1;
  background:rgba(34,26,22,.85);color:#fff;font-size:12px;font-weight:500;
  padding:6px 12px;border-radius:100px;
  opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;
}
.works-mosaic-tile:hover .works-mosaic-label{opacity:1;transform:translateY(0);}
.mt-a{grid-area:a;}
.mt-b{grid-area:b;}
.mt-c{grid-area:c;}
.mt-d{grid-area:d;}
.mt-e{grid-area:e;}
.mt-f{grid-area:f;}

/* hand-drawn category call-outs on a few tiles — same marker/Caveat
   language as the hero and the "View All Works" circle, just pointing
   at things instead of circling them. Positioned in % against #workGrid
   (measured from the tiles' real rendered position, so they line up
   despite the mosaic's 3D tilt living one level down). Desktop-only:
   the mosaic's whole layout rearranges at the 900px breakpoint, so
   fixed-ish placement stops making sense there. */
.mosaic-note{
  position:absolute;z-index:5;pointer-events:none;
  display:flex;align-items:center;gap:6px;
  font-family:'Caveat',cursive;font-weight:600;font-size:22px;color:var(--orange);
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  white-space:nowrap;opacity:0;
}
.mosaic-note-arrow{width:52px;height:38px;flex-shrink:0;}
.mosaic-note-arrow path{
  fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 4px rgba(192,138,62,.4));
}
.mosaic-note-underline{width:190px;height:14px;flex-shrink:0;}
.mosaic-note-underline path{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;}

.mosaic-note-a{left:9%;top:15%;flex-direction:column;align-items:flex-start;gap:2px;}
.mosaic-note-b{left:104%;top:11%;}
.mosaic-note-d{left:-13%;top:77%;}

@media (max-width:900px){ .mosaic-note{display:none;} }
.work-row{display:block;}
.work-visual{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:1400/780;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease;
}
.work-row:hover .work-visual{transform:translateY(-4px);}
.bg-web{background:linear-gradient(135deg,#141414,#2a201c 55%,var(--orange));}
.bg-saas{background:linear-gradient(135deg,#201a17,#2a2320 55%,#3d332e);}
.bg-logo{background:linear-gradient(135deg,var(--orange),#ffd9b3);}
.bg-ads{background:linear-gradient(135deg,#141414,#2e201a 55%,var(--orange));}
.work-visual.alt{filter:hue-rotate(18deg);}
/* dark scrim + title/meta are hidden until the card is hovered */
.work-scrim{
  position:absolute;inset:0;background:rgba(0,0,0,.8);
  opacity:0;transition:opacity .35s ease;
}
.work-row:hover .work-scrim{opacity:1;}
.work-real-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}
.work-overlay{
  position:absolute;inset:0;padding:5%;
  display:flex;justify-content:space-between;align-items:flex-end;
  color:#fff;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
}
.work-row:hover .work-overlay{opacity:1;}
.work-title{font-size:clamp(28px,4.5vw,64px);font-family:'Jost',sans-serif;font-weight:400;}
.work-meta-cols{display:flex;flex-direction:column;gap:14px;align-self:flex-start;}
.work-meta-cols span{display:flex;flex-direction:column;font-size:14px;color:#fff;gap:4px;}
.work-meta-cols b{font-weight:400;color:rgba(255,255,255,.64);font-size:14px;}

/* ---------- MOCKUPS (stand in for real project screenshots) ---------- */
.mock{position:relative;box-shadow:0 30px 70px rgba(0,0,0,.4);border-radius:12px;overflow:hidden;}
.mock-browser{width:56%;aspect-ratio:16/10;background:#fff;}
.mock-bar{height:22px;background:#ececec;display:flex;align-items:center;gap:5px;padding:0 10px;}
.mock-bar span{width:7px;height:7px;border-radius:50%;background:#d5d5d5;}
.mock-page{padding:14px;}
.mock-nav{height:9px;width:38%;background:#e2e2e2;border-radius:4px;margin-bottom:14px;}
.mock-hero{height:19%;background:linear-gradient(135deg,var(--orange),#ffcf9e);border-radius:8px;margin-bottom:10px;}
.mock-row{display:flex;gap:8px;}
.mock-row div{flex:1;height:30px;background:#eee;border-radius:6px;}

.mock-dashboard{width:60%;aspect-ratio:16/10;background:#111;display:flex;}
.mock-side{width:22%;background:#1a1a1a;}
.mock-main{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;}
.mock-main .mock-row div{background:#242424;}
.mock-chart{flex:1;background:#1c1c1c;border-radius:6px;}

.mock-logo{width:140px;height:140px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 70px rgba(0,0,0,.35);overflow:hidden;}
.mock-mark{width:52%;height:52%;background:var(--near-black);border-radius:30% 70% 70% 30%/30% 30% 70% 70%;}
.mock-logo-img{width:62%;height:62%;object-fit:contain;}

/* ---------- SERVICES ---------- */
.service-layout{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;}
.service-tabs{display:flex;flex-direction:column;gap:8px;}
.service-tab{
  border:1px solid var(--line);border-radius:100px;padding:12px 20px;font-size:14px;color:var(--gray);
  text-align:left;
}
.service-tab.active{background:var(--orange);color:#fff;border-color:var(--orange);}
.service-panels{grid-column:2;grid-row:1;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;}
.service-panel{display:none;}
.service-panel.active{display:block;animation:fadeIn .4s ease;}
.service-panel p{font-size:18px;max-width:560px;margin-bottom:24px;}
.service-pills{display:flex;gap:10px;flex-wrap:wrap;}
.service-pills span{background:var(--bg);border-radius:100px;padding:8px 16px;font-size:13px;color:var(--gray);}
.service-image{grid-column:1 / -1;margin-top:8px;}
.service-visual{
  display:none;align-items:center;justify-content:center;
  width:100%;border-radius:var(--radius-lg);aspect-ratio:1400/780;overflow:hidden;
}
.service-visual.active{display:flex;animation:fadeIn .4s ease;}

/* ---------- SERVICE VISUALS: each mock animates to actually show the
   service rather than sit static — reuses the same in-card-animation
   language built for the Why Choose Us section, so it reads as one
   consistent site-wide idiom rather than one-off decoration ---------- */

/* Website Design: reuses whyHeroShift/whyNavResize/whyRowPulse verbatim
   (colors + bar shapes shifting, as if the page is being designed live),
   plus an orange "cursor" drifting between the elements it's editing */
.mock-anim-build .mock-hero{animation:whyHeroShift 6s ease-in-out infinite;}
.mock-anim-build .mock-nav{animation:whyNavResize 5s ease-in-out infinite;}
.mock-anim-build .mock-row div{animation:whyRowPulse 4.5s ease-in-out infinite;}
.mock-anim-build .mock-row div:nth-child(1){animation-delay:0s;}
.mock-anim-build .mock-row div:nth-child(2){animation-delay:.5s;}
.mock-anim-build .mock-row div:nth-child(3){animation-delay:1s;}
.mock-anim-build .mock-page{position:relative;}
.mock-cursor{
  position:absolute;width:14px;height:14px;z-index:2;
  background:var(--orange);border-radius:50% 50% 50% 3px;
  transform:rotate(-45deg);
  box-shadow:0 6px 14px rgba(192,138,62,.5);
  animation:svcCursorMove 6s ease-in-out infinite;
}
@keyframes svcCursorMove{
  0%,100%{left:20%;top:26%;}
  25%{left:74%;top:20%;}
  50%{left:58%;top:64%;}
  75%{left:22%;top:60%;}
}


/* Logo Design: the mark itself morphs shape and shifts color, standing
   in for iterating on a brand mark rather than a static blob */
.mock-anim-build .mock-mark{
  animation:svcMarkMorph 7s ease-in-out infinite, svcMarkColor 7s ease-in-out infinite;
}
@keyframes svcMarkMorph{
  0%,100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%;}
  33%{border-radius:70% 30% 30% 70%/60% 40% 60% 40%;}
  66%{border-radius:50% 50% 20% 80%/25% 75% 25% 75%;}
}
@keyframes svcMarkColor{
  0%,100%{background:var(--near-black);}
  50%{background:var(--orange);}
}

/* SaaS Development & Performance Ads: real client screenshots (an
   actual Talyro dashboard, an actual campaign reach map) rather than
   any invented mockup — framed like a live product shot, with a slow
   continuous pan so it doesn't sit dead-still */
.mock-shot{width:72%;aspect-ratio:16/10;}
.mock-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;animation:svcShotPan 12s ease-in-out infinite alternate;}
@keyframes svcShotPan{
  0%{transform:scale(1) translateY(0);}
  100%{transform:scale(1.09) translateY(-3%);}
}
.mock-shot-badge{
  position:absolute;left:16px;bottom:16px;z-index:2;
  display:flex;align-items:center;gap:10px;
  background:rgba(34,26,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:10px 14px;
}
.mock-chart-card-stat{
  font-family:'Jost',sans-serif;font-size:20px;font-weight:400;color:var(--orange);
  display:flex;align-items:baseline;gap:6px;
}
.mock-chart-card-stat small{font-family:'Inter',sans-serif;font-size:11px;color:rgba(255,255,255,.45);font-weight:400;}
.mock-chart-card-badge{
  font-size:10px;font-weight:500;color:#5CFF6E;background:rgba(92,255,110,.12);
  padding:4px 9px;border-radius:100px;border:1px solid rgba(92,255,110,.3);
}

/* ---------- ABOUT: watermark headline + photo ---------- */
.about-watermark-wrap{position:relative;min-height:280px;margin-bottom:40px;display:flex;align-items:flex-start;}
.about-watermark{
  font-size:clamp(56px,14vw,204px);line-height:.92;color:rgba(34,26,22,.82);
  max-width:800px;
}
.about-photo{
  position:absolute;right:0;top:-20px;width:220px;aspect-ratio:460/580;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:0 30px 60px rgba(0,0,0,.25);
}
.about-text{max-width:640px;color:var(--gray);font-size:16px;margin-bottom:40px;}
.timeline{border-top:1px solid var(--line);}
.timeline-item{
  display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);
  font-size:15px;
}
.timeline-date{color:var(--gray);}


/* ---------- PRICING ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px;}
.price-card.highlight{
  background:var(--black);color:#fff;border-color:var(--black);
  position:relative;overflow:hidden;padding:0;
}
.price-card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.price-card-scrim{position:absolute;inset:0;background:rgba(8,5,2,.6);z-index:0;}
.price-card-content{position:relative;z-index:1;padding:36px;}
.price-card h3{font-size:22px;margin-bottom:12px;font-family:'Jost',sans-serif;}
.price-card.highlight h3,.price-card.highlight .price-amount{text-shadow:0 2px 10px rgba(0,0,0,.4);}
.price-desc{color:var(--gray);font-size:14px;margin-bottom:20px;min-height:40px;}
.price-card.highlight .price-desc{color:rgba(255,255,255,.82);text-shadow:0 1px 6px rgba(0,0,0,.35);}
.price-delivery{font-size:13px;color:var(--gray);margin-bottom:16px;display:flex;justify-content:space-between;}
.price-card.highlight .price-delivery{color:rgba(255,255,255,.78);text-shadow:0 1px 6px rgba(0,0,0,.35);}
.price-amount{font-size:48px;font-family:'Jost',sans-serif;margin-bottom:20px;}
.price-amount span{font-size:14px;color:var(--gray);font-family:'Inter',sans-serif;}
.price-card.highlight .price-amount span{color:rgba(255,255,255,.75);}
.price-card ul{margin-bottom:28px;}
.price-card li{font-size:14px;padding:8px 0;border-top:1px solid var(--line);}
.price-card.highlight li{border-color:rgba(255,255,255,.22);text-shadow:0 1px 6px rgba(0,0,0,.35);}
.btn-outline{
  display:inline-block;width:100%;text-align:center;
  border:1px solid var(--near-black);border-radius:100px;padding:12px;font-size:14px;font-weight:500;
}
.btn-outline.light{border-color:#fff;}

/* ---------- WHY CHOOSE US ---------- */
/* the page bg is gray right up to this section; fade it into white
   gradually over the top of the section instead of cutting straight
   to a flat color, so the seam with Works above doesn't read as a hard line */
.why-us{background:var(--page-bg);}
.why-us-glow{display:none;}
/* same centered giant watermark + bottom mask-fade as "Recent Works",
   and the same sink-behind-the-grid scroll animation (wired up in
   script.js) — a literal reuse of that treatment, not just a family
   resemblance this time */
.why-us-watermark{
  text-align:center;
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
}

.why-grid{display:grid;grid-template-columns:1.1fr 1fr 0.85fr;grid-auto-rows:min-content;gap:28px 20px;margin-top:40px;}

/* cursor-tracking spotlight glow (classic GitHub "spotlight card" pattern,
   --mx/--my set by script.js on mousemove), tinted with our own orange.
   Cards also sit at a slight scattered tilt with a floating shadow —
   echoing the tilted Works mosaic above without literally copying its
   3D perspective (this content is readable text, not glanceable images,
   so the tilt stays tiny and straightens out on hover). */
.why-card{
  --mx:50%;--my:50%;
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:32px;
  box-shadow:0 24px 48px rgba(34,26,22,.08);
  transition:transform .35s ease,box-shadow .35s ease,border-color .3s ease;
}
.why-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my), rgba(192,138,62,.16), transparent 65%);
  opacity:0;transition:opacity .35s ease;
}
.why-card:hover::before{opacity:1;}
.why-tall{transform:rotate(-1.1deg);}
.why-stat{transform:rotate(0.9deg);}
.why-small{transform:rotate(-0.8deg);}
.why-wide{transform:rotate(0.5deg);}
.why-card:hover{
  transform:rotate(0deg) translateY(-6px);
  border-color:rgba(255,140,60,.35);
  box-shadow:0 32px 64px rgba(34,26,22,.14);
}
.why-card>*{position:relative;z-index:1;}
.why-card h3{font-family:'Jost',sans-serif;font-size:22px;font-weight:400;margin-bottom:8px;}
.why-card p{color:var(--gray);font-size:15px;line-height:1.5;}

.why-tall{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;}
.why-illus{flex:1;display:flex;align-items:center;margin-top:20px;min-height:180px;}
.why-illus .mock-browser{width:100%;}

.why-stat{grid-column:2;grid-row:1;position:relative;overflow:hidden;}
.why-stat-num{font-size:84px;font-family:'Jost',sans-serif;color:var(--orange);margin-bottom:8px;line-height:1;}
.why-stat-num span{font-size:17px;color:var(--gray);font-family:'Inter',sans-serif;margin-left:6px;}
/* the generic rule above is meant for .why-stat-label only; .why-count
   is also a span (needed as the GSAP count-up target) but must keep
   the big orange number styling it inherits from .why-stat-num */
.why-stat-num .why-stat-highlight,
.why-stat-num .why-count{font-size:inherit;color:inherit;font-family:inherit;margin-left:0;}
.why-stat-highlight{position:relative;display:inline-block;}
.why-stat-underline{position:absolute;left:0;bottom:-8px;width:100%;height:20px;pointer-events:none;}
.why-stat-underline path{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;}
.why-stat-note{
  position:absolute;top:18px;right:18px;z-index:2;
  font-family:'Caveat',cursive;font-weight:600;font-size:18px;color:var(--orange);
  transform:rotate(4deg);opacity:0;
}

.why-small{grid-column:3;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;}
.why-check-wrap{position:relative;width:56px;height:56px;margin-bottom:18px;}
.why-check{width:56px;height:56px;margin-bottom:0;position:relative;z-index:1;}
.why-check-ring{stroke:rgba(34,26,22,.15);}
.why-check-path{
  stroke-dasharray:34;stroke-dashoffset:34;
}

.why-wide{grid-column:2 / 4;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.why-wide-text{max-width:360px;}
.why-dots{display:flex;gap:10px;margin-top:18px;}
.why-dots span{width:14px;height:14px;border-radius:50%;display:block;}
.why-wide-illus{flex-shrink:0;width:160px;}
.why-wide-illus .mock-dashboard{width:100%;aspect-ratio:16/10;}

/* ---------- WHY CHOOSE US: continuous in-card animations ---------- */
/* scoped under .why-illus / .why-wide-illus / .why-* ancestors so the
   shared .mock-* base classes used by the Services tabs stay untouched */

/* left card: site "redesigning itself" — colors + bar shapes shift */
.why-illus .mock-hero{ animation:whyHeroShift 6s ease-in-out infinite; }
@keyframes whyHeroShift{
  0%,100%{ filter:hue-rotate(0deg); }
  50%{ filter:hue-rotate(50deg); }
}
.why-illus .mock-nav{ animation:whyNavResize 5s ease-in-out infinite; }
@keyframes whyNavResize{
  0%,100%{ width:38%; }
  50%{ width:64%; }
}
.why-illus .mock-row div{ animation:whyRowPulse 4.5s ease-in-out infinite; background:#eee; }
.why-illus .mock-row div:nth-child(1){ animation-delay:0s; }
.why-illus .mock-row div:nth-child(2){ animation-delay:.5s; }
.why-illus .mock-row div:nth-child(3){ animation-delay:1s; }
@keyframes whyRowPulse{
  0%,100%{ background:#eee; transform:scaleY(1); }
  50%{ background:#ffd9b8; transform:scaleY(1.2); }
}

/* stat card: number pulse + rightward speed streaks */
.why-stat-num{ animation:whyStatPulse 3s ease-in-out infinite; display:inline-block; }
@keyframes whyStatPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}
.why-speed-lines{
  position:absolute;top:26px;right:14px;display:flex;flex-direction:column;gap:10px;
  z-index:0;pointer-events:none;
}
.why-speed-lines span{
  display:block;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(255,140,60,.75));
  animation:whySpeedStreak 1.4s linear infinite;
}
.why-speed-lines span:nth-child(1){ width:44px; animation-delay:0s; }
.why-speed-lines span:nth-child(2){ width:28px; animation-delay:.25s; }
.why-speed-lines span:nth-child(3){ width:58px; animation-delay:.5s; }
@keyframes whySpeedStreak{
  0%{ transform:translateX(50px); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateX(-100px); opacity:0; }
}

/* small card: pulsing ping ring behind the checkmark */
.why-ping{
  position:absolute;inset:0;border-radius:50%;
  animation:whyPing 2.4s ease-out infinite;
}
@keyframes whyPing{
  0%{ box-shadow:0 0 0 0 rgba(255,140,60,.45); }
  70%{ box-shadow:0 0 0 14px rgba(255,140,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,140,60,0); }
}

/* wide card: Figma dots bounce + dashboard bars/chart pulse */
.why-dots span{ animation:whyDotBounce 1.6s ease-in-out infinite; }
.why-dots span:nth-child(1){ animation-delay:0s; }
.why-dots span:nth-child(2){ animation-delay:.1s; }
.why-dots span:nth-child(3){ animation-delay:.2s; }
.why-dots span:nth-child(4){ animation-delay:.3s; }
.why-dots span:nth-child(5){ animation-delay:.4s; }
@keyframes whyDotBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
.why-wide-illus .mock-row div{ animation:whyBarPulse 3.6s ease-in-out infinite; }
.why-wide-illus .mock-row div:nth-child(1){ animation-delay:0s; }
.why-wide-illus .mock-row div:nth-child(2){ animation-delay:.4s; }
.why-wide-illus .mock-row div:nth-child(3){ animation-delay:.8s; }
@keyframes whyBarPulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; background:#3a3a3a; }
}
.why-wide-illus .mock-chart{
  background:linear-gradient(100deg,#1c1c1c 30%,#2c2c2c 50%,#1c1c1c 70%);
  background-size:250% 100%;
  animation:whyChartSweep 3s linear infinite;
}
@keyframes whyChartSweep{
  0%{ background-position:120% 0; }
  100%{ background-position:-40% 0; }
}

@media (prefers-reduced-motion:reduce){
  .why-illus .mock-hero,.why-illus .mock-nav,.why-illus .mock-row div,
  .why-stat-num,.why-speed-lines span,.why-ping,
  .why-dots span,.why-wide-illus .mock-row div,.why-wide-illus .mock-chart,
  .mock-anim-build .mock-hero,.mock-anim-build .mock-nav,.mock-anim-build .mock-row div,
  .mock-cursor,.mock-anim-build .mock-mark,.mock-shot img{
    animation:none !important;
  }
}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:16px;max-width:800px;margin:0 auto;}
.faq-item{
  background:var(--panel-bg);border-radius:var(--radius-lg);
  padding:0 28px;
}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:26px 0;font-size:18px;font-weight:500;text-align:left;
}
.faq-q span{font-size:20px;color:var(--orange);transition:transform .25s ease;flex-shrink:0;}
.faq-item.active .faq-q span{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.active .faq-a{max-height:200px;}
.faq-a p{color:var(--gray);padding-bottom:26px;}
.faq-more{
  display:flex;align-items:center;gap:8px;width:max-content;margin:32px auto 0;
  font-size:14px;font-weight:500;color:var(--near-black);
}
.faq-more .arrow{color:var(--orange);transition:transform .25s ease;}
.faq-more:hover .arrow{transform:translateX(4px);}

/* ---------- CONTACT: dark/glow panel, same language as footer (matches
   the ustaff.ee reference build — real form via formsubmit.co, nav/social/
   legal columns live here, not duplicated in the footer below) ---------- */
.contact{
  position:relative;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;
  padding:0;margin-bottom:0;background:var(--black);color:#fff;
}
.contact-glow{
  position:absolute;left:0;right:0;top:0;height:65%;z-index:0;
  background:radial-gradient(ellipse at 50% -10%, rgba(192,138,62,.3) 0%, rgba(192,138,62,.1) 35%, transparent 65%);
  pointer-events:none;
}
.contact-content{
  position:relative;z-index:1;padding:110px var(--gutter) 100px;
  display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;
}
.contact-main{flex:1 1 480px;min-width:0;}
.contact-watermark{
  font-size:clamp(44px,10vw,140px);line-height:.98;margin:0 0 8px;
  background:linear-gradient(180deg,#fff 0%,#8a8a8a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-subtitle{font-size:clamp(24px,3.4vw,40px);font-weight:400;margin-bottom:16px;color:#fff;}
.contact .section-desc{color:rgba(255,255,255,.6);}
.contact-form{display:flex;flex-direction:column;gap:14px;max-width:520px;margin-top:32px;}
.contact-form input,.contact-form textarea{
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px;font-family:inherit;font-size:15px;
  background:rgba(255,255,255,.05);color:#fff;
  transition:border-color .25s ease,background .25s ease;
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:rgba(255,140,60,.5);background:rgba(255,255,255,.08);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.35);}
.contact-form button{align-self:flex-start;}
.urgency-group{display:flex;flex-wrap:wrap;gap:10px;}
.urgency-check{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);border-radius:100px;
  padding:11px 18px;font-size:14px;color:rgba(255,255,255,.75);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.urgency-check input{position:absolute;opacity:0;width:0;height:0;}
.urgency-check:has(input:checked){
  border-color:var(--orange);background:rgba(192,138,62,.14);color:#fff;
}
.contact-links{display:flex;gap:56px;flex-wrap:wrap;flex:0 1 auto;padding-top:96px;}
.contact-links h5{font-size:14px;color:rgba(255,255,255,.5);margin-bottom:14px;font-weight:400;}
.contact-links a{display:block;font-size:16px;color:rgba(255,255,255,.85);margin-bottom:10px;transition:color .2s ease;}
.contact-links a:hover{color:var(--orange);}

/* ---------- FOOTER: minimal bottom bar only — no repeated brand text,
   matches the ustaff.ee reference build exactly ---------- */
.footer{position:relative;color:#fff;overflow:hidden;background:#201a17;}
.footer-glow{
  position:absolute;left:0;right:0;bottom:0;height:70%;
  background:radial-gradient(ellipse at 50% 100%, rgba(192,138,62,.35) 0%, rgba(192,138,62,.12) 35%, transparent 70%);
  pointer-events:none;
}
.footer-inner{position:relative;z-index:1;max-width:1920px;margin:0 auto;padding-top:40px;}
.footer-bottom{
  padding:24px var(--gutter);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:14px;color:rgba(255,255,255,.64);
}
.footer-clock{font-variant-numeric:tabular-nums;}
#backToTop{color:var(--orange);}
#backToTop:hover{color:#fff;}

.footer-credit{
  text-align:right;padding:0 var(--gutter) 18px;
  font-size:11px;color:rgba(255,255,255,.3);
}
@media (max-width:700px){.footer-credit{text-align:center;}}
.footer-credit a{color:rgba(255,255,255,.7);text-decoration:underline;transition:color .2s ease;}
.footer-credit a:hover{color:var(--orange);}

/* ---------- SUB-PAGE HERO: dark banner for pages other than home, same
   language as the footer/why-us/contact panels — gives every page the
   same brand presence the homepage has, and gives the header a real
   background so it no longer sits flush on the plain page bg */
.page-hero{
  position:relative;overflow:hidden;
  max-width:1920px;width:100%;margin:0 auto;
  background:var(--black);color:#fff;
  border-radius:0 0 32px 32px;
  padding:0 0 50px;
}
.page-hero-glow{
  position:absolute;left:0;right:0;top:0;height:75%;z-index:0;
  background:radial-gradient(ellipse at 50% -10%, rgba(192,138,62,.32) 0%, rgba(192,138,62,.12) 35%, transparent 65%);
  pointer-events:none;
}
.page-hero > *{position:relative;z-index:1;}
.page-hero-intro{padding:104px var(--gutter) 0;max-width:calc(720px + 2 * var(--gutter));}
.page-hero-intro .eyebrow{color:rgba(255,255,255,.55);}
.page-hero-intro .section-title{margin-bottom:14px;color:#fff;}
.page-hero-intro .section-desc{color:rgba(255,255,255,.6);}

/* ---------- CASE STUDY PAGE ---------- */
.case-hero-image{
  width:100%;aspect-ratio:1400/820;border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:56px;
}
.case-hero-image img{width:100%;height:100%;object-fit:cover;object-position:top;}
.case-layout{display:grid;grid-template-columns:1fr 280px;gap:60px;margin-bottom:80px;}
.case-text{max-width:640px;}
.case-text p{color:var(--gray);font-size:17px;line-height:1.6;margin-bottom:20px;}
.case-meta-list{display:flex;flex-direction:column;gap:22px;padding-top:6px;}
.case-meta-list span{display:flex;flex-direction:column;gap:4px;font-size:15px;}
.case-meta-list b{font-weight:400;color:var(--gray);font-size:13px;}
.case-back{display:inline-flex;align-items:center;gap:8px;color:var(--gray);font-size:14px;margin-bottom:32px;}
.case-back:hover{color:var(--near-black);}
.case-more{border-top:1px solid var(--line);padding-top:56px;}

/* ---------- BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.blog-card{
  display:block;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--panel-bg);transition:transform .3s ease;
}
.blog-card:hover{transform:translateY(-4px);}
.blog-card-media{aspect-ratio:16/10;position:relative;}
.blog-card-body{padding:24px;}
.blog-card-tag{
  display:inline-block;background:rgba(34,26,22,.85);color:#fff;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;
}
.blog-card-date{color:var(--gray);font-size:13px;margin-bottom:8px;display:block;}
.blog-card h3{font-size:19px;font-family:'Jost',sans-serif;font-weight:400;margin-bottom:10px;line-height:1.3;}
.blog-card p{color:var(--gray);font-size:14px;line-height:1.5;}

/* ---------- RESPONSIVE ---------- */
/* the gutter var scales down from 156px as viewport shrinks; every
   rule padded with var(--gutter) follows automatically */
@media (max-width:1400px){ :root{--gutter:64px;} }
@media (max-width:700px){ :root{--gutter:24px;} }

/* break an element out to the full section width, ignoring the gutter
   (used for watermark headings that need to fit on one line) */
.bleed{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));max-width:calc(100% + 2 * var(--gutter));}
@media (max-width:900px){
  .mock-browser,.mock-dashboard,.mock-shot{width:88%;}
  .service-layout{grid-template-columns:1fr;}
  .service-panels{grid-column:1;}
  .pricing-grid{grid-template-columns:1fr;}
  .nav-links,.lang-switch,.header-cta{display:none;}
  .menu-toggle{display:flex;}
  .about-watermark-wrap{flex-direction:column;}
  .about-photo{position:static;width:180px;margin-top:20px;}
  .case-layout{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr;}
  .why-tall,.why-stat,.why-small,.why-wide{grid-column:1;grid-row:auto;}
  .contact-links{padding-top:0;gap:40px;}
  .works-mosaic{
    transform:none;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(4,140px);
    grid-template-areas:"a a" "b c" "d d" "e f";
  }
}
@media (max-width:600px){
  .blog-grid{grid-template-columns:1fr;}
  .works-mosaic{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f";grid-template-rows:repeat(6,160px);}
}

/* ---------- ALIGN STUDIO ADAPTATION: brandmark + photo swaps ---------- */
.brandmark{width:28px;height:28px;flex-shrink:0;color:#fff;overflow:visible;}
.brandmark path,.brandmark circle{stroke:currentColor;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.brandmark .bm-gold{stroke:var(--orange);}

.why-photo{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;box-shadow:0 30px 70px rgba(0,0,0,.4);}
.why-illus .why-photo{width:100%;}
.why-wide-illus .why-photo{width:100%;aspect-ratio:16/10;}

/* ---------- ALIGN STUDIO ADAPTATION: full-height main sections (the footer
   is a thin bottom bar by design and must stay out of this rule — it was
   wrongly included earlier, which is why it rendered a full screen tall) ---------- */
.works,.why-us,.contact{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- CLASS DETAILS ACCORDION (full descriptions, reuses .faq-item pattern) ---------- */
.class-details-head{text-align:center;max-width:640px;margin:0 auto 32px;}
.class-details-head h3{font-size:28px;margin-bottom:8px;}
.class-details-head p{color:var(--gray);}
.class-detail.active .faq-a{max-height:2200px;}
.faq-a p{margin:0;}
.faq-a p + p{margin-top:14px;}

/* ---------- WEEK CALENDAR (class schedule) ---------- */
.week-calendar{
  display:grid;grid-template-columns:repeat(7,1fr);gap:10px;
  max-width:920px;margin:0 auto 28px;
}
.week-day{
  background:var(--panel-bg);border:1px solid var(--line);border-radius:16px;
  padding:18px 6px;text-align:center;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:7px;min-height:104px;
  font-family:'Inter',sans-serif;
  box-shadow:0 14px 28px rgba(34,26,22,.06);
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
/* same scattered-card tilt language as .why-card/.works-card/.proof-card,
   applied across all 7 days so the calendar reads as one family with them */
.week-day:nth-child(1){transform:rotate(-1.2deg);}
.week-day:nth-child(2){transform:rotate(0.7deg);}
.week-day:nth-child(3){transform:rotate(-0.5deg);}
.week-day:nth-child(4){transform:rotate(0.9deg);}
.week-day:nth-child(5){transform:rotate(-0.8deg);}
.week-day:nth-child(6){transform:rotate(0.6deg);}
.week-day:nth-child(7){transform:rotate(-1deg);}
.week-day-name{font-size:12px;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;}
.week-day-dot{width:6px;height:6px;border-radius:50%;background:var(--line);}
.week-day.has-class{cursor:pointer;background:#fff;border-color:rgba(192,138,62,.5);box-shadow:0 18px 34px rgba(34,26,22,.1);}
.week-day.has-class .week-day-dot{background:var(--orange);}
.week-day.has-class:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 22px 40px rgba(34,26,22,.16);}
.week-day.has-class:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.week-day-class{font-size:12.5px;font-weight:600;line-height:1.3;}
.week-day-time{font-size:11px;color:var(--gray);}
.week-day.is-open{background:var(--orange);border-color:var(--orange);transform:rotate(0deg);box-shadow:0 22px 40px rgba(192,138,62,.28);}
.week-day.is-open .week-day-name,
.week-day.is-open .week-day-class{color:#fff;}
.week-day.is-open .week-day-dot{background:#fff;}
.week-day.is-open .week-day-time{color:rgba(255,255,255,.85);}

.week-panels{max-width:800px;margin:0 auto 64px;}
.week-panel{
  background:var(--panel-bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:36px 40px;
  box-shadow:0 24px 48px rgba(34,26,22,.08);transform:rotate(0.3deg);
}
.week-panel h4{font-size:22px;margin-bottom:4px;}
.week-panel-time{color:var(--orange);font-size:14px;font-weight:600;display:block;margin-bottom:20px;}
.week-panel p{color:var(--gray);margin:0;}
.week-panel p+p{margin-top:14px;}

.class-details-sub{max-width:800px;margin:0 auto 16px;color:var(--gray);font-size:14px;text-align:center;}

@media (max-width:640px){
  .week-calendar{gap:6px;}
  .week-day{padding:12px 2px;min-height:84px;border-radius:12px;}
  .week-day-class{font-size:10.5px;}
  .week-day-time{font-size:9.5px;}
  .week-panel{padding:26px 22px;}
}

/* ---------- WEEK CALENDAR: icons, today badge, panel polish ---------- */
.week-day-icon{width:20px;height:20px;color:var(--orange);}
.week-day.is-open .week-day-icon{color:#fff;}
.week-day-empty{color:var(--line);font-size:13px;}
.week-day{border-style:solid;}
.week-day:not(.has-class){border-style:dashed;opacity:.75;}

.week-day.is-today{position:relative;}
.week-day.is-today::before{
  content:'Сегодня';position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--near-black);color:#fff;font-size:9.5px;font-weight:600;letter-spacing:.03em;
  padding:3px 9px;border-radius:100px;white-space:nowrap;
}

.week-panel-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
.week-panel-icon{width:34px;height:34px;color:var(--orange);flex-shrink:0;background:#fff;border-radius:50%;padding:8px;box-shadow:0 6px 16px rgba(34,26,22,.1);}
.week-panel-head h4{margin-bottom:2px;}
.week-panel-cta{margin-top:26px;}

@keyframes weekPanelIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.week-panel:not([hidden]){animation:weekPanelIn .35s ease;}

@media (max-width:640px){
  .week-day-icon{width:16px;height:16px;}
  .week-panel-icon{width:28px;height:28px;padding:6px;}
}

/* ---------- WHY-US CARDS: map, bigger stat, stage dots, step row ---------- */
.why-map-card{display:flex;flex-direction:column;}
.why-map-frame{border-radius:12px;overflow:hidden;margin-top:16px;aspect-ratio:4/3;background:var(--panel-bg);}
.why-map-frame iframe{width:100%;height:100%;border:0;display:block;pointer-events:none;}
.why-map-address{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:16px;font-size:14px;font-weight:500;color:var(--near-black);
}
.why-map-address .arrow{color:var(--orange);font-size:16px;transition:transform .25s ease;}
.why-map-card:hover .why-map-address .arrow{transform:translateX(4px);}

.why-stat{display:flex;flex-direction:column;}
.why-card .why-stat-num{font-size:150px;}
.why-stat-label{display:block;font-size:15px;color:var(--near-black);font-weight:500;margin:2px 0 12px;}

.why-small{justify-content:flex-start;}
.why-stages{display:flex;gap:34px;margin-top:28px;}
.why-stage-item{display:flex;flex-direction:column;align-items:center;gap:12px;}
.why-stage{width:20px;height:20px;border-radius:50%;background:var(--line);display:block;animation:whyStagePulse 2.7s ease-in-out infinite;}
.why-stage-item:nth-child(1) .why-stage{animation-delay:0s;}
.why-stage-item:nth-child(2) .why-stage{animation-delay:.4s;}
.why-stage-item:nth-child(3) .why-stage{animation-delay:.8s;}
.why-stage-label{font-size:14px;font-weight:500;color:var(--near-black);}
@keyframes whyStagePulse{
  0%,100%{background:var(--line);transform:scale(1);box-shadow:none;}
  35%{background:var(--orange);transform:scale(1.6);box-shadow:0 0 0 10px rgba(192,138,62,.2);}
}

.why-steps{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.why-step{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:84px;}
.why-step-num{
  width:40px;height:40px;border-radius:50%;background:var(--panel-bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:'Jost',sans-serif;
  font-size:17px;color:var(--orange);
}
.why-step-label{font-size:12.5px;color:var(--gray);text-align:center;}
.why-step-arrow{color:var(--line);font-size:18px;align-self:center;margin-top:4px;}

@media (max-width:900px){
  .why-steps{width:100%;justify-content:space-between;}
}

/* ---------- TESTIMONIALS (styled after the agency site's "proof" section —
   same tilted-card social-proof pattern, text quotes instead of live-product
   screenshots since a small studio doesn't have those). Sample quotes below
   are placeholders written to match the studio's voice — swap for real
   student reviews once Olga sends them. ---------- */
.proof{position:relative;}
.proof .eyebrow{max-width:480px;text-align:center;margin-left:auto;margin-right:auto;}
.proof-watermark{
  text-align:center;
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
}
.proof-sub{max-width:560px;margin:20px auto 0;text-align:center;color:var(--gray);font-size:16px;line-height:1.6;}
.proof-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px;}
.proof-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 24px 48px rgba(34,26,22,.08);transition:transform .35s ease,box-shadow .35s ease;
}
.proof-card:nth-child(1){transform:rotate(-1.3deg);}
.proof-card:nth-child(2){transform:rotate(0.9deg);}
.proof-card:nth-child(3){transform:rotate(-0.6deg);}
.proof-card:hover{transform:rotate(0deg) translateY(-8px);box-shadow:0 32px 64px rgba(34,26,22,.14);}
.testimonial-quote{
  padding:30px 26px 16px;font-family:'Jost',sans-serif;font-weight:400;
  font-size:17px;line-height:1.5;color:var(--near-black);position:relative;
}
.testimonial-quote::before{
  content:'\201C';position:absolute;top:-4px;left:22px;font-size:64px;
  color:var(--orange);opacity:.25;font-family:'Jost',sans-serif;
}
.proof-card-body{padding:4px 26px 26px;}
.proof-card-body h3{font-family:'Jost',sans-serif;font-weight:400;font-size:18px;margin-bottom:4px;}
.proof-card-body p{color:var(--gray);font-size:13.5px;}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr;}}

/* ---------- PROCESS: "Как начать" — same steps+companion-card layout as
   openweb.ee/ustaff.ee's process section, companion card is a light CTA
   instead of a second full form (a single-page local studio site doesn't
   need two duplicate forms the way a multi-scroll B2B funnel does) ---------- */
.process .eyebrow{max-width:480px;text-align:center;margin-left:auto;margin-right:auto;}
.process-watermark{
  text-align:center;
  -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
}
.process-layout{
  display:flex;flex-direction:column;gap:52px;
  max-width:1180px;margin:48px auto 0;
}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.process-step{position:relative;}
.process-step:nth-child(1){transform:rotate(-1.2deg);}
.process-step:nth-child(2){transform:rotate(1deg);}
.process-step:nth-child(3){transform:rotate(0.8deg);}
.process-step-num{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;margin-bottom:14px;
  background:var(--orange);color:#fff;font-family:'Jost',sans-serif;font-size:16px;
}
.process-step h3{font-family:'Jost',sans-serif;font-weight:400;font-size:18px;margin-bottom:6px;}
.process-step p{color:var(--gray);font-size:14px;line-height:1.6;}
.process-form-card{
  display:flex;flex-direction:column;transform:rotate(0.4deg);
  background:var(--black);color:#fff;justify-content:center;align-items:center;text-align:center;
  max-width:520px;margin:0 auto;padding:52px 56px;
}
.process-form-card h3{font-family:'Jost',sans-serif;font-weight:400;font-size:22px;margin-bottom:8px;color:#fff;}
.process-form-card > p{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:0;}
.process-cta{margin-top:24px;}

@media (max-width:900px){
  .process-steps{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}
}

/* ---------- WORKS-CARDS: 3-card layout for the 3 real scheduled classes,
   same pattern as ustaff.ee's trust-grid (reuses .why-card as the base) ---------- */
.works-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;max-width:1180px;margin-left:auto;margin-right:auto;}
.works-card{display:flex;flex-direction:column;gap:10px;}
.works-card:nth-child(1){transform:rotate(-1deg);}
.works-card:nth-child(2){transform:rotate(0.8deg);}
.works-card:nth-child(3){transform:rotate(-0.6deg);}
.works-card-media{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--panel-bg);margin-bottom:2px;}
.works-card-media video{width:100%;height:100%;object-fit:cover;display:block;}
.works-card-tag{font-size:12px;font-weight:600;color:var(--orange);text-transform:uppercase;letter-spacing:.03em;}
.works-card h3{margin-top:-2px;}

@media (max-width:900px){
  .works-cards{grid-template-columns:1fr;max-width:420px;}
}

/* ---------- PROCESS STEPS: icon badge matches the same white-circle/orange-
   icon/soft-shadow language as .week-panel-icon, instead of the generic
   agency-style solid number circle ---------- */
.process-step-icon{
  width:44px;height:44px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--orange);
  box-shadow:0 10px 22px rgba(34,26,22,.1);margin-bottom:14px;flex-shrink:0;
}
.process-step-icon svg{width:20px;height:20px;}
.process-step-tag{
  display:block;font-size:11px;font-weight:600;color:var(--orange);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;
}

/* ---------- Smaller watermark headings for the two sections whose phrases
   run long and were wrapping oversized ("Наш подход" / process heading) ---------- */
.why-us-watermark,.process-watermark{
  font-size:clamp(40px,8vw,120px);
}

/* ---------- PROCESS STEP MEDIA: original small illustrations, same media
   box as .works-card, so the "how to start" steps read as one family with
   the classes cards above instead of generic outline icons ---------- */
.process-media{display:flex;align-items:center;justify-content:center;}

/* step 1 & 3 both riff on the real weekly calendar's dot language below —
   one still/lit dot ("pick a day"), one dot cycling through the week
   ("come back regularly") */
.mini-week{display:flex;gap:8px;}
.mini-week span{width:11px;height:11px;border-radius:50%;background:var(--line);flex-shrink:0;}
.mini-week span.is-lit{background:var(--orange);animation:miniWeekGlow 2.2s ease-in-out infinite;}
@keyframes miniWeekGlow{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(192,138,62,.35);}
  50%{transform:scale(1.5);box-shadow:0 0 0 9px rgba(192,138,62,0);}
}
.mini-week-cycle span{animation:miniWeekCycle 4.2s ease-in-out infinite;}
.mini-week-cycle span:nth-child(1){animation-delay:0s;}
.mini-week-cycle span:nth-child(2){animation-delay:.3s;}
.mini-week-cycle span:nth-child(3){animation-delay:.6s;}
.mini-week-cycle span:nth-child(4){animation-delay:.9s;}
.mini-week-cycle span:nth-child(5){animation-delay:1.2s;}
.mini-week-cycle span:nth-child(6){animation-delay:1.5s;}
.mini-week-cycle span:nth-child(7){animation-delay:1.8s;}
@keyframes miniWeekCycle{
  0%,82%,100%{background:var(--line);transform:scale(1);}
  10%{background:var(--orange);transform:scale(1.5);}
}

/* step 2: a rolled mat unrolling — "arrive and unroll your mat" */
.mini-mat{
  width:76px;height:22px;border-radius:8px;
  background:repeating-linear-gradient(90deg,var(--orange) 0 7px,#c98f7a 7px 14px);
  box-shadow:0 10px 20px rgba(34,26,22,.14);
  transform-origin:left center;
  animation:miniMatUnroll 3.2s ease-in-out infinite;
}
@keyframes miniMatUnroll{
  0%,12%{transform:scaleX(.18);}
  55%,100%{transform:scaleX(1);}
}

@media (prefers-reduced-motion:reduce){
  .mini-week span.is-lit,.mini-week-cycle span,.mini-mat{animation:none;}
  .mini-mat{transform:scaleX(1);}
}

/* ---------- CONTACTS PAGE: map + info cards, booking form below ---------- */
.contacts-layout{
  display:grid;grid-template-columns:1.3fr 1fr;gap:24px;
  max-width:1180px;margin:0 auto;align-items:stretch;
}
.contacts-map-card{display:flex;flex-direction:column;}
.contacts-map-frame{flex:1;margin-top:0;aspect-ratio:auto;min-height:340px;}
.contacts-info{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.contacts-info-card h3{font-size:16px;margin-bottom:8px;}
.contacts-info-card p{color:var(--near-black);font-size:15px;}
.contacts-placeholder-tag{
  display:inline-block;margin-left:6px;font-size:11px;color:var(--gray);
  background:var(--panel-bg);border:1px dashed var(--line);border-radius:100px;padding:2px 9px;
}
.contacts-social-link{color:var(--orange);font-weight:500;}
.contacts-social-link:hover{text-decoration:underline;}

@media (max-width:900px){
  .contacts-layout{grid-template-columns:1fr;}
  .contacts-info{grid-template-columns:1fr 1fr;}
  .contacts-map-frame{min-height:260px;}
}
@media (max-width:600px){
  .contacts-info{grid-template-columns:1fr;}
}

/* ---------- CLIENT FEEDBACK ROUND (Olga) ---------- */
/* soft terracotta for the calendar instead of gold; the studio's terracotta
   outfit in the photos is the colour cue */
:root{--terracotta:#B06C55;--terracotta-soft:rgba(176,108,85,.14);}

/* hero caption: plain subtitle instead of the pencil circle + handwritten note */
.tags-label{
  position:relative;z-index:1;text-align:center;margin:0 0 14px;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);
}
.statement-tags-wrap{padding:0 14px;}

/* section headings: smaller, fully visible, centered; no fade mask and no
   cards sinking over them */
.works-watermark,.pricing-watermark,.gallery-watermark{
  font-size:clamp(40px,6vw,92px);text-align:center;
  -webkit-mask-image:none;mask-image:none;
}
.process-watermark{-webkit-mask-image:none;mask-image:none;}
.works-watermark{margin-bottom:8px;}

/* "Align": every card straight, every picture the same shape */
.works-card:nth-child(n),.process-step:nth-child(n){transform:none;}
.works-card-media{aspect-ratio:4/5;}
.works-card-media video,.works-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.works-cta-wrap{margin-top:56px;}
.week-day:nth-child(n){transform:none;}
.week-day.has-class:hover{transform:translateY(-4px);}
.week-panel{transform:none;}

/* calendar: terracotta instead of gold */
.week-day.has-class{border-color:rgba(176,108,85,.45);}
.week-day.has-class .week-day-dot{background:var(--terracotta);}
.week-day.has-class:focus-visible{outline-color:var(--terracotta);}
.week-day-icon,.week-panel-icon,.week-panel-time{color:var(--terracotta);}
.week-day.is-open{background:var(--terracotta);border-color:var(--terracotta);transform:none;box-shadow:0 18px 34px rgba(176,108,85,.26);}
.week-day.is-open .week-day-icon{color:#fff;}
.week-panel .btn-pill.dark{background:var(--terracotta);}

.class-details-sub a.inline-link{color:var(--terracotta);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.class-details-sub{line-height:1.6;}

/* pricing */
.pricing .eyebrow{max-width:480px;text-align:center;margin-left:auto;margin-right:auto;}
.pricing-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  max-width:1180px;margin:40px auto 0;
}
.price-plan{display:flex;flex-direction:column;gap:6px;}
.price-plan h3{font-size:19px;margin-top:2px;}
.price-amount{font-family:'Jost',sans-serif;font-size:56px;line-height:1.05;color:var(--black);margin:10px 0 4px;}
.price-note{color:var(--gray);font-size:14px;line-height:1.6;margin-bottom:18px;flex:1;}
.price-plan-cta{align-self:flex-start;}
.price-plan-featured{background:var(--black);color:#fff;}
.price-plan-featured h3,.price-plan-featured .price-amount{color:#fff;}
.price-plan-featured .price-note{color:rgba(255,255,255,.65);}
.price-plan-featured .works-card-tag{color:#e3b27f;}
@media (max-width:1000px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.pricing-grid{grid-template-columns:1fr;max-width:420px;}}

/* gallery */
.gallery .eyebrow{max-width:480px;text-align:center;margin-left:auto;margin-right:auto;}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  max-width:1180px;margin:40px auto 0;
}
.gallery-grid figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--panel-bg);}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.gallery-grid figure:hover img{transform:scale(1.03);}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;max-width:420px;}}

/* blog thumbnails + contacts portrait */
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.contacts-photo{flex:0 1 340px;margin:0;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;align-self:center;}
.contacts-photo img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:900px){.contacts-photo{flex:1 1 100%;max-width:420px;}}

/* ---------- TYPE: Jost — light, airy geometric sans (full Cyrillic) ---------- */
h1,h2,h3,h4,.statement-text,.price-amount,.logo-word{font-family:'Jost',sans-serif;}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.005em;}
.section-watermark,.contact-watermark,.section-title{font-weight:300;letter-spacing:-.02em;}
.statement-text{font-weight:300;letter-spacing:0;line-height:1.3;}
.price-amount{font-weight:300;letter-spacing:-.02em;}
.works-card h3,.blog-card h3,.price-plan h3,.week-panel h4{font-weight:400;font-size:1.12em;}
body{font-weight:400;letter-spacing:.005em;line-height:1.55;}
.price-plan .price-amount{font-size:60px;line-height:1.05;color:var(--black);margin:10px 0 4px;}
.price-plan-featured .price-amount{color:#fff;}

/* =====================================================================
   DESIGN PASS — calm, flat, aligned. No glows, no gradient text, no tilts.
   Gold stays only in the logo mark; UI accent is terracotta (AA on white).
   ===================================================================== */
:root{
  --orange:#A65E47;            /* UI accent: buttons, tags, links */
  --terracotta:#A65E47;
  --terracotta-soft:rgba(166,94,71,.12);
  --accent-on-dark:#E0A088;    /* same hue, readable on near-black */
  --gold:#C08A3E;
  --gray:#665a52;              /* body-secondary text, ~5.6:1 on page bg */
  --line:#e8ddd2;
}
.brandmark .bm-gold{stroke:var(--gold);}

/* glows / orbs / spotlight -> off */
.page-hero-glow,.contact-glow,.footer-glow,.why-us-glow{display:none;}
.why-card::before{display:none;}
.page-hero,.contact,.footer{background:#201a17;}

/* cards: straight, quiet shadow, small lift on hover */
.why-card{box-shadow:0 1px 2px rgba(34,26,22,.04),0 12px 28px rgba(34,26,22,.06);}
.why-tall,.why-stat,.why-small,.why-wide{transform:none;}
.why-card:hover{transform:translateY(-4px);border-color:rgba(166,94,71,.35);box-shadow:0 1px 2px rgba(34,26,22,.05),0 18px 36px rgba(34,26,22,.1);}
.process-form-card,.process-form-card:hover{transform:none;}

/* gradient-clipped heading -> plain white */
.contact-watermark{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#fff;color:#fff;font-weight:300;}

/* hero script word: white, readable on any frame */
.statement-hello{color:#fff;}

/* dark surfaces: lighter accent so links/hover stay visible */
.nav-links a:hover,.contact-links a:hover,.footer-credit a:hover,#backToTop,.mobile-menu-links a:active{color:var(--accent-on-dark);}
#backToTop:hover{color:#fff;}
.urgency-check:has(input:checked){border-color:var(--accent-on-dark);background:rgba(224,160,136,.16);color:#fff;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--accent-on-dark);outline:none;}
.contact-links h5{color:rgba(255,255,255,.62);}
.contact .section-desc{color:rgba(255,255,255,.72);}
.page-hero-intro .eyebrow{color:rgba(255,255,255,.7);}
.page-hero-intro .section-desc{color:rgba(255,255,255,.75);}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.5);}

/* light surfaces: darker accent text */
.faq-q span{color:var(--orange);}
.contacts-social-link{color:var(--orange);}
.inline-link{color:var(--orange);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.inline-link:hover{color:var(--near-black);}

/* ---------- header: 6 nav items ---------- */
.nav-links{gap:34px;font-size:14px;}
.nav-links a{position:relative;padding:6px 0;}
.nav-links a[aria-current="page"]{opacity:1;}
.nav-links a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
}
@media (max-width:1180px){
  .nav-links,.lang-switch,.header-cta{display:none;}
  .menu-toggle{display:flex;}
}

/* ---------- section rhythm ---------- */
.section-heading{font-size:clamp(32px,4vw,52px);font-weight:300;letter-spacing:-.02em;line-height:1.1;text-align:center;margin-bottom:12px;}
.class-details-head{text-align:center;margin-bottom:32px;}
.class-details-head p{color:var(--gray);}
.schedule-section{padding-top:72px;padding-bottom:72px;}
.faq-section{max-width:calc(880px + 2 * var(--gutter));padding-top:40px;padding-bottom:0;}
.faq-section + .faq-section{padding-top:48px;}
.faq-section:first-of-type{padding-top:72px;}
.faq-group-title{font-size:26px;font-weight:400;margin-bottom:20px;}
.faq-section .eyebrow{text-align:center;}
.faq-list{max-width:880px;}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 26px;transition:border-color .2s ease;}
.faq-item:hover,.faq-item.active{border-color:rgba(166,94,71,.4);}
.faq-q{padding:22px 0;font-size:17px;line-height:1.4;}
.faq-q:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:8px;}
.faq-a{transition:max-height .35s ease;}
.faq-a p{color:var(--gray);font-size:15.5px;line-height:1.65;padding-bottom:0;}
.faq-a p:last-child{padding-bottom:24px;}
.faq-a p + p{margin-top:12px;}
.faq-more{margin-top:28px;}
.faq-ask{padding-bottom:96px;}
.faq-ask-card{max-width:880px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;}
.faq-ask-card h3{margin-bottom:4px;}
.faq-ask-card > div{flex:1 1 320px;}
.faq-ask-card .btn-pill{flex-shrink:0;}

/* ---------- pricing page ---------- */
.pricing-page{padding-top:72px;padding-bottom:40px;}
.pricing-page .pricing-grid{margin-top:0;}
.price-plan{padding:30px;}
.price-plan-cta{margin-top:auto;}
.price-note{flex:1 1 auto;margin-bottom:22px;}

/* ---------- gift certificate: cards peeking out of envelopes ---------- */
.gift-section{padding-top:56px;padding-bottom:56px;}
.gift-head{text-align:center;max-width:640px;margin:0 auto;}
.gift-title{font-size:clamp(32px,4vw,52px);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin-bottom:14px;}
.gift-lead{color:var(--gray);line-height:1.65;}
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1080px;margin:28px auto 0;}
.gift-item{display:flex;flex-direction:column;align-items:stretch;}
.envelope{position:relative;aspect-ratio:3/2;margin-top:72px;}
.envelope-back{position:absolute;inset:0;border-radius:8px;background:#ddc6b6;box-shadow:0 14px 30px rgba(34,26,22,.14);}
.envelope-card{
  position:absolute;left:9%;right:9%;top:-24%;height:80%;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding-top:7%;
  background:#fffcfa;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 4px 14px rgba(34,26,22,.1);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.envelope-card-brand{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gray);}
.envelope-card-tag{font-family:'Jost',sans-serif;font-size:14px;color:var(--near-black);margin-bottom:6px;}
.envelope-card-name{font-family:'Jost',sans-serif;font-size:22px;font-weight:400;line-height:1.15;}
.envelope-card-price{font-family:'Jost',sans-serif;font-size:30px;font-weight:300;line-height:1.1;color:var(--orange);}
.envelope-pocket{position:absolute;inset:0;z-index:2;pointer-events:none;filter:drop-shadow(0 -1px 1px rgba(34,26,22,.16));}
.envelope-pocket::before{
  content:'';position:absolute;inset:0;border-radius:8px;background:#ecd9ca;
  clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);
}
.envelope:hover .envelope-card{transform:translateY(-12%);}
.gift-note{text-align:center;color:var(--gray);font-size:14.5px;line-height:1.55;margin-top:20px;}
.gift-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px;text-align:center;}
.gift-cta p{color:var(--gray);font-size:14.5px;max-width:420px;}
@media (max-width:900px){.gift-grid{grid-template-columns:1fr;max-width:380px;gap:8px;}}

/* ---------- forms: select + field label ---------- */
.field{display:flex;flex-direction:column;gap:8px;}
.field > span{font-size:13px;color:rgba(255,255,255,.7);}
.contact-form select{
  border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 44px 16px 16px;
  font-family:inherit;font-size:15px;background-color:rgba(255,255,255,.05);color:#fff;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.contact-form select option{color:#201a17;background:#fff;}
.contact-form input,.contact-form textarea{width:100%;}
.booking .contact-content{padding-top:96px;}

/* ---------- booking aside, sub-page rhythm ---------- */
.booking .contact-content{gap:72px;justify-content:space-between;align-items:flex-start;}
.booking .contact-main{flex:1 1 460px;max-width:560px;}
.booking-aside{flex:1 1 320px;max-width:420px;padding-top:34px;}
.booking-aside h4{font-family:'Jost',sans-serif;font-size:20px;font-weight:400;margin-bottom:22px;color:#fff;}
.booking-aside ul{display:flex;flex-direction:column;gap:0;}
.booking-aside li{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-top:1px solid rgba(255,255,255,.14);}
.booking-aside li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.booking-aside strong{font-weight:500;font-size:16px;color:#fff;}
.booking-aside span{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72);}
.inline-link.on-dark{color:var(--accent-on-dark);}
.inline-link.on-dark:hover{color:#fff;}
.booking .contact-watermark,#form .contact-watermark{font-size:clamp(44px,7vw,96px);margin-bottom:12px;}
.booking .contact-subtitle,#form .contact-subtitle{font-size:clamp(22px,2.6vw,32px);font-weight:300;}
.page-hero-intro{padding-top:84px;}
.page-hero + .faq-section{padding-top:64px;}
@media (max-width:900px){.booking .contact-content{gap:40px;}.booking-aside{padding-top:0;max-width:none;}}

/* ---------- alignment fixes ---------- */
/* "Наш подход": heading stays fully visible, grid no longer slides over it */
.why-us-watermark{font-size:clamp(40px,6vw,92px);-webkit-mask-image:none;mask-image:none;margin-bottom:8px;}
.why-grid{grid-template-columns:1.05fr 1fr 1fr;margin-top:32px;}
.why-stages{gap:20px;justify-content:space-between;}
.why-stage-label{font-size:13px;white-space:nowrap;}
.why-steps{flex-wrap:nowrap;gap:8px;}
.why-step{min-width:78px;}
.why-wide-text{max-width:320px;}
@keyframes whyStagePulse{
  0%,100%{background:var(--line);transform:scale(1);box-shadow:none;}
  35%{background:var(--orange);transform:scale(1.5);box-shadow:0 0 0 8px rgba(166,94,71,.18);}
}
@media (max-width:900px){.why-grid{grid-template-columns:1fr;}.why-steps{flex-wrap:wrap;}}

/* one primary-button colour, same width for calendar and panel */
.works-cta{background:var(--orange);}
.week-calendar,.week-panels{max-width:880px;}
.week-panel p{max-width:72ch;}
.schedule-more{margin:8px auto 40px;}
.class-details-sub{margin-bottom:20px;}
.contact-subtitle{line-height:1.25;}
.why-speed-lines{display:none;}
#form .contact-content{justify-content:center;align-items:center;gap:72px;}
#form .contact-main{flex:0 1 560px !important;}
.contact-form input,.contact-form textarea,.contact-form select{box-sizing:border-box;max-width:100%;}
.logo-word{white-space:nowrap;}
@media (max-width:1180px){
  .site-header{grid-template-columns:1fr auto;}
}
@media (max-width:640px){
  .week-calendar{grid-template-columns:repeat(3,1fr);gap:10px;}
  .week-day:not(.has-class){display:none;}
  .week-day{min-height:112px;padding:16px 6px;border-radius:14px;}
  .week-day-class{font-size:12.5px;}
  .week-day-time{font-size:11px;}
  .week-day-icon{width:20px;height:20px;}
}

/* =====================================================================
   ROUND 3 — one typographic system, clear section rhythm, readable hero
   Scale: eyebrow 12 / small 14.5 / body 16 / card title 21 / H2 clamp(34,4.4vw,60)
   ===================================================================== */
:root{
  --fs-h2:clamp(34px,4.4vw,60px);
  --band:#f1e9df;
}

/* ---------- HERO: video stays sharp, a dark scrim makes text readable ---------- */
.hero{background:#201a17;}
.hero::after{display:none;}
.hero-bg-blur{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:linear-gradient(180deg,rgba(26,20,18,.62) 0%,rgba(26,20,18,.5) 45%,rgba(26,20,18,.72) 100%);
}
.statement{max-width:980px;}
.statement-hello{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin:0 0 26px;text-shadow:none;
}
.statement-text{
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(30px,3.7vw,54px);line-height:1.22;letter-spacing:-.012em;
  color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.28);
}
.statement-text .word{color:rgba(255,255,255,.5);}
.statement-practices{
  margin:48px auto 0;padding-top:28px;max-width:780px;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.practices-label{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin:0;
}
.practices-list{display:flex;flex-wrap:wrap;justify-content:center;row-gap:10px;}
.practices-list li{
  position:relative;padding:0 20px;
  font-family:'Jost',sans-serif;font-weight:300;font-size:19px;line-height:1.3;color:#fff;
}
.practices-list li + li::before{
  content:'';position:absolute;left:0;top:50%;width:1px;height:14px;transform:translateY(-50%);
  background:rgba(255,255,255,.4);
}
.hero-location{color:rgba(255,255,255,.9);}
.hero-news-card{
  background:rgba(26,20,18,.55);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;
}
@media (max-width:700px){
  .practices-list li{padding:0 12px;font-size:17px;}
  .statement-practices{margin-top:36px;}
}

/* ---------- headings + eyebrows: one style everywhere ---------- */
.eyebrow{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);margin:0 0 14px;
}
main section:not(.page-hero) .eyebrow{text-align:center;max-width:none;}
.contact .eyebrow{color:rgba(255,255,255,.65);}
.section-watermark,.works-watermark,.pricing-watermark,.gallery-watermark,.why-us-watermark,.process-watermark,
.section-heading,.gift-title{
  font-family:'Jost',sans-serif;font-size:var(--fs-h2);font-weight:300;line-height:1.1;letter-spacing:-.02em;
  text-align:center;margin:0 0 16px;color:var(--near-black);
  -webkit-mask-image:none;mask-image:none;
}
.contact-watermark,.booking .contact-watermark,#form .contact-watermark{font-size:var(--fs-h2);font-weight:300;line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;}
.page-hero-intro .section-title{font-size:var(--fs-h2);font-weight:300;letter-spacing:-.02em;line-height:1.1;}
.section-lead{max-width:600px;margin:0 auto 8px;text-align:center;color:var(--gray);font-size:16px;line-height:1.65;}
.gift-lead,.class-details-head p{font-size:16px;line-height:1.65;color:var(--gray);}
.class-details-head{margin-bottom:36px;}
.class-details-head .section-heading{margin-bottom:12px;}

/* card titles and copy share one size */
.why-card h3,.works-card h3,.blog-card h3,.price-plan h3,.week-panel h4,.faq-ask-card h3,.process-step h3,.contacts-info-card h3{
  font-family:'Jost',sans-serif;font-size:21px;font-weight:400;line-height:1.25;margin:0 0 8px;
}
.why-card p,.price-note,.gift-note,.blog-card p,.process-step p,.works-card p{font-size:15px;line-height:1.6;}
.works-card-tag,.price-plan .works-card-tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}

/* ---------- section rhythm: alternating bands so every block has an edge ---------- */
.band-alt{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);}
.why-us.band-alt{background:var(--band);}
.hero,.works,.schedule-band,.pricing,.why-us,.process,.gallery,.contact{scroll-margin-top:0;}
section[id]{scroll-margin-top:0;}
html.snap{scroll-snap-type:y proximity;}
html.snap .hero,html.snap .works,html.snap .schedule-band,html.snap .pricing,html.snap .why-us,
html.snap .process,html.snap .gallery,html.snap .contact{scroll-snap-align:start;}
@media (max-width:900px),(max-height:700px){html.snap{scroll-snap-type:none;}}
.schedule-band,.pricing,.process,.gallery,.why-us{padding-top:104px;padding-bottom:104px;}
.works{padding-top:104px;padding-bottom:104px;}

/* ---------- pricing cards: one scale ---------- */
.price-plan{padding:30px;gap:0;}
.price-plan .works-card-tag{margin-bottom:14px;}
.price-plan h3{margin-bottom:18px;}
.price-plan .price-amount{font-family:'Jost',sans-serif;font-size:46px;font-weight:300;line-height:1;letter-spacing:-.02em;margin:0 0 14px;}
.price-note{margin-bottom:24px;}
.pricing .faq-more,.schedule-band .faq-more{margin-top:32px;}

/* ---------- gallery: two endless rows, opposite directions ---------- */
.marquee{margin:44px calc(-1 * var(--gutter)) 0;overflow:hidden;display:flex;flex-direction:column;gap:20px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.marquee-row{overflow:hidden;}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:marqueeLeft 46s linear infinite;}
.marquee-right .marquee-track{animation-name:marqueeRight;animation-duration:40s;}
.marquee-row:hover .marquee-track{animation-play-state:paused;}
.marquee-track figure{flex:0 0 auto;width:300px;height:375px;margin:0 20px 0 0;border-radius:var(--radius-lg);overflow:hidden;background:var(--panel-bg);}
.marquee-wide figure{width:440px;height:375px;}
.marquee-track img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes marqueeLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes marqueeRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media (max-width:700px){
  .marquee-track figure{width:220px;height:275px;}
  .marquee-wide figure{width:320px;height:275px;}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;}
  .marquee-row{overflow-x:auto;}
  .marquee-track figure[aria-hidden="true"]{display:none;}
}

/* ---------- footer ---------- */
.footer{background:#201a17;}
.footer-inner{padding-top:0;}
.footer-top{
  max-width:1920px;margin:0 auto;padding:72px var(--gutter) 56px;
  display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:48px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-brand .logo{margin-bottom:20px;}
.footer-brand p{color:rgba(255,255,255,.72);max-width:340px;line-height:1.65;font-size:15px;margin:0 0 26px;}
.footer-col h5{
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 20px;
}
.footer-col a{display:block;font-size:15px;line-height:1.4;color:rgba(255,255,255,.9);margin-bottom:14px;transition:color .2s ease;}
.footer-col a:hover{color:var(--accent-on-dark);}
.footer-col small{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.55);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:22px var(--gutter);align-items:center;color:rgba(255,255,255,.62);}
.footer-credit{padding-top:0;color:rgba(255,255,255,.45);}
@media (max-width:1000px){.footer-top{grid-template-columns:1fr 1fr;gap:40px;}.footer-brand{grid-column:1 / -1;}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;padding:56px var(--gutter) 40px;}}
.statement-practices{max-width:1000px;}
.practices-list li{padding:0 18px;font-size:18px;}
@media (max-width:1100px){
  .practices-list{column-gap:8px;}
  .practices-list li{padding:0 12px;}
  .practices-list li + li::before{display:none;}
  .practices-list li{padding:0 12px;font-size:17px;}
}
@media (max-width:700px){
  .hero-bottom-row{flex-direction:column;align-items:stretch;gap:14px;padding:0 var(--gutter) 28px;}
  .hero-location{white-space:normal;}
  .hero-news-card{max-width:none;width:100%;border-radius:22px;}
}

/* ---------- hero: light blur, two-level headline ---------- */
.hero-bg-blur{
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  background:linear-gradient(180deg,rgba(26,20,18,.58) 0%,rgba(26,20,18,.46) 45%,rgba(26,20,18,.68) 100%);
}
.statement{max-width:1100px;}
.statement-text{font-size:inherit;}
.statement-main{
  display:block;max-width:980px;margin:0 auto;
  font-family:'Jost',sans-serif;font-weight:500;
  font-size:clamp(30px,3.7vw,54px);line-height:1.16;letter-spacing:-.015em;
}
.statement-sub{
  display:block;max-width:640px;margin:22px auto 0;
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(17px,1.55vw,22px);line-height:1.5;letter-spacing:0;
}
.statement-practices{max-width:none;width:max-content;max-width:100%;}

/* full-width dark blocks (hero, page banners, form, footer) end in straight edges */
.hero,.page-hero,.contact,.footer{border-radius:0;}

/* =====================================================================
   AIRY PASS — sub-pages get a light header and light forms; the only dark
   masses left are the home hero (video) and the footer.
   ===================================================================== */

/* ---------- sub-page header + title: light ---------- */
.page-hero{
  background:var(--page-bg);color:var(--near-black);
  border-bottom:1px solid var(--line);padding-bottom:40px;
}
.page-hero .logo-word{color:var(--near-black);text-shadow:none;}
.page-hero .brandmark{color:var(--near-black);}
.page-hero .nav-links{color:var(--near-black);}
.page-hero .nav-links a{opacity:.82;}
.page-hero .nav-links a:hover{color:var(--orange);opacity:1;}
.page-hero .lang-switch{
  background:#fff;color:var(--near-black);border:1px solid var(--line);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.page-hero .menu-toggle{background:#fff;border:1px solid var(--line);}
.page-hero .menu-toggle span{background:var(--near-black);}
.page-hero-intro{padding-top:64px;}
.page-hero-intro .eyebrow{color:var(--gray);}
.page-hero-intro .section-title{color:var(--near-black);}
.page-hero-intro .section-desc{color:var(--gray);margin-bottom:0;}
.page-hero + section{padding-top:56px;}
.page-hero + .faq-section{padding-top:56px;}
.page-hero + .pricing-page{padding-top:56px;}

/* ---------- forms: light card layout instead of a dark slab ---------- */
.contact{background:var(--page-bg);color:var(--near-black);}
.contact .eyebrow{color:var(--gray);}
.contact-watermark,.booking .contact-watermark,#form .contact-watermark{
  background:none;-webkit-text-fill-color:currentColor;color:var(--near-black);
}
.contact-subtitle{color:var(--near-black);}
.contact .section-desc{color:var(--gray);}
.contact-form input,.contact-form textarea,.contact-form select{
  background-color:#fff;border:1px solid var(--line);color:var(--near-black);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#9a8d84;}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
  border-color:var(--orange);background-color:#fff;
}
.contact-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c140c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.field > span{color:var(--gray);}
.urgency-check{background:#fff;border:1px solid var(--line);color:var(--gray);}
.urgency-check:has(input:checked){border-color:var(--orange);background:rgba(166,94,71,.1);color:var(--near-black);}
.booking-aside h4{color:var(--near-black);}
.booking-aside li{border-top:1px solid var(--line);}
.booking-aside li:last-child{border-bottom:1px solid var(--line);}
.booking-aside strong{color:var(--near-black);}
.booking-aside span{color:var(--gray);}
.inline-link.on-dark{color:var(--orange);}
.inline-link.on-dark:hover{color:var(--near-black);}
.booking .contact-content{padding-top:88px;padding-bottom:96px;}
#form .contact-content{padding-top:56px;padding-bottom:96px;}

/* index: gallery band -> light form -> dark footer */
.footer{border-top:1px solid rgba(255,255,255,.06);}

/* =====================================================================
   ONE GRID — header, titles, cards and footer share a single 1180px
   container; wider screens just add equal margins on both sides.
   ===================================================================== */
:root{--container:1180px;--gutter:max(64px,calc((100vw - var(--container)) / 2));}
@media (max-width:700px){:root{--gutter:24px;}}

/* sub-page title: centred, same axis as every section heading below it */
.page-hero-intro{max-width:none;margin:0 auto;padding:56px var(--gutter) 0;text-align:center;}
.page-hero-intro .section-desc{max-width:560px;margin:14px auto 0;}
.page-hero{padding-bottom:48px;}

/* contacts: map + info cards as one tidy block */
.contacts-layout{max-width:var(--container);}
.contacts-map-frame{min-height:300px;}
.contacts-info-card{display:flex;flex-direction:column;justify-content:flex-start;}
.works .blog-grid,.works .contacts-layout{max-width:var(--container);margin-left:auto;margin-right:auto;}

/* ---------- hero: practices pinned to the bottom ---------- */
.hero-practices{
  position:relative;z-index:1;flex:0 0 auto;
  width:min(100% - 2 * var(--gutter),1000px);margin:0 auto;padding:24px 0 52px;
  border-top:1px solid rgba(255,255,255,.22);
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
}
.hero-practices .practices-list{justify-content:center;}
@media (max-width:700px){.hero-practices{width:calc(100% - 48px);padding-bottom:36px;}}

/* =====================================================================
   HEADER v2 — fixed; turns into a semi-transparent glass capsule on scroll.
   Language menu, mobile sheet with icons, blog article cards.
   ===================================================================== */
.site-header{
  --fg:#fff;
  position:fixed;top:0;left:0;right:0;z-index:400;
  width:100%;max-width:none;margin:0 auto;
  padding:22px var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  border:1px solid transparent;border-radius:100px;
  transition:top .35s ease,width .35s ease,padding .35s ease,background-color .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.page-hero .site-header{--fg:var(--near-black);}
.site-header.is-scrolled{
  --fg:var(--near-black);
  top:14px;width:min(calc(100% - 32px),var(--container));
  padding:9px 12px 9px 24px;
  background-color:rgba(252,249,244,.68);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 12px 32px rgba(34,26,22,.12);
}
.site-header .logo-word{color:var(--fg);text-shadow:none;}
.site-header .brandmark{color:var(--fg);}
.site-header .nav-links{color:var(--fg);gap:34px;}
.site-header .nav-links a{position:relative;padding:6px 0;opacity:.9;}
.site-header .nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.site-header .nav-links a:hover{color:inherit;opacity:1;}
.site-header .nav-links a:hover::after,.site-header .nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.site-header .nav-links a[aria-current="page"]{opacity:1;}
.site-header .header-cta{background:var(--orange);color:#fff;font-size:13px;font-weight:500;padding:11px 22px;border-radius:100px;}
.site-header .header-cta:hover{background:#8f4e3a;}
.site-header.is-scrolled .header-cta{padding:10px 20px;}

/* language menu */
.lang-menu{position:relative;}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 12px;border-radius:100px;cursor:pointer;
  border:1px solid rgba(128,128,128,.4);border:1px solid color-mix(in srgb,var(--fg) 30%,transparent);
  background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg);
  font:600 13px/1 'Inter',sans-serif;transition:background-color .2s ease;
}
.lang-btn:hover{background:color-mix(in srgb,var(--fg) 14%,transparent);}
.lang-btn svg{width:16px;height:16px;flex-shrink:0;}
.lang-btn svg:last-child{width:14px;height:14px;transition:transform .2s ease;}
.lang-menu.open .lang-btn svg:last-child{transform:rotate(180deg);}
.lang-list{
  position:absolute;right:0;top:calc(100% + 12px);min-width:176px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(34,26,22,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.lang-menu.open .lang-list{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease;}
.lang-list a{
  display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:12px;
  font-family:'Jost',sans-serif;font-size:17px;color:var(--near-black);
}
.lang-list a:hover{background:var(--page-bg);}
.lang-list a.is-current{font-weight:500;}
.lang-list a.is-current::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--orange);}

/* burger */
.menu-toggle{
  display:none;width:44px;height:44px;border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid rgba(128,128,128,.4);border:1px solid color-mix(in srgb,var(--fg) 30%,transparent);
  background:color-mix(in srgb,var(--fg) 7%,transparent);
}
.site-header .menu-toggle span{background:var(--fg);}
@media (max-width:1180px){
  .site-header{grid-template-columns:1fr auto;}
  .nav-links,.header-cta{display:none;}
  .site-header .nav-links,.site-header .header-cta{display:none;}
  .menu-toggle{display:flex;}
  .header-actions{gap:10px;}
}
@media (max-width:420px){.logo-word{font-size:16px;}.lang-btn{padding:10px;}}

/* sheet that opens from the burger */
.mobile-menu{
  position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
  background:var(--page-bg);-webkit-backdrop-filter:none;backdrop-filter:none;
  padding:104px max(24px,var(--gutter)) 28px;overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease;}
body.menu-open .site-header{
  --fg:var(--near-black);top:0;width:100%;padding:18px var(--gutter);
  background-color:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.mm-links{display:flex;flex-direction:column;margin-top:4px;}
.mm-links a{
  display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;
}
.mobile-menu.open .mm-links a{opacity:1;transform:none;}
.mobile-menu.open .mm-links a:nth-child(1){transition-delay:.06s;}
.mobile-menu.open .mm-links a:nth-child(2){transition-delay:.11s;}
.mobile-menu.open .mm-links a:nth-child(3){transition-delay:.16s;}
.mobile-menu.open .mm-links a:nth-child(4){transition-delay:.21s;}
.mobile-menu.open .mm-links a:nth-child(5){transition-delay:.26s;}
.mobile-menu.open .mm-links a:nth-child(6){transition-delay:.31s;}
.mm-ico{
  flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--orange);
}
.mm-ico svg{width:22px;height:22px;}
.mm-label{flex:1;font-family:'Jost',sans-serif;font-weight:300;font-size:28px;line-height:1.1;color:var(--near-black);}
.mm-arrow{color:var(--orange);font-size:20px;}
.mm-links a[aria-current="page"] .mm-ico{background:var(--orange);border-color:var(--orange);color:#fff;}
.mm-bottom{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:16px;}
.mm-lang{display:flex;gap:8px;flex-wrap:wrap;}
.mm-chip{padding:9px 16px;border-radius:100px;border:1px solid var(--line);background:#fff;font:500 14px/1 'Inter',sans-serif;color:var(--near-black);}
.mm-chip.is-current{background:var(--near-black);border-color:var(--near-black);color:#fff;}
.mm-cta{width:100%;justify-content:center;}
.mm-address{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:var(--gray);}
.mm-address svg{width:18px;height:18px;color:var(--orange);flex-shrink:0;}

/* content below a fixed header */
.hero{padding-top:90px;}
.page-hero-intro{padding-top:150px;}
html{scroll-padding-top:96px;}
html.snap{scroll-padding-top:0;}

/* per-language "today" ribbon in the calendar */
html[lang="et"] .week-day.is-today::before{content:'Täna';}
html[lang="en"] .week-day.is-today::before{content:'Today';}

/* ---------- blog: article cards ---------- */
.blog-list{padding-bottom:56px;}
.alt-articles{padding-top:96px;padding-bottom:104px;display:block;}
.blog-article{
  max-width:800px;margin:0 auto 32px;padding:56px 64px;scroll-margin-top:110px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(34,26,22,.04),0 12px 28px rgba(34,26,22,.06);
}
.blog-article:last-child{margin-bottom:0;}
.article-meta{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.article-tag{
  font:600 12px/1 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);background:rgba(166,94,71,.1);padding:7px 12px;border-radius:100px;
}
.article-date{font-size:13px;color:var(--gray);}
.blog-article h2{
  font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-.015em;
  margin:0 0 28px;text-align:left;color:var(--near-black);
}
.blog-article p{font-size:17px;line-height:1.75;color:var(--near-black);margin:0 0 18px;max-width:64ch;}
.blog-article p strong{font-weight:600;}
.blog-article p:last-of-type{margin-bottom:0;}
.article-back{display:inline-block;margin-top:34px;font-size:14px;font-weight:500;color:var(--orange);}
.article-back:hover{color:var(--near-black);}
@media (max-width:700px){.blog-article{padding:32px 24px;}.blog-article p{font-size:16px;}}

/* =====================================================================
   v8 — keeps the big Jost type, saturated clay accent and clay pricing band;
   cards go back to soft rounded white; card text gets ordered rows + live icons.
   ===================================================================== */
:root{
  --orange:#B0523A;--terracotta:#B0523A;--clay:#B0523A;--clay-deep:#8F3F2A;
  --terracotta-soft:rgba(176,82,58,.12);
  --accent-on-dark:#F0A98E;
  --ink:#201a17;
  --fs-h2:clamp(46px,7.2vw,108px);
}
.site-header .header-cta:hover,.header-cta:hover{background:var(--clay-deep);}

/* ---------- type ---------- */
.section-watermark,.works-watermark,.pricing-watermark,.gallery-watermark,.why-us-watermark,.process-watermark,
.section-heading,.gift-title,.page-hero-intro .section-title,
.contact-watermark,.booking .contact-watermark,#form .contact-watermark{
  font-weight:400;letter-spacing:-.04em;line-height:.96;color:var(--ink);
}
.section-heading,.gift-title{font-size:clamp(38px,5.2vw,72px);}
.page-hero-intro .section-title{font-size:clamp(50px,7.6vw,116px);}
.section-lead,.section-desc,.gift-lead{font-size:18px;line-height:1.6;}
.eyebrow{color:var(--clay);letter-spacing:.2em;}
.statement-main{font-size:clamp(34px,4.6vw,68px);font-weight:500;letter-spacing:-.025em;line-height:1.08;}
.statement-sub{font-size:clamp(18px,1.7vw,24px);}

/* ---------- buttons ---------- */
.btn-pill,.works-cta{background:var(--clay);color:#fff;border:0;}
.btn-pill:hover,.works-cta:hover{background:var(--clay-deep);}
.price-plan .btn-pill{background:var(--ink);}
.price-plan .btn-pill:hover{background:var(--clay-deep);}
.price-plan-featured .btn-pill{background:var(--clay);}

/* ---------- section padding ---------- */
.schedule-band,.pricing,.process,.gallery,.why-us,.works{padding-top:128px;padding-bottom:128px;}
@media (max-width:900px){
  .schedule-band,.pricing,.process,.gallery,.why-us,.works{padding-top:84px;padding-bottom:84px;}
}

/* ---------- card text: ordered rows with live icons ---------- */
.card-row{display:flex;gap:14px;align-items:flex-start;}
.card-row + .card-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.card-ico,.plan-ico{
  flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--terracotta-soft);color:var(--clay);
}
.card-ico{width:40px;height:40px;}
.plan-ico{width:52px;height:52px;}
.card-ico svg,.plan-ico svg{
  width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.plan-ico svg{width:30px;height:30px;}
.card-row p{margin:0;flex:1;align-self:center;}

/* classes */
.works-card h3{font-size:25px;margin:8px 0 16px;}
.card-row-time{align-items:center;}
.card-row-time .card-ico{background:var(--clay);color:#fff;}
.card-row-time .works-card-tag{font-size:13px;letter-spacing:.08em;color:var(--ink);}
.card-row-text p{color:var(--gray);font-size:15px;line-height:1.6;}

/* pricing */
.plan-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.plan-head .works-card-tag{margin:0;}
.price-plan{padding:30px;}
.price-plan .price-amount{font-size:64px;letter-spacing:-.03em;margin:6px 0 14px;}
.price-plan .card-row-note{flex:1 1 auto;margin:0 0 24px;padding-top:16px;border-top:1px solid var(--line);align-items:center;}
.price-plan .price-note{margin:0;flex:1;font-size:14.5px;line-height:1.55;}
.price-plan-featured .plan-ico,.price-plan-featured .card-ico{background:rgba(255,255,255,.12);color:var(--accent-on-dark);}
.price-plan-featured .card-row-note{border-top-color:rgba(255,255,255,.16);}

/* clay band behind the price cards (home + prices page) */
.pricing#pricing{background:var(--clay);box-shadow:0 0 0 100vmax var(--clay);clip-path:inset(0 -100vmax);}
.pricing#pricing .eyebrow{color:rgba(255,255,255,.82);}
.pricing#pricing .section-watermark,.pricing#pricing .pricing-watermark{color:#fff;}
.pricing#pricing .faq-more,.pricing#pricing .faq-more .arrow{color:#fff;}
.pricing#pricing .price-plan{background:var(--page-bg);border-color:transparent;}
.pricing#pricing .price-plan-featured,.price-plan-featured{background:var(--ink);color:#fff;}
.price-plan-featured .works-card-tag{color:var(--accent-on-dark);}

/* ---------- icon animations ---------- */
@keyframes icoTurn{to{transform:rotate(360deg);}}
.ico-clock .hand-min{transform-origin:12px 12px;animation:icoTurn 6s linear infinite;}
.ico-clock .hand-hour{transform-origin:12px 12px;animation:icoTurn 72s linear infinite;}
@keyframes icoLine{0%,100%{transform:scaleX(.4);}50%{transform:scaleX(1);}}
.ico-lines .ln{transform-origin:4px 12px;animation:icoLine 3.4s ease-in-out infinite;animation-delay:var(--d,0s);}
@keyframes icoDraw{0%{stroke-dashoffset:24;}35%,80%{stroke-dashoffset:0;}100%{stroke-dashoffset:24;}}
.ico-check .draw{stroke-dasharray:24;animation:icoDraw 3.6s ease-in-out infinite;}
@keyframes icoHop{0%,15%{transform:translateX(0);}35%,55%{transform:translateX(3px);}75%,95%{transform:translateX(6px);}100%{transform:translateX(0);}}
.ico-cal .cal-dot{fill:currentColor;stroke:none;animation:icoHop 4s ease-in-out infinite;}
@keyframes icoSpark{0%,100%{transform:scale(.8) rotate(0);}50%{transform:scale(1.12) rotate(90deg);}}
.ico-spark .spark{fill:currentColor;stroke:none;transform-origin:12px 12px;animation:icoSpark 3.4s ease-in-out infinite;}
@keyframes icoRing{0%{transform:scale(.45);opacity:.9;}100%{transform:scale(1.35);opacity:0;}}
.ico-ring .ring{transform-origin:12px 12px;animation:icoRing 2.4s ease-out infinite;}
.ico-ring .core{fill:currentColor;stroke:none;}
@keyframes icoDot{0%,8%{opacity:.18;transform:scale(.8);}22%,80%{opacity:1;transform:scale(1);}95%,100%{opacity:.18;transform:scale(.8);}}
.ico-dots circle{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center;animation:icoDot 5s ease-in-out infinite;animation-delay:calc(var(--i) * .32s);}
@media (prefers-reduced-motion:reduce){
  .card-ico *,.plan-ico *{animation:none !important;}
  .ico-check .draw{stroke-dashoffset:0;}
  .ico-dots circle{opacity:1;}
}

/* =====================================================================
   v9 — fill the empty cards, real form layout, CTA that belongs, blog 2 x 2
   ===================================================================== */

/* blog: two columns */
.works .blog-grid{grid-template-columns:repeat(2,1fr);gap:32px;max-width:1000px;}
@media (max-width:760px){.works .blog-grid{grid-template-columns:1fr;gap:24px;}}

/* approach grid: map fills its card, stat card gets a visual, stages sit at the bottom */
.why-map-card .why-map-frame{flex:1 1 auto;aspect-ratio:auto;min-height:300px;}
.why-card .why-stat-num{font-size:124px;}
.why-stat{position:relative;}
.why-people{
  position:absolute;top:34px;right:34px;display:grid;grid-template-columns:repeat(3,18px);gap:10px;
}
.why-people i{width:18px;height:18px;border-radius:50%;background:var(--clay);opacity:.2;animation:icoDot 5s ease-in-out infinite;animation-delay:calc(var(--i) * .3s);}
.why-stat{justify-content:space-between;}
.why-small{justify-content:space-between;}
.why-small .why-stages{margin-top:auto;padding-top:24px;}
.why-stage{width:22px;height:22px;}
@media (prefers-reduced-motion:reduce){.why-people i{animation:none;opacity:1;}}
@media (max-width:900px){.why-people{top:26px;right:26px;}.why-card .why-stat-num{font-size:100px;}}

/* "ready to try?" — a clay call-to-action band that matches the pricing block */
.process-form-card,.process-form-card:hover{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"t b" "p b";align-items:center;gap:6px 48px;
  max-width:none;margin:8px 0 0;padding:44px 52px;text-align:left;
  background:var(--clay);border:0;box-shadow:none;color:#fff;
}
.process-form-card h3{grid-area:t;font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;margin:0;color:#fff;}
.process-form-card > p{grid-area:p;margin:0;max-width:56ch;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88);}
.process-form-card .process-cta{grid-area:b;margin:0;background:#fff;color:var(--ink);white-space:nowrap;}
.process-form-card .process-cta:hover{background:var(--ink);color:#fff;}
@media (max-width:760px){
  .process-form-card,.process-form-card:hover{grid-template-columns:1fr;grid-template-areas:"t" "p" "b";padding:32px 26px;gap:10px;}
  .process-form-card .process-cta{justify-self:start;margin-top:14px;}
}

/* request form: centered head, then form card + clay info card side by side */
.contact .contact-head{flex:0 0 100%;text-align:center;}
.contact .contact-head .contact-watermark{margin:0;}
.booking .contact-content,#form .contact-content{
  max-width:calc(var(--container) + 2 * var(--gutter));margin:0 auto;
  display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:stretch;padding-top:104px;padding-bottom:112px;
}
.booking .contact-head,#form .contact-head{margin-bottom:16px;}
.booking .contact-main,#form .contact-main{
  flex:1.25 1 520px !important;max-width:none;min-width:0;
  background:#fff;border-radius:var(--radius-lg);padding:48px;
  box-shadow:0 1px 2px rgba(34,26,22,.04),0 12px 28px rgba(34,26,22,.06);
}
.booking .contact-subtitle,#form .contact-subtitle{font-size:clamp(24px,2.6vw,34px);font-weight:400;letter-spacing:-.02em;margin-bottom:10px;}
.booking .contact-form,#form .contact-form{max-width:none;margin-top:28px;}
.booking .contact-form input:not([type=checkbox]),.booking .contact-form textarea,
#form .contact-form input:not([type=checkbox]),#form .contact-form textarea{background:var(--page-bg);}
.booking-aside{
  flex:1 1 340px;max-width:none;align-self:stretch;
  background:var(--clay);color:#fff;border-radius:var(--radius-lg);padding:48px;
}
.booking-aside h4{color:#fff;font-size:clamp(22px,2vw,28px);margin-bottom:24px;}
.booking-aside li{border-top:1px solid rgba(255,255,255,.28);padding:20px 0;}
.booking-aside li:last-child{border-bottom:1px solid rgba(255,255,255,.28);}
.booking-aside strong{color:#fff;font-size:17px;}
.booking-aside span{color:rgba(255,255,255,.86);}
.booking-aside .inline-link,.booking-aside .inline-link.on-dark{color:#fff;text-decoration-color:rgba(255,255,255,.6);}
.booking-aside .inline-link:hover{color:var(--ink);}
#form .contacts-photo{flex:1 1 300px;max-width:none;aspect-ratio:auto;min-height:100%;align-self:stretch;}
@media (max-width:900px){
  .booking .contact-main,#form .contact-main,.booking-aside{padding:30px 24px;}
  #form .contacts-photo{min-height:320px;}
}

/* ---------- blog posts as their own pages ---------- */
.article-hero .section-title{font-size:clamp(34px,4.6vw,62px);line-height:1.06;letter-spacing:-.03em;max-width:900px;margin:0 auto 14px;}
.article-hero .section-desc{font-size:15px;color:var(--gray);margin-top:0;}
.article-back::before{content:'←';margin-right:8px;}
.article-back{margin-top:36px;}
.alt-articles{padding-top:72px;padding-bottom:96px;}
.alt-articles .blog-article{margin-bottom:0;}
.post-more .section-heading{text-align:center;margin-bottom:0;}
.post-more .blog-grid{max-width:1000px;margin:40px auto 0;}
.post-more .post-cta{max-width:1000px;margin:40px auto 0;}

/* =====================================================================
   PHONES (≤760px) — less scrolling: card rows swipe sideways, long text folds open
   ===================================================================== */
.m-dots,.m-more{display:none;}
@media (max-width:760px){
  :root{--fs-h2:clamp(38px,11.5vw,54px);}
  .page-hero-intro .section-title{font-size:clamp(40px,11.5vw,60px);}
  section{padding-top:56px;padding-bottom:56px;}
  .schedule-band,.pricing,.process,.gallery,.why-us,.works{padding-top:60px;padding-bottom:60px;}
  .section-lead,.section-desc,.gift-lead{font-size:16px;}

  /* ---- swipe rows ---- */
  .works-cards,.pricing-grid,.process-steps,.why-grid,.gift-grid{
    display:flex;grid-template-columns:none;gap:14px;max-width:none;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:28px calc(-1 * var(--gutter)) 0;padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .works-cards::-webkit-scrollbar,.pricing-grid::-webkit-scrollbar,.process-steps::-webkit-scrollbar,
  .why-grid::-webkit-scrollbar,.gift-grid::-webkit-scrollbar{display:none;}
  .works-cards > *,.pricing-grid > *,.process-steps > *,.why-grid > *,.gift-grid > *{
    flex:0 0 80%;max-width:340px;min-width:0;scroll-snap-align:start;grid-column:auto;grid-row:auto;
  }
  .gift-grid > *{flex-basis:76%;}
  .m-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin:2px 0 0;}
  .m-dots i{width:7px;height:7px;border-radius:7px;background:var(--line);transition:width .25s ease,background .25s ease;}
  .m-dots i.on{width:22px;background:var(--clay);}
  .pricing#pricing .m-dots i{background:rgba(255,255,255,.4);}
  .pricing#pricing .m-dots i.on{background:#fff;}

  /* smaller cards */
  .why-card{padding:22px;}
  .works-card,.works-card:hover,.process-step,.process-step:hover{padding:14px;}
  .works-card-media{aspect-ratio:4/3;margin-bottom:6px;}
  .works-card h3{font-size:21px;margin:6px 0 12px;}
  .card-row-text p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;}
  .process-step p{font-size:14.5px;}
  .price-plan{padding:22px;}
  .price-plan .price-amount{font-size:50px;margin:2px 0 10px;}
  .why-map-card .why-map-frame{min-height:190px;}
  .why-card .why-stat-num{font-size:96px;}
  .why-stat{min-height:0;}
  .process-form-card,.process-form-card:hover{margin-top:20px;}

  /* ---- schedule panels: first paragraph, then "read more" ---- */
  .week-panel .m-extra{display:none;}
  .week-panel.is-expanded .m-extra{display:block;}
  .m-more{display:inline-block;margin:2px 0 16px;padding:0;background:none;border:0;color:var(--clay);font:600 15px 'Inter',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
  .week-panel{padding:22px;}

  /* ---- "good to know" list: tap a line to open ---- */
  .booking-aside li{padding:0;}
  .booking-aside li strong{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;cursor:pointer;}
  .booking-aside li strong::after{content:'+';font-size:22px;font-weight:300;line-height:1;flex:none;}
  .booking-aside li.open strong::after{content:'–';}
  .booking-aside li span{display:none;padding:0 0 16px;}
  .booking-aside li.open span{display:block;}

  /* ---- footer: columns fold open ---- */
  .footer-top{gap:8px;padding-top:44px;padding-bottom:20px;}
  .footer-brand{margin-bottom:18px;}
  .footer-col{border-top:1px solid rgba(255,255,255,.14);}
  .footer-col h5{display:flex;justify-content:space-between;align-items:center;margin:0;padding:16px 0;cursor:pointer;}
  .footer-col h5::after{content:'+';font-size:22px;font-weight:300;line-height:1;}
  .footer-col.open h5::after{content:'–';}
  .footer-col > a{display:none;}
  .footer-col.open > a{display:block;}
  .footer-col.open{padding-bottom:12px;}

  /* ---- blog list: compact rows ---- */
  .works .blog-grid{display:flex;flex-direction:column;gap:12px;max-width:none;margin-top:0;}
  .works .blog-grid .blog-card{display:grid;grid-template-columns:104px 1fr;padding:0;}
  .works .blog-grid .blog-card-media{aspect-ratio:auto;height:100%;min-height:128px;}
  .works .blog-grid .blog-card-media img{aspect-ratio:auto;height:100%;}
  .works .blog-grid .blog-card-body{padding:14px 16px;}
  .works .blog-grid .blog-card h3{font-size:17px;margin-bottom:4px;}
  .works .blog-grid .blog-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;}
  .post-more .blog-grid{margin-top:24px;}
  .post-more .post-cta{margin-top:24px;}

  /* ---- contacts page ---- */
  .contacts-info{grid-template-columns:1fr 1fr;gap:12px;}
  .contacts-info-card{padding:16px;}
  .contacts-map-frame{min-height:210px;}
  #form .contacts-photo{min-height:240px;max-height:300px;}
}

@media (max-width:760px){
  .why-wide{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:20px;}
  .why-wide-text{max-width:none;}
  .why-steps{width:100%;flex-wrap:nowrap;justify-content:space-between;align-items:flex-start;gap:4px;}
  .why-step{min-width:0;flex:1 1 0;}
  .why-step-arrow{flex:0 0 auto;margin-top:10px;}
  .why-step-label{font-size:12px;}
}


/* =====================================================================
   BACKGROUND — arches + breathing ripples + warm glows + paper grain
   (pure CSS/inline SVG, nothing to download). Arches echo the photo frames
   and the studio windows; ripples echo the breath/flow of the practices.
   ===================================================================== */
:root{
  --deco-arch:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 460 560%22 fill=%22none%22%3E%0A%3Cpath d=%22M70 540V230a150 150 0 0 1 300 0V540Z%22 fill=%22%23E7C4AB%22 fill-opacity=%22.34%22/%3E%0A%3Cg stroke=%22%23B0523A%22 stroke-opacity=%22.26%22 stroke-width=%221.4%22 vector-effect=%22non-scaling-stroke%22%3E%0A%3Cpath d=%22M30 540V215a190 190 0 0 1 380 0V540%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M-10 540V200a230 230 0 0 1 460 0V540%22 stroke-opacity=%22.16%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M110 540V240a110 110 0 0 1 220 0V540%22 stroke-opacity=%22.3%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3C/g%3E%3C/svg%3E");
  --deco-ripple:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 640%22 fill=%22none%22%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%2270%22 fill=%22%23E7C4AB%22 fill-opacity=%22.38%22/%3E%0A%3Cg stroke=%22%23B0523A%22 stroke-width=%221.4%22%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%22120%22 stroke-opacity=%22.28%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%22170%22 stroke-opacity=%22.22%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%22220%22 stroke-opacity=%22.17%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%22270%22 stroke-opacity=%22.12%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%22315%22 stroke-opacity=%22.08%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3C/g%3E%3C/svg%3E");
  --deco-grain:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .15  0 0 0 .5 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
}
main{overflow-x:clip;}

/* soft warm glows that repeat down the whole page behind transparent sections */
body{
  background-color:var(--page-bg);
  background-image:
    radial-gradient(760px 520px at 0% 12%,rgba(226,160,128,.20),transparent 70%),
    radial-gradient(900px 620px at 100% 48%,rgba(236,208,172,.42),transparent 70%),
    radial-gradient(700px 480px at 12% 88%,rgba(176,82,58,.08),transparent 70%);
  background-size:100% 1900px;background-repeat:repeat-y;
}
/* fine paper grain over everything (very low contrast) */
body::after{
  content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.2;
  background-image:var(--deco-grain);background-size:200px 200px;
}

/* cream sections: let the body glows through and add shapes */
.page-hero,.contact{background-color:transparent;}
.works{
  background-image:var(--deco-arch),var(--deco-ripple);
  background-repeat:no-repeat;
  background-position:right -90px top 70px,left -260px bottom -200px;
  background-size:400px auto,560px auto;
}
.process{
  background-image:var(--deco-ripple),var(--deco-arch);
  background-repeat:no-repeat;
  background-position:right -280px top -120px,left -90px bottom 30px;
  background-size:600px auto,380px auto;
}
.contact{
  background-image:var(--deco-arch),var(--deco-ripple);
  background-repeat:no-repeat;
  background-position:left -120px top 60px,right -260px bottom -180px;
  background-size:360px auto,560px auto;
}
.page-hero{
  background-image:var(--deco-arch),var(--deco-ripple);
  background-repeat:no-repeat;
  background-position:right 6% top 60px,left -240px bottom -300px;
  background-size:330px auto,520px auto;
}
.faq-section,.gift-section,.alt-articles{background-image:var(--deco-ripple);background-repeat:no-repeat;background-position:right -300px center;background-size:560px auto;}

/* sand bands: ripples only (they already sit on a tinted colour) */
section.band-alt.band-alt{
  background-image:var(--deco-ripple),var(--deco-ripple);
  background-repeat:no-repeat;
  background-position:left -300px top -160px,right -300px bottom -240px;
  background-size:520px auto,620px auto;
}
section.band-alt.band-alt.gallery{background-image:var(--deco-ripple);background-position:right -280px top -200px;}

@media (max-width:760px){
  .works{background-position:right -110px top 40px,left -220px bottom -160px;background-size:240px auto,380px auto;}
  .process{background-position:right -200px top -80px,left -110px bottom 20px;background-size:380px auto,240px auto;}
  .contact{background-position:left -130px top 30px,right -200px bottom -120px;background-size:240px auto,380px auto;}
  .page-hero{background-position:right -40px top 70px,left -200px bottom -240px;background-size:230px auto,380px auto;}
  section.band-alt.band-alt{background-size:360px auto,420px auto;background-position:left -220px top -120px,right -220px bottom -180px;}
  body{background-size:100% 1500px;}
}

/* =====================================================================
   BACKGROUND v2 — shapes stay inside their own block (never cut by a section
   edge), and neighbouring blocks put theirs on opposite sides.
   Only left/right may bleed off-screen; top/bottom offsets are always positive.
   ===================================================================== */
.works{
  background-position:right -90px top 80px,left -270px bottom 110px;
  background-size:400px auto,540px auto;
}
.process{
  background-image:var(--deco-ripple),var(--deco-arch);
  background-position:left -300px top 70px,right -80px bottom 90px;
  background-size:540px auto,360px auto;
}
.contact{
  background-position:left -110px top 70px,right -280px bottom 90px;
  background-size:340px auto,520px auto;
}
.page-hero{
  background-image:var(--deco-arch);
  background-position:right 8% bottom 26px;
  background-size:230px auto;
}
.faq-section,.gift-section,.alt-articles{background-position:right -300px center;}

section.band-alt.band-alt{background-image:var(--deco-ripple);background-repeat:no-repeat;}
section.band-alt.band-alt.schedule-band{background-position:right -300px top 70px;background-size:560px auto;}
section.band-alt.band-alt.why-us{background-position:left -320px center;background-size:600px auto;}
section.band-alt.band-alt.gallery{background-position:right -300px top 70px;background-size:520px auto;}

@media (max-width:760px){
  .works{background-position:right -120px top 50px,left -220px bottom 90px;background-size:240px auto,360px auto;}
  .process{background-position:left -230px top 50px,right -100px bottom 70px;background-size:360px auto,230px auto;}
  .contact{background-position:left -120px top 40px,right -210px bottom 60px;background-size:230px auto,360px auto;}
  .page-hero{background-position:right 4% bottom 20px;background-size:170px auto;}
  section.band-alt.band-alt.schedule-band{background-position:right -230px top 50px;background-size:380px auto;}
  section.band-alt.band-alt.why-us{background-position:left -250px center;background-size:400px auto;}
  section.band-alt.band-alt.gallery{background-position:right -230px top 50px;background-size:360px auto;}
}


/* =====================================================================
   PRICING — richer clay band + stronger cards
   ===================================================================== */
:root{--deco-arch-w:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 460 560%22 fill=%22none%22%3E%0A%3Cpath d=%22M70 540V230a150 150 0 0 1 300 0V540Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%0A%3Cg stroke=%22%23fff%22 stroke-width=%221.4%22%3E%3Cpath d=%22M30 540V215a190 190 0 0 1 380 0V540%22 stroke-opacity=%22.28%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M-10 540V200a230 230 0 0 1 460 0V540%22 stroke-opacity=%22.16%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M110 540V240a110 110 0 0 1 220 0V540%22 stroke-opacity=%22.34%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/g%3E%3C/svg%3E");--deco-ripple-w:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 640%22 fill=%22none%22%3E%3Ccircle cx=%22320%22 cy=%22320%22 r=%2270%22 fill=%22%23fff%22 fill-opacity=%22.09%22/%3E%0A%3Cg stroke=%22%23fff%22 stroke-width=%221.4%22%3E%3Ccircle cx=%22320%22 cy=%22320%22 r=%22120%22 stroke-opacity=%22.3%22 vector-effect=%22non-scaling-stroke%22/%3E%3Ccircle cx=%22320%22 cy=%22320%22 r=%22170%22 stroke-opacity=%22.24%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%22220%22 stroke-opacity=%22.18%22 vector-effect=%22non-scaling-stroke%22/%3E%3Ccircle cx=%22320%22 cy=%22320%22 r=%22270%22 stroke-opacity=%22.12%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Ccircle cx=%22320%22 cy=%22320%22 r=%22315%22 stroke-opacity=%22.08%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/g%3E%3C/svg%3E");}
.pricing#pricing{
  background-color:var(--clay);
  background-image:
    radial-gradient(900px 460px at 50% -8%,rgba(255,196,160,.42),transparent 68%),
    radial-gradient(760px 520px at 100% 108%,rgba(70,18,8,.40),transparent 70%),
    radial-gradient(620px 420px at 0% 104%,rgba(255,150,110,.20),transparent 70%),
    var(--deco-arch-w),var(--deco-ripple-w);
  background-repeat:no-repeat;
  background-position:0 0,0 0,0 0,left -70px bottom 70px,right -300px top 60px;
  background-size:auto,auto,auto,400px auto,600px auto;
}
.pricing#pricing .pricing-grid{align-items:stretch;margin-top:56px;}

.pricing#pricing .price-plan{
  position:relative;overflow:hidden;padding:0 30px 30px;border:0;
  background:linear-gradient(180deg,#fffaf5 0%,#f6eadf 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 46px 70px -34px rgba(70,18,8,.6),0 12px 26px rgba(70,18,8,.2);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.pricing#pricing .price-plan:hover{transform:translateY(-8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 56px 80px -34px rgba(70,18,8,.7),0 16px 30px rgba(70,18,8,.25);}
.plan-head{
  margin:0 -30px 22px;padding:22px 30px;gap:14px;
  background:linear-gradient(135deg,#f1d3bf 0%,#f8e5d6 100%);
  border-bottom:1px solid rgba(176,82,58,.14);
}
.plan-ico{width:54px;height:54px;background:#fff;box-shadow:0 6px 14px rgba(176,82,58,.22);}
.price-plan .price-amount{font-size:72px;font-weight:300;line-height:1;letter-spacing:-.045em;margin:4px 0 18px;}
.price-plan .card-row-note{border-top-color:rgba(176,82,58,.16);}
.price-plan-cta{align-self:stretch;justify-content:center;}
.plan-badge{
  margin-left:auto;flex:none;padding:7px 12px;border-radius:100px;
  background:var(--clay);color:#fff;font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 6px 14px rgba(0,0,0,.3);
}

/* the featured plan: dark, glowing, a step taller */
.pricing#pricing .price-plan-featured,.price-plan-featured{
  background:radial-gradient(420px 260px at 85% 0%,rgba(190,90,60,.5),transparent 70%),linear-gradient(180deg,#2b2320 0%,#171210 100%);
  box-shadow:0 0 0 1.5px rgba(240,169,142,.55),0 60px 90px -34px rgba(20,4,0,.8),0 14px 30px rgba(20,4,0,.35);
  transform:translateY(-16px);
}
.pricing#pricing .price-plan-featured:hover{transform:translateY(-24px);}
.price-plan-featured .plan-head{background:linear-gradient(135deg,rgba(176,82,58,.6) 0%,rgba(176,82,58,.12) 100%);border-bottom-color:rgba(255,255,255,.1);}
.price-plan-featured .plan-ico{background:rgba(255,255,255,.12);box-shadow:none;}
.price-plan-featured .card-row-note{border-top-color:rgba(255,255,255,.14);}

/* the "all prices" link becomes a real button on the band */
.pricing#pricing .faq-more{
  display:flex;width:max-content;margin:44px auto 0;padding:15px 28px;
  border:1.5px solid rgba(255,255,255,.55);border-radius:100px;font-weight:500;
  transition:background .25s ease,color .25s ease;
}
.pricing#pricing .faq-more:hover{background:#fff;color:var(--clay);}
.pricing#pricing .faq-more:hover .arrow{color:var(--clay);}

@media (max-width:760px){
  .pricing#pricing{
    background-position:0 0,0 0,0 0,left -90px bottom 40px,right -230px top 30px;
    background-size:auto,auto,auto,250px auto,380px auto;
  }
  .pricing#pricing .price-plan{padding:0 22px 24px;}
  .plan-head{margin:0 -22px 18px;padding:18px 22px;}
  .price-plan .price-amount{font-size:58px;}
  .pricing#pricing .pricing-grid{padding-top:22px;padding-bottom:26px;margin-top:28px;}
  .pricing#pricing .price-plan-featured,.pricing#pricing .price-plan-featured:hover{transform:none;}
  .pricing#pricing .price-plan:hover{transform:none;}
}

/* badge hangs from the top edge of the featured card instead of squeezing the head */
.plan-badge{position:absolute;top:0;right:22px;margin:0;padding:8px 12px 9px;border-radius:0 0 12px 12px;box-shadow:0 8px 16px rgba(0,0,0,.28);}
.plan-head .works-card-tag{white-space:nowrap;}


/* =====================================================================
   POLISH — arches fade out at their base (no hard cut), check icons stay
   visible, price badge can't be clipped in any language
   ===================================================================== */
:root{--deco-arch:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 460 560%22 fill=%22none%22%3E%0A%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.97%22 stop-color=%22%23000%22/%3E%3C/linearGradient%3E%3Cmask id=%22m%22%3E%3Crect width=%22460%22 height=%22560%22 fill=%22url(%23f)%22/%3E%3C/mask%3E%3C/defs%3E%0A%3Cg mask=%22url(%23m)%22%3E%3Cpath d=%22M70 560V230a150 150 0 0 1 300 0V560Z%22 fill=%22%23E7C4AB%22 fill-opacity=%22.34%22/%3E%0A%3Cg stroke=%22%23B0523A%22 stroke-width=%221.4%22%3E%3Cpath d=%22M30 560V215a190 190 0 0 1 380 0V560%22 stroke-opacity=%22.26%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M-10 560V200a230 230 0 0 1 460 0V560%22 stroke-opacity=%22.16%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M110 560V240a110 110 0 0 1 220 0V560%22 stroke-opacity=%22.30%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");--deco-arch-w:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 460 560%22 fill=%22none%22%3E%0A%3Cdefs%3E%3ClinearGradient id=%22f%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.97%22 stop-color=%22%23000%22/%3E%3C/linearGradient%3E%3Cmask id=%22m%22%3E%3Crect width=%22460%22 height=%22560%22 fill=%22url(%23f)%22/%3E%3C/mask%3E%3C/defs%3E%0A%3Cg mask=%22url(%23m)%22%3E%3Cpath d=%22M70 560V230a150 150 0 0 1 300 0V560Z%22 fill=%22%23fff%22 fill-opacity=%22.07%22/%3E%0A%3Cg stroke=%22%23fff%22 stroke-width=%221.4%22%3E%3Cpath d=%22M30 560V215a190 190 0 0 1 380 0V560%22 stroke-opacity=%22.28%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M-10 560V200a230 230 0 0 1 460 0V560%22 stroke-opacity=%22.16%22 vector-effect=%22non-scaling-stroke%22/%3E%0A%3Cpath d=%22M110 560V240a110 110 0 0 1 220 0V560%22 stroke-opacity=%22.34%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
@keyframes icoDraw{0%{stroke-dashoffset:24;}20%,93%{stroke-dashoffset:0;}100%{stroke-dashoffset:24;}}
.plan-badge{white-space:nowrap;max-width:calc(100% - 44px);overflow:hidden;text-overflow:clip;}
@media (max-width:760px){.pricing#pricing .m-dots{margin-top:16px;}}

/* =====================================================================
   MAP — tinted to the site palette, own ripple marker, soft rounded frame.
   The Google attribution strip along the bottom is left visible on purpose;
   only the "Open in Maps" box at the top is pushed out of view (the whole card
   already links to directions).
   ===================================================================== */
.why-map-frame{
  position:relative;overflow:hidden;border-radius:18px;background:#efe3d4;
  box-shadow:inset 0 0 0 1px rgba(176,82,58,.22);
  isolation:isolate;
}
.why-map-frame iframe{
  position:absolute;left:0;right:0;bottom:0;top:-64px;width:100%;height:calc(100% + 64px);
  filter:sepia(.62) saturate(.82) hue-rotate(-14deg) contrast(.94) brightness(1.05);
}
/* warm wash + soft edge so tiles melt into the card */
.why-map-frame::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(248,235,222,.55) 100%),
    linear-gradient(180deg,rgba(176,82,58,.07),rgba(176,82,58,.12));
  mix-blend-mode:multiply;
}
/* marker: clay dot with ripples (same motif as the page background) */
.why-map-pin{position:absolute;z-index:2;left:50%;top:calc(50% - 32px);width:0;height:0;pointer-events:none;}
.why-map-pin::before,.why-map-pin::after,.why-map-pin i{content:'';position:absolute;border-radius:50%;left:0;top:0;transform:translate(-50%,-50%);}
.why-map-pin i{width:20px;height:20px;background:var(--clay);box-shadow:0 0 0 5px #fff,0 8px 18px rgba(70,18,8,.4);}
.why-map-pin::before,.why-map-pin::after{width:20px;height:20px;border:1.5px solid var(--clay);opacity:0;animation:mapRipple 3.2s ease-out infinite;}
.why-map-pin::after{animation-delay:1.6s;}
@keyframes mapRipple{0%{transform:translate(-50%,-50%) scale(1);opacity:.55;}100%{transform:translate(-50%,-50%) scale(6.5);opacity:0;}}
@media (prefers-reduced-motion:reduce){.why-map-pin::before,.why-map-pin::after{animation:none;opacity:.25;transform:translate(-50%,-50%) scale(3);}}

/* map: calmer — closer to a sand/greige tint, softer wash, smaller quieter marker */
.why-map-frame{background:#ece3d8;box-shadow:inset 0 0 0 1px rgba(32,26,23,.08);}
.why-map-frame iframe{filter:sepia(.3) saturate(.5) hue-rotate(-6deg) contrast(.9) brightness(1.07);}
.why-map-frame::before{
  background:
    radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(246,239,231,.5) 100%),
    linear-gradient(180deg,rgba(176,82,58,.025),rgba(176,82,58,.055));
}
.why-map-pin i{width:14px;height:14px;background:var(--clay-deep);box-shadow:0 0 0 4px rgba(255,255,255,.92),0 6px 14px rgba(70,18,8,.28);}
.why-map-pin::before,.why-map-pin::after{width:14px;height:14px;border:1px solid var(--clay-deep);}
@keyframes mapRipple{0%{transform:translate(-50%,-50%) scale(1);opacity:.32;}100%{transform:translate(-50%,-50%) scale(5.5);opacity:0;}}

/* =====================================================================
   CARD GRADIENT — the same soft "brighter at the top, deeper below" light that
   the pricing band has, in every card. Light cards get a warm glow at the top
   edge; the clay cards get the band's own glow + shade.
   ===================================================================== */
:root{
  --card-bg:
    radial-gradient(110% 62% at 50% -6%,rgba(255,224,202,.62),transparent 66%),
    linear-gradient(180deg,#fffdfb 0%,#faf2ea 52%,#f3e8dc 100%);
  --clay-bg:
    radial-gradient(90% 70% at 50% -12%,rgba(255,196,160,.42),transparent 68%),
    radial-gradient(80% 70% at 100% 112%,rgba(70,18,8,.36),transparent 70%),
    radial-gradient(70% 60% at 0% 108%,rgba(255,150,110,.18),transparent 70%),
    var(--clay);
}
.why-card:not(.process-form-card):not(.price-plan-featured),
.blog-card,.blog-article,.faq-item,.faq-ask-card,.week-panel,
.week-day.has-class:not(.is-open),
.booking .contact-main,#form .contact-main{
  background:var(--card-bg);
}
.process-form-card,.process-form-card:hover,.booking-aside{background:var(--clay-bg);}
.faq-item.active{background:var(--card-bg);}
/* the schedule day that is open keeps the solid clay, with the same light */
.week-day.is-open{background:var(--clay-bg);}

/* =====================================================================
   BLOCK GRADIENT — every section gets the pricing band's light: a soft glow
   along the top edge, a slightly deeper tone toward the bottom. The glows fade
   out sideways, so full-bleed bands never show a seam.
   ===================================================================== */
.works,.process,.contact,.schedule-band,.why-us,.gallery,.faq-section,.gift-section,.alt-articles,.post-more{
  position:relative;isolation:isolate;
}
.works::before,.process::before,.contact::before,.schedule-band::before,.why-us::before,.gallery::before,
.faq-section::before,.gift-section::before,.alt-articles::before,.post-more::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(78% 52% at 50% -10%,rgba(255,226,204,.62),transparent 70%),
    radial-gradient(90% 55% at 50% 114%,rgba(196,140,108,.16),transparent 70%);
}
/* sand bands: lighter glow on top, rosier shade below */
.schedule-band::before,.why-us::before,.gallery::before,.post-more::before{
  background:
    radial-gradient(78% 52% at 50% -10%,rgba(255,246,236,.78),transparent 70%),
    radial-gradient(90% 55% at 50% 114%,rgba(176,82,58,.11),transparent 70%);
}
/* sub-page title blocks: same light, drawn on their own background so the fixed menu is untouched */
.page-hero{
  background-image:
    radial-gradient(70% 70% at 50% -14%,rgba(255,226,204,.7),transparent 70%),
    radial-gradient(90% 60% at 50% 120%,rgba(196,140,108,.16),transparent 70%),
    var(--deco-arch);
  background-position:0 0,0 0,right 8% bottom 26px;
  background-size:auto,auto,230px auto;
}
/* footer: the clay light from the band, on the dark ground */
.footer::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% -14%,rgba(176,82,58,.34),transparent 70%),
    radial-gradient(60% 45% at 100% 112%,rgba(255,150,110,.10),transparent 70%);
}
@media (max-width:760px){
  .page-hero{background-position:0 0,0 0,right 4% bottom 20px;background-size:auto,auto,170px auto;}
}