/* ============================================================
   BIRO 404 — WOLF PATH homepage (R_WOLF)
   Visual source of truth: locked Wolf Path mockup (567bba12).
   Palette from approved asset catalog board:
   bg #0B0F12 / #12171C / #1A1F24 · gold #C89A3C / #E6C77A · #FFFFFF
   Display serif: Fraunces (self-hosted, latin-ext).
   Body: Space Grotesk (existing site font). Mono: JetBrains Mono.
   Scope: body.wolf only — other pages untouched.
   ============================================================ */

body.wolf{
  --w-bg0:#0B0F12;
  --w-bg1:#12171C;
  --w-bg2:#1A1F24;
  --w-line:rgba(230,199,122,.14);
  --w-line-2:rgba(230,199,122,.28);
  --w-gold:#C89A3C;
  --w-gold-hi:#E6C77A;
  --w-gold-deep:#08090C;
  --w-text:#F2EFE7;
  --w-text-2:#C9CDC6;
  --w-muted:#98A1A8;
  --w-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --w-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  background:var(--w-bg0);
  color:var(--w-text-2);
}
body.wolf .atmos .g1{background:radial-gradient(circle,rgba(200,154,60,.13),rgba(200,154,60,0) 68%)}

/* ---------- shared header tuned to wolf tone (this page only) ---------- */
body.wolf .site-header{background:rgba(11,15,18,.66);border-bottom-color:rgba(230,199,122,.10)}
body.wolf .brand{position:relative;line-height:1}
body.wolf .brand .dot{background:var(--w-gold-hi);box-shadow:0 0 12px rgba(230,199,122,.8)}
body.wolf .brand-sub{
  display:block;position:absolute;left:1.45rem;top:1.28rem;
  font-family:var(--font-body);font-size:.52rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--w-muted);white-space:nowrap;
}
body.wolf .nav-cta{background:transparent;border:1px solid var(--w-gold);color:var(--w-gold-hi)}
body.wolf .nav-cta:hover{background:rgba(200,154,60,.12)}

/* ============================================================
   TYPE SYSTEM
   ============================================================ */
body.wolf .w-eyebrow{
  display:inline-flex;align-items:center;gap:.85rem;
  font-family:var(--font-body);font-size:.72rem;font-weight:600;
  letter-spacing:.30em;text-transform:uppercase;color:var(--w-gold);
}
body.wolf .w-eyebrow::before{content:"";width:34px;height:1px;background:var(--w-gold);opacity:.55;flex:none}
body.wolf .w-h1,
body.wolf .w-h2{
  font-family:var(--w-serif);font-weight:560;color:var(--w-text);
  line-height:1.06;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;margin:0;
}
body.wolf .w-h1{font-size:clamp(2.15rem,3.85vw,3.7rem)}
body.wolf .w-h2{font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.14}
body.wolf .w-h3{font-family:var(--w-serif);font-weight:560;color:var(--w-text);font-size:clamp(1.18rem,1.8vw,1.5rem);line-height:1.25;margin:0}
body.wolf .w-gold{color:var(--w-gold-hi)}
body.wolf .w-lead{font-size:clamp(1rem,1.35vw,1.14rem);line-height:1.75;color:var(--w-text-2);max-width:56ch}
body.wolf .w-meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--w-muted)}

/* ---------- buttons ---------- */
body.wolf .w-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-body);font-weight:600;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:1.02rem 1.7rem;border-radius:2px;
  transition:background .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out);
}
body.wolf .w-btn .ar{transition:transform .35s var(--ease-out)}
body.wolf .w-btn:hover .ar{transform:translateX(5px)}
body.wolf .w-btn--outline{border:1px solid var(--w-gold);color:var(--w-gold-hi);background:rgba(11,15,18,.35);backdrop-filter:blur(3px)}
body.wolf .w-btn--outline:hover{background:rgba(200,154,60,.14);border-color:var(--w-gold-hi)}
body.wolf .w-btn--solid{background:var(--w-gold);color:var(--w-gold-deep);border:1px solid var(--w-gold)}
body.wolf .w-btn--solid:hover{background:var(--w-gold-hi);border-color:var(--w-gold-hi);transform:translateY(-2px)}
body.wolf .w-btn--quiet{color:var(--w-text-2);border:1px solid rgba(242,239,231,.22)}
body.wolf .w-btn--quiet:hover{border-color:rgba(242,239,231,.45);color:var(--w-text)}

/* ============================================================
   HERO — OTKRIĆE  (video intro-play → hold, poster-first)
   ============================================================ */
body.wolf .wh{position:relative;min-height:100svh;overflow:clip;background:var(--w-bg0);isolation:isolate}
body.wolf .wh-media{position:absolute;inset:0;z-index:1}
body.wolf .wh-media img,
body.wolf .wh-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:32% center;
}
body.wolf .wh-media video{opacity:0;transition:opacity .9s ease}
body.wolf .wh.is-playing .wh-media video{opacity:1}
/* scrim: readability left + bottom, never over the valley path on the right */
body.wolf .wh-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,15,18,.78) 0%,rgba(11,15,18,.42) 34%,rgba(11,15,18,.05) 62%,rgba(11,15,18,0) 78%),
    linear-gradient(180deg,rgba(11,15,18,.55) 0%,rgba(11,15,18,0) 22%,rgba(11,15,18,0) 62%,rgba(11,15,18,.92) 100%)}
body.wolf .wh-overlay{position:relative;z-index:3;min-height:100svh;display:flex;align-items:center}
body.wolf .wh-copy{max-width:780px;padding-block:clamp(5.5rem,14vh,8rem)}
body.wolf .wh-copy .w-h1{margin-top:1.35rem}
body.wolf .wh-sub{margin-top:1.5rem;font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.75;color:var(--w-text-2);max-width:46ch}
body.wolf .wh-cta{margin-top:2.3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
/* hero entrance — pure CSS so it works before/without JS */
body.wolf .wh-copy>*{opacity:0;transform:translateY(22px);animation:whIn 1s var(--ease) forwards}
body.wolf .wh-copy>*:nth-child(2){animation-delay:.12s}
body.wolf .wh-copy>*:nth-child(3){animation-delay:.24s}
body.wolf .wh-copy>*:nth-child(4){animation-delay:.38s}
@keyframes whIn{to{opacity:1;transform:none}}
/* vertical scroll rail (mockup: SKROLUJ) */
body.wolf .wh-rail{position:absolute;z-index:4;left:clamp(.6rem,1.6vw,1.6rem);bottom:9rem;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--w-muted)}
body.wolf .wh-rail span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;writing-mode:vertical-rl}
body.wolf .wh-rail::after{content:"";width:1px;height:74px;background:linear-gradient(180deg,var(--w-gold),transparent);animation:railPulse 2.6s ease-in-out infinite}
@keyframes railPulse{0%,100%{opacity:.35}50%{opacity:1}}
/* AI pilot trigger (existing feature, wolf skin) */
body.wolf .wh-pilot{position:absolute;z-index:4;right:clamp(1rem,4vw,3rem);bottom:clamp(4.6rem,10vh,6rem);
  display:inline-flex;align-items:center;gap:.6rem;padding:.62rem .95rem;border-radius:999px;
  border:1px solid var(--w-line-2);background:rgba(11,15,18,.55);backdrop-filter:blur(8px);
  color:var(--w-text-2);font-size:.8rem;transition:border-color .3s,transform .3s}
body.wolf .wh-pilot:hover{border-color:var(--w-gold);transform:translateY(-2px)}
body.wolf .wh-pilot .tag{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;color:var(--w-gold-hi);border:1px solid var(--w-line-2);padding:.14rem .4rem;border-radius:3px}
body.wolf .wh-pilot svg{width:17px;height:17px;stroke:var(--w-gold-hi)}
/* replay control — appears only after the video ends */
body.wolf .wh-replay{position:absolute;z-index:4;right:clamp(1rem,4vw,3rem);top:calc(var(--nav-h) + 1rem);
  display:none;align-items:center;gap:.5rem;padding:.5rem .85rem;border-radius:999px;
  border:1px solid var(--w-line);background:rgba(11,15,18,.5);color:var(--w-muted);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
body.wolf .wh.is-ended .wh-replay{display:inline-flex}
body.wolf .wh-replay:hover{color:var(--w-gold-hi);border-color:var(--w-gold)}
body.wolf .wh-replay svg{width:13px;height:13px}
/* after video ends: gentle amber shimmer along the trail (UI layer, not baked) */
body.wolf .wh-ember{position:absolute;z-index:2;inset:auto 0 0 0;height:46%;pointer-events:none;opacity:0;
  background:radial-gradient(58% 34% at 63% 78%,rgba(200,154,60,.20),rgba(200,154,60,0) 70%);
  transition:opacity 1.6s ease}
body.wolf .wh.is-ended .wh-ember{opacity:1;animation:emberBreath 5.5s ease-in-out infinite}
@keyframes emberBreath{0%,100%{opacity:.55}50%{opacity:1}}

/* ============================================================
   SECTION SHELL — cinematic chapters
   ============================================================ */
body.wolf .wsec{position:relative;padding-block:clamp(6rem,11vw,10.5rem);overflow:clip}
body.wolf .wsec--flush-top{padding-top:clamp(4rem,7vw,6.5rem)}
body.wolf .wsec-head{max-width:920px;margin-bottom:clamp(3rem,5.5vw,4.6rem)}
body.wolf .wsec-head .w-h2{margin-top:1.15rem;text-shadow:0 2px 18px rgba(11,15,18,.65)}
body.wolf .wsec-head .w-lead{margin-top:1.35rem;text-shadow:0 1px 12px rgba(11,15,18,.8)}
body.wolf .wsec-head .w-eyebrow{text-shadow:0 1px 8px rgba(11,15,18,.8)}
/* full-bleed scene plate behind a section */
body.wolf .wplate{position:absolute;inset:0;z-index:0;pointer-events:none}
body.wolf .wplate img{width:100%;height:112%;object-fit:cover;object-position:center;will-change:transform}
body.wolf .wplate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--w-bg0) 0%,rgba(11,15,18,.34) 16%,rgba(11,15,18,.5) 55%,var(--w-bg0) 100%)}
body.wolf .wsec>.wrap{position:relative;z-index:2}
/* svg путanja segment */
body.wolf .wpath{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%}
body.wolf .wpath path{fill:none;stroke-linecap:round}
body.wolf .wpath .wpath-glow{stroke:rgba(230,199,122,.16);stroke-width:9}
body.wolf .wpath .wpath-core{stroke:var(--w-gold-hi);stroke-width:2.2;filter:drop-shadow(0 0 6px rgba(230,199,122,.65))}
body.wolf .wpath .wpath-ember{fill:var(--w-gold-hi);filter:drop-shadow(0 0 8px rgba(230,199,122,.9))}
/* usluge: put mora da se vidi — svetliji overlay, kadar na donju polovinu plate-a */
body.wolf #usluge .wplate img{object-position:center bottom}
body.wolf #usluge .wplate::after{background:linear-gradient(180deg,var(--w-bg0) 0%,rgba(11,15,18,.22) 16%,rgba(11,15,18,.36) 58%,var(--w-bg0) 100%)}

/* wolf cameo cutouts */
body.wolf .wcameo{position:absolute;z-index:1;pointer-events:none;opacity:.9}
body.wolf .wcameo img{width:100%;height:auto;filter:brightness(.5) contrast(1.05) drop-shadow(0 18px 30px rgba(0,0,0,.6))}

/* ============================================================
   IZAZOV — problem
   ============================================================ */
body.wolf .wpain{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;max-width:1080px}
body.wolf .wpain-item{border-top:1px solid var(--w-line);padding-top:1.35rem}
body.wolf .wpain-item svg{width:26px;height:26px;stroke:var(--w-gold);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.wolf .wpain-item h3{font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--w-text);margin-top:.9rem;line-height:1.4}
body.wolf .wpain-item p{font-size:.86rem;line-height:1.6;color:var(--w-muted);margin-top:.45rem}
body.wolf .wnudge{margin-top:clamp(2.8rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--w-line);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;justify-content:space-between;max-width:1080px}
body.wolf .wnudge p{font-family:var(--w-serif);font-style:italic;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--w-text-2);max-width:44ch}
body.wolf .wnudge a{white-space:nowrap}

/* ============================================================
   USLUGE — 6 amber-line circles (rebuilt as SVG, not the glossy sheet)
   ============================================================ */
body.wolf .wsvc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.8rem);max-width:1120px}
body.wolf .wsvc-item{display:grid;grid-template-columns:74px 1fr;gap:1.15rem;align-items:start;
  padding:1.35rem 1.1rem;border-radius:6px;transition:background .4s var(--ease-out)}
body.wolf a.wsvc-item{color:inherit}
body.wolf a.wsvc-item:hover{background:rgba(26,31,36,.62)}
body.wolf a.wsvc-item:hover .wsvc-ic{border-color:var(--w-gold-hi);box-shadow:0 0 22px rgba(200,154,60,.28)}
body.wolf a.wsvc-item:hover .wsvc-go{color:var(--w-gold-hi)}
body.wolf .wsvc-ic{width:74px;height:74px;border-radius:50%;border:1px solid var(--w-line-2);
  display:grid;place-items:center;background:rgba(11,15,18,.5);transition:border-color .4s,box-shadow .4s}
body.wolf .wsvc-ic svg{width:30px;height:30px;stroke:var(--w-gold-hi);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.wolf .wsvc-item h3{font-family:var(--font-body);font-weight:600;font-size:1.02rem;letter-spacing:.06em;text-transform:uppercase;color:var(--w-text);line-height:1.3}
body.wolf .wsvc-item p{font-size:.88rem;line-height:1.62;color:var(--w-muted);margin-top:.5rem;max-width:30ch}
body.wolf .wsvc-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.65rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--w-muted);transition:color .3s}
body.wolf .wsvc-go svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}

/* ============================================================
   RADOVI — 5 real project cards, snap row (mockup rhythm)
   ============================================================ */
body.wolf .wworks{position:relative}
body.wolf .wworks-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,78vw);gap:1.25rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 1.4rem;
  scrollbar-width:thin;scrollbar-color:var(--w-gold) rgba(255,255,255,.06)}
body.wolf .wworks-track::-webkit-scrollbar{height:4px}
body.wolf .wworks-track::-webkit-scrollbar-thumb{background:var(--w-gold);border-radius:2px}
body.wolf .wworks-track::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
body.wolf .wwork{scroll-snap-align:start;display:block;color:inherit;
  border:1px solid var(--w-line);border-radius:6px;overflow:hidden;background:rgba(18,23,28,.72);
  backdrop-filter:blur(4px);transition:border-color .4s,transform .5s var(--ease-out),box-shadow .5s}
body.wolf .wwork:hover{border-color:var(--w-gold);transform:translateY(-6px);box-shadow:var(--w-shadow)}
body.wolf .wwork-shot{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--w-line)}
body.wolf .wwork-shot img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.92);transition:transform .8s var(--ease-out)}
body.wolf .wwork:hover .wwork-shot img{transform:scale(1.04)}
body.wolf .wwork-meta{display:block;padding:1.15rem 1.2rem 1.3rem}
body.wolf .wwork-meta .w-meta{display:block}
body.wolf .wwork-meta .w-meta{color:var(--w-gold)}
body.wolf .wwork-meta h3{font-family:var(--w-serif);font-weight:560;font-size:1.22rem;color:var(--w-text);margin-top:.5rem}
body.wolf .wwork-meta p{font-size:.85rem;line-height:1.6;color:var(--w-muted);margin-top:.4rem}
body.wolf .wwork-badge{display:inline-block;margin-top:.75rem;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--w-text-2);
  border:1px solid var(--w-line);border-radius:999px;padding:.24rem .6rem}
body.wolf .wwork-badge.is-live{color:#9BD8A9;border-color:rgba(95,208,139,.35)}
body.wolf .wworks-foot{display:flex;justify-content:flex-end;padding:0 var(--pad);margin-top:.6rem}
body.wolf .wlink{display:inline-flex;align-items:center;gap:.5rem;color:var(--w-gold-hi);
  font-weight:600;font-size:.9rem;letter-spacing:.04em;border-bottom:1px solid transparent;transition:border-color .3s}
body.wolf .wlink:hover{border-color:var(--w-gold-hi)}
body.wolf .wlink svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none}

/* ============================================================
   PROCES — stations along the path
   ============================================================ */
body.wolf .wproc{position:relative;max-width:900px;margin-inline:auto}
body.wolf .wproc-line{position:absolute;left:29px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,transparent,var(--w-gold) 8%,var(--w-gold) 92%,transparent);opacity:.4}
body.wolf .wproc-step{position:relative;display:grid;grid-template-columns:60px 1fr;gap:1.4rem;
  padding:1.7rem 0;align-items:start}
body.wolf .wproc-num{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--w-line-2);background:var(--w-bg0);
  font-family:var(--w-serif);font-size:1.18rem;color:var(--w-gold-hi);
  transition:border-color .4s,box-shadow .4s;position:relative;z-index:1}
body.wolf .wproc-step.is-lit .wproc-num{border-color:var(--w-gold-hi);box-shadow:0 0 24px rgba(200,154,60,.35)}
body.wolf .wproc-step h3{font-family:var(--w-serif);font-weight:560;font-size:1.3rem;color:var(--w-text)}
body.wolf .wproc-step p{margin-top:.5rem;font-size:.94rem;line-height:1.7;color:var(--w-text-2);max-width:52ch}

/* ============================================================
   POVERENJE — R54B testimonials, wolf skin (text untouched)
   ============================================================ */
body.wolf .ftm-lead,body.wolf .ftm-s{background:rgba(18,23,28,.78);border:1px solid var(--w-line)}
body.wolf .ftm-badge{background:var(--w-gold);color:var(--w-gold-deep);border-color:var(--w-gold)}
body.wolf .ftm-quote p,body.wolf .ftm-s blockquote p{color:var(--w-text-2)}
body.wolf .ftm-sig .ftm-name,body.wolf .ftm-s-name{font-family:var(--w-serif);font-style:italic;color:var(--w-text)}
body.wolf .ftm-ini{border-color:var(--w-line-2);color:var(--w-gold-hi)}
body.wolf .ftm-link,body.wolf .ftm-s-link{color:var(--w-gold-hi)}

/* ============================================================
   CENE — 3 locked packages
   ============================================================ */
body.wolf .wprice{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;max-width:1080px}
body.wolf .wprice-card{position:relative;border:1px solid var(--w-line);border-radius:6px;
  padding:2rem 1.7rem 1.9rem;background:rgba(18,23,28,.72);display:flex;flex-direction:column;
  transition:border-color .4s,transform .5s var(--ease-out)}
body.wolf .wprice-card:hover{border-color:var(--w-line-2);transform:translateY(-4px)}
body.wolf .wprice-card.featured{border-color:var(--w-gold);background:linear-gradient(180deg,rgba(200,154,60,.10),rgba(18,23,28,.8) 42%)}
body.wolf .wprice-card.featured::before{content:"naša preporuka";position:absolute;top:-.72rem;left:1.6rem;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--w-gold-deep);background:var(--w-gold);padding:.28rem .6rem;border-radius:3px}
body.wolf .wprice-name{font-family:var(--w-serif);font-weight:560;font-size:1.35rem;color:var(--w-text)}
body.wolf .wprice-for{font-size:.85rem;color:var(--w-muted);margin-top:.45rem;line-height:1.55;min-height:2.6em}
body.wolf .wprice-amt{margin-top:1.2rem;font-family:var(--w-serif);color:var(--w-text);font-size:2.6rem;line-height:1}
body.wolf .wprice-amt .cur{font-size:1.4rem;color:var(--w-gold-hi);margin-left:.2rem}
body.wolf .wprice-note{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--w-muted);margin-top:.5rem}
body.wolf .wprice-list{list-style:none;margin:1.25rem 0 1.6rem;padding:0;display:grid;gap:.55rem;flex:1}
body.wolf .wprice-list li{position:relative;padding-left:1.3rem;font-size:.89rem;line-height:1.55;color:var(--w-text-2)}
body.wolf .wprice-list li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;
  border-radius:50%;background:var(--w-gold);opacity:.8}
body.wolf .wprice-cta{justify-content:center}
body.wolf .wprice-foot{margin-top:1.8rem;font-size:.83rem;line-height:1.7;color:var(--w-muted);max-width:72ch}
body.wolf .wprice-foot a{color:var(--w-gold-hi)}

/* ---------- vodiči mini row ---------- */
body.wolf .wguides{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
body.wolf .wguides a{border:1px solid var(--w-line);border-radius:999px;padding:.6rem 1.05rem;
  font-size:.84rem;color:var(--w-text-2);transition:border-color .3s,color .3s}
body.wolf .wguides a:hover{border-color:var(--w-gold);color:var(--w-gold-hi)}
body.wolf .wguides .wlink{border:none;padding:.6rem .3rem}

/* ============================================================
   FAQ — wolf skin over site.css accordion
   ============================================================ */
body.wolf .faq{border-color:var(--w-line)}
body.wolf .faq-item{border-color:var(--w-line)}
body.wolf .faq-q{color:var(--w-text)}
body.wolf .faq-q:hover{color:var(--w-gold-hi)}

/* ============================================================
   KONTAKT — final clearing
   ============================================================ */
body.wolf .wfinal{text-align:center}
body.wolf .wfinal .wsec-head{margin-inline:auto}
body.wolf .wfinal .w-lead{margin-inline:auto}
body.wolf .wfinal-cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.4rem}
body.wolf .wfinal-alt{margin-top:1.9rem;font-size:.9rem;color:var(--w-text-2)}
body.wolf .wfinal-alt a{color:var(--w-gold-hi);border-bottom:1px solid rgba(230,199,122,.4)}
body.wolf .wfinal-note{margin-top:2.6rem;font-family:var(--w-serif);font-style:italic;font-size:.98rem;color:var(--w-text-2);opacity:.85}
body.wolf .wfinal .wplate::after{background:linear-gradient(180deg,var(--w-bg0) 0%,rgba(11,15,18,.30) 26%,rgba(11,15,18,.5) 70%,var(--w-bg0) 100%)}
body.wolf .wfinal .w-lead{color:var(--w-text)}
@media (max-width:760px){
  body.wolf .wfinal .wplate::after{background:linear-gradient(180deg,var(--w-bg0) 0%,rgba(11,15,18,.55) 30%,rgba(11,15,18,.62) 70%,var(--w-bg0) 100%)}
}

/* footer tone */
body.wolf .site-footer{border-top:1px solid var(--w-line)}

/* ============================================================
   REVEAL fallback (site.js .reveal handles base) — wolf stagger
   ============================================================ */
body.wolf .wsvc-item.reveal,body.wolf .wpain-item.reveal{transition-duration:.9s}

/* ============================================================
   RESPONSIVE — mobile is directed, not scaled
   ============================================================ */
@media (max-width:1080px){
  body.wolf .wsvc{grid-template-columns:repeat(2,1fr)}
  body.wolf .wpain{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.3rem}
}
@media (max-width:900px){
  body.wolf .wh-rail{display:none}
  body.wolf .wh-media img,body.wolf .wh-media video{object-position:26% center}
  body.wolf .wcameo{display:none}
  body.wolf .wprice{grid-template-columns:1fr;max-width:520px}
  body.wolf .wprice-for{min-height:0}
}
@media (max-width:760px){
  /* mobile crop guide 390x844: text safe zone, wolf+path stay in frame */
  body.wolf .wh-overlay{align-items:flex-end}
  body.wolf .wh-copy{max-width:100%;padding-block:0 clamp(6.5rem,16svh,8.5rem)}
  body.wolf .wh .w-h1{font-size:clamp(2.05rem,9vw,2.6rem)}
  body.wolf .wh-sub{max-width:34ch}
  body.wolf .wh-scrim{background:
    linear-gradient(180deg,rgba(11,15,18,.5) 0%,rgba(11,15,18,0) 24%,rgba(11,15,18,.08) 46%,rgba(11,15,18,.88) 78%,rgba(11,15,18,.97) 100%)}
  body.wolf .wh-pilot{bottom:auto;top:calc(var(--nav-h) + .9rem);right:1rem;padding:.5rem .8rem;font-size:.74rem}
  body.wolf .wh-replay{top:calc(var(--nav-h) + .9rem);left:1rem;right:auto}
  body.wolf .wsvc{grid-template-columns:1fr;gap:1rem}
  body.wolf .wsvc-item{grid-template-columns:58px 1fr;padding:1rem .6rem}
  body.wolf .wsvc-ic{width:58px;height:58px}
  body.wolf .wsvc-item p{max-width:none}
  body.wolf .wpain{grid-template-columns:1fr 1fr;gap:1.5rem 1.1rem}
  body.wolf .wpain-item h3{font-size:.88rem}
  body.wolf .wnudge{flex-direction:column;align-items:flex-start}
  body.wolf .wproc-line{left:23px}
  body.wolf .wproc-step{grid-template-columns:48px 1fr;gap:1rem;padding:1.3rem 0}
  body.wolf .wproc-num{width:48px;height:48px;font-size:1rem}
  body.wolf .wworks-track{grid-auto-columns:min(300px,84vw)}
  body.wolf .wsec{padding-block:clamp(4.6rem,14vw,6rem)}
}
@media (max-width:430px){
  body.wolf .wpain{grid-template-columns:1fr}
  body.wolf .wh .w-h1{font-size:clamp(1.95rem,8.6vw,2.3rem)}
}

/* ============================================================
   REDUCED MOTION — full content, no choreography
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  body.wolf .wh-copy>*{animation:none;opacity:1;transform:none}
  body.wolf .wh-rail::after{animation:none;opacity:.6}
  body.wolf .wh.is-ended .wh-ember{animation:none;opacity:.7}
  body.wolf .wh-media video{display:none}
  body.wolf .wpath .wpath-core,body.wolf .wpath .wpath-glow{stroke-dashoffset:0 !important;stroke-dasharray:none !important}
  body.wolf .wplate img{transform:none !important}
  body.wolf .wwork,body.wolf .wprice-card,body.wolf .w-btn{transition:none}
}