:root{
  /* Red & White — asked for by the owner, 2026-09-12: "Make me a sample with the color red and white" */
  --accent:#D31F26; --accent-hover:#E8393F; --accent-dark:#9C1319; --accent-light:#F3A9AB;
  --bg:#FFFFFF; --bg-2:#F4F5F7; --card:#FFFFFF; --card-2:#F7F8FA;
  --dark-green-2:color-mix(in srgb,var(--accent) 12%,#ffffff);
  --tint-13:color-mix(in srgb,var(--accent) 9%,var(--bg));
  --ink:#262125; --muted:#59606B; --muted-2:#C6CBD3;
  --hair:rgba(20,22,26,.13);
  --sh:0 16px 38px -22px rgba(0,0,0,.8); --sh-lg:0 40px 80px -34px rgba(0,0,0,.85);
  --glow:0 0 60px -12px color-mix(in srgb,var(--accent) 55%,transparent);
  --wrap:1180px; --font:'Epilogue',system-ui,sans-serif; --disp:'Oswald','Arial Narrow',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{font-family:var(--font);color:var(--ink);line-height:1.6;overflow-x:hidden;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;background:radial-gradient(100% 42% at 50% 0%,color-mix(in srgb,var(--accent) 7%,var(--bg)),var(--bg))}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,44px);width:100%}
section{padding:clamp(3.4rem,8vw,6rem) 0;position:relative}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:.98;letter-spacing:.005em;text-transform:uppercase}
.eyebrow{font-family:var(--font);font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
h2{font-size:clamp(2.3rem,6.4vw,4.2rem);font-weight:700}
.lede{font-family:var(--font);color:var(--muted);font-size:clamp(1rem,1.4vw,1.14rem);max-width:52ch;margin-top:1rem;line-height:1.65;text-transform:none;letter-spacing:-.01em;overflow-wrap:anywhere}
.text-accent{color:var(--accent)}
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:var(--accent);box-shadow:var(--glow)}
.nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
.brand{font-family:'Fraunces','Georgia',serif;font-weight:600;font-size:clamp(1rem,3.4vw,1.32rem);letter-spacing:.005em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.nav-links{display:none;gap:30px;font-size:.94rem;color:var(--muted);font-weight:500}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);transition:width .25s}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
.nav-book{font-family:var(--font);font-size:.85rem;font-weight:700;padding:10px 18px;border-radius:99px;background:var(--accent);color:var(--bg);transition:.2s;white-space:nowrap;flex:none}
.nav-book:hover{background:var(--accent-hover)}.nav-book:active{transform:scale(.96)}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:116px 20px 86px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:1;animation:ken 26s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.04)}to{transform:scale(1.15) translateY(-1.5%)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 68% at 50% 52%,rgba(8,10,14,.58) 0%,rgba(8,10,14,.34) 40%,rgba(8,10,14,.05) 76%),linear-gradient(180deg,rgba(8,10,14,.44) 0%,transparent 24%,transparent 72%,rgba(8,10,14,.5) 100%)}
.hero>:not(.hero-bg){position:relative;z-index:1}
.hero h1{font-size:clamp(2.9rem,10vw,6.6rem);font-weight:700;letter-spacing:.004em;line-height:.92;max-width:16ch;margin:0 auto;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.62),0 1px 3px rgba(0,0,0,.55)}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{display:block;transform:translateY(103%);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .ln:nth-child(2)>span{animation-delay:.08s}.hero h1 .ln:nth-child(3)>span{animation-delay:.16s}
@keyframes rise{to{transform:translateY(0)}}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.hero h1 .text-accent{animation:ignite 1.9s 2.4s ease-out both}
@keyframes ignite{0%{filter:brightness(.72);text-shadow:0 2px 20px rgba(0,0,0,.6)}45%{filter:brightness(1.3);text-shadow:0 2px 20px rgba(0,0,0,.6),0 0 34px color-mix(in srgb,var(--accent) 92%,transparent),0 0 62px color-mix(in srgb,var(--accent) 55%,transparent)}100%{filter:brightness(1);text-shadow:0 2px 20px rgba(0,0,0,.62),0 0 16px color-mix(in srgb,var(--accent) 45%,transparent)}}
.hero p.sub{font-family:var(--font);color:rgba(255,255,255,.92);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:46ch;margin:22px auto 0;opacity:0;animation:pop .7s .45s forwards;text-shadow:0 2px 18px rgba(0,0,0,.5);overflow-wrap:anywhere}
.hero-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:13px;justify-content:center;opacity:0;animation:pop .7s .6s forwards}
.btn{font-family:var(--font);display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:1rem;padding:16px 28px;border-radius:12px;border:0;cursor:pointer;transition:transform .18s,background .25s}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:var(--bg);box-shadow:var(--glow)}
.btn-primary:hover{background:var(--accent-hover)}.btn-primary:active{transform:scale(.97)}
.btn-ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent-light)}.btn-ghost:active{transform:scale(.97)}
.hero-strip{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;margin-top:32px;font-family:var(--font);font-size:.9rem;color:rgba(255,255,255,.88);opacity:0;animation:pop .7s .75s forwards}
.hero-strip span{display:inline-flex;align-items:center;gap:8px}
.hero-strip svg{width:16px;height:16px;color:var(--accent)}
.statement{text-align:center}
.lightup{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:clamp(1.9rem,5.4vw,3.6rem);line-height:1.12;letter-spacing:.01em;max-width:20ch;margin:0 auto}
.lightup .w{color:var(--muted-2);transition:color .3s ease}
.lightup .w.lit{color:var(--ink)}.lightup .w.hot{color:var(--accent)}
.shead{max-width:60ch;margin-bottom:clamp(2rem,4vw,3rem)}.shead h2{margin-top:.5rem}
.craft-wrap{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.craft-img{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--sh-lg);aspect-ratio:4/3;border:1px solid var(--hair)}
.craft-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.craft-img:hover img{transform:scale(1.06)}
.craft-badge{position:absolute;left:16px;bottom:16px;background:var(--accent);color:var(--bg);border-radius:13px;padding:11px 16px}
.craft-badge .est{font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1}
.craft-badge small{font-family:var(--font);font-size:.72rem;display:block;line-height:1.35;font-weight:600}
.craft ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:24px}
.craft li{font-family:var(--font);display:flex;gap:13px;align-items:flex-start;font-size:1.02rem;color:var(--ink);text-transform:none;overflow-wrap:anywhere}
.craft li .tick{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:var(--bg)}
.craft li .tick svg{width:15px;height:15px}
.hscroll{position:relative}
.hscroll-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.1rem,2.6vw,1.9rem)}
.hscroll-head{flex:none}
.htrack{display:flex;gap:clamp(10px,1.4vw,16px);padding:0 clamp(20px,5vw,44px);will-change:transform}
.hcard{flex:0 0 auto;height:min(56svh,500px);aspect-ratio:4/5;border-radius:22px;overflow:hidden;position:relative;box-shadow:var(--sh-lg);border:1px solid var(--hair);contain:content;transform:translateZ(0)}
.hcard img{position:absolute;top:0;left:-13%;width:126%;height:100%;object-fit:cover;will-change:transform;backface-visibility:hidden}
.hprogress{height:4px;border-radius:4px;background:var(--hair);margin:0 clamp(20px,5vw,44px);overflow:hidden;flex:none}
.hprogress i{display:block;height:100%;width:0;background:var(--accent);box-shadow:var(--glow)}
.hscroll.static{height:auto!important}
.hscroll.static .hscroll-pin{position:relative;height:auto}
.hscroll.static .htrack{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none!important}
.hscroll.static .htrack::-webkit-scrollbar{display:none}
.hscroll.static .hcard{scroll-snap-align:start}
.hscroll.static .hprogress{display:none}
.wall{columns:1;column-gap:16px}
.tcard{break-inside:avoid;margin-bottom:16px;background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:22px}
.tcard .stars{display:flex;gap:3px;margin-bottom:12px}
.tcard .stars svg{width:17px;height:17px;color:#ffc63d;filter:drop-shadow(0 0 6px rgba(255,198,61,.55))}
.tcard p{font-family:var(--font);font-size:.98rem;color:var(--ink);line-height:1.6;text-transform:none;letter-spacing:-.01em;overflow-wrap:anywhere}
.tcard .who{display:flex;align-items:center;gap:11px;margin-top:16px}
.tcard .who img,.tcard .who .av{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--hair);flex:none}
.tcard .who .av{display:grid;place-items:center;font-family:var(--disp);font-weight:700;color:var(--bg);background:var(--accent);font-size:1.05rem}
.tcard .who b{font-family:var(--font);font-size:.9rem;font-weight:700}
.tcard .who small{font-family:var(--font);color:var(--muted);font-size:.76rem;display:block}
.visit-wrap{display:grid;grid-template-columns:1fr;gap:18px}
.visit-card{background:var(--card);border:1px solid var(--hair);border-radius:20px;overflow:hidden}
.vmap{height:180px;position:relative;background:var(--dark-green-2);overflow:hidden}
.vmap .g{position:absolute;inset:0;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:28px 28px}
.vmap .road{position:absolute;height:6px;background:rgba(210,224,245,.08);border-radius:3px}
.vmap .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);color:var(--accent)}
.vmap .pin svg{width:38px;height:38px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.vmap .pulse{position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--accent) 45%,transparent);animation:pmap 2s ease-out infinite}
@keyframes pmap{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}100%{box-shadow:0 0 0 30px transparent}}
.vbody{padding:22px}
.open-now{font-family:var(--font);display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:700;color:var(--accent);margin-bottom:14px}
.open-now .d{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:live 1.8s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.hours{list-style:none;font-family:var(--font)}
.hours li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--hair);font-size:.96rem;gap:10px}
.hours li:last-child{border-bottom:0}
.hours li.today{color:var(--accent);font-weight:700}
.hours li .day{color:var(--muted)}.hours li.today .day{color:var(--accent)}
.addr{font-family:var(--font);display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:.96rem;color:var(--ink)}
.addr svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:2px}
.addr span{overflow-wrap:anywhere;min-width:0}
.final{text-align:center}
.final-card{border-radius:26px;padding:clamp(2.6rem,6vw,4.6rem) clamp(1.4rem,4vw,3rem);position:relative;overflow:hidden;background:var(--accent);color:var(--bg);box-shadow:var(--glow)}
.final-card .eyebrow{color:var(--accent-dark)}.final-card .eyebrow::before{background:var(--accent-dark)}
.final-card h2{font-size:clamp(2.4rem,7vw,4.4rem);color:var(--bg);margin-top:.5rem}
.final-card p{font-family:var(--font);color:rgba(10,13,18,.8);margin:14px auto 28px;max-width:42ch;font-weight:500;overflow-wrap:anywhere}
.final-card .btn{background:var(--bg);color:var(--accent)}.final-card 
footer{padding:44px 0 calc(44px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:var(--bg-2)}
.foot-in{display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;max-width:100%}
.foot-in .brand{max-width:88vw;white-space:normal;overflow:visible;text-overflow:clip;font-size:clamp(1.1rem,4vw,1.5rem)}
footer small{font-family:var(--font);color:var(--muted);font-size:.8rem;line-height:1.8;overflow-wrap:anywhere;max-width:38ch}
.made{opacity:.6;font-size:.74rem}
/* ===== AI ASSISTANT BUTTON (professional) ===== */
.mascot{position:fixed;right:clamp(14px,4vw,26px);bottom:calc(22px + env(safe-area-inset-bottom));z-index:85}
.mascot-char{position:relative;width:64px;height:64px;cursor:pointer;border-radius:50%;animation:mfloat 3.6s ease-in-out infinite}
.mascot-char:active{animation:none;transform:scale(.94)}
@keyframes mfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.m-ring{position:absolute;inset:-4px;border-radius:50%;animation:mring 2.8s ease-out infinite}
@keyframes mring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}70%{box-shadow:0 0 0 13px transparent}100%{box-shadow:0 0 0 0 transparent}}
.m-disc{position:absolute;inset:0;border-radius:50%;background:linear-gradient(150deg,var(--accent-hover),var(--accent) 55%,var(--accent-dark));box-shadow:var(--sh-lg),var(--glow);display:grid;place-items:center}
.m-disc::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 1px 2px rgba(255,255,255,.4)}
.mascot-char svg{width:56%;height:56%;color:#fff;position:relative}
.m-on{display:none}
@keyframes mon{0%{box-shadow:0 0 0 0 rgba(47,212,122,.6)}100%{box-shadow:0 0 0 7px transparent}}
.scrim{position:fixed;inset:0;z-index:98;background:rgba(5,7,11,.66);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.scrim.open{opacity:1;visibility:visible}
.bot-ava{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--bg);position:relative}
.bot-ava svg{width:23px;height:23px}
.bot-ava .on{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}
.panel{position:fixed;left:50%;bottom:0;transform:translate(-50%,103%);z-index:99;width:100%;max-width:440px;height:min(80svh,640px);background:var(--bg-2);border-radius:24px 24px 0 0;border:1px solid var(--hair);border-bottom:0;box-shadow:0 -30px 80px -20px #000;display:flex;flex-direction:column;overflow:hidden;visibility:hidden;transition:transform .42s cubic-bezier(.16,1,.3,1),visibility .42s}
.panel.open{transform:translate(-50%,0);visibility:visible}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--hair);background:var(--card)}
.chat-head .bot-ava .on{border-color:var(--card)}
.chat-head h4{font-family:var(--disp);font-size:1.14rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head small{font-family:var(--font);color:var(--accent);font-size:.76rem;display:flex;align-items:center;gap:6px;font-weight:600}
.chat-head small .d{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.chat-head .x{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--card-2);border:1px solid var(--hair);color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.chat-head .x svg{width:18px;height:18px}
.log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:11px;scrollbar-width:none}.log::-webkit-scrollbar{display:none}
.msg{font-family:var(--font);max-width:84%;padding:12px 15px;border-radius:16px;font-size:.92rem;line-height:1.5;animation:msgin .4s cubic-bezier(.16,1,.3,1) both;overflow-wrap:anywhere}
@keyframes msgin{from{opacity:0;transform:translateY(9px) scale(.97)}}
.msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--hair);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--bg);font-weight:600;border-bottom-right-radius:5px}
.msg.bot b{color:var(--accent)}
.typing{align-self:flex-start;background:var(--card);border:1px solid var(--hair);border-radius:16px;border-bottom-left-radius:5px;padding:14px 16px;display:flex;gap:4px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.quick{display:flex;gap:8px;overflow-x:auto;padding:13px 18px;border-top:1px solid var(--hair);background:var(--card);scrollbar-width:none}.quick::-webkit-scrollbar{display:none}
.quick button{font-family:var(--font);flex:none;white-space:nowrap;font-size:.84rem;font-weight:600;padding:10px 15px;border-radius:99px;background:var(--card-2);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hair));color:var(--ink);cursor:pointer;transition:.2s}
.quick button:hover{background:var(--tint-13);border-color:var(--accent)}.quick button:active{transform:scale(.95)}
.chat-input{display:flex;gap:9px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:var(--bg-2)}
.chat-input input{flex:1;min-width:0;background:var(--card);border:1px solid var(--hair);border-radius:99px;padding:13px 17px;color:var(--ink);font-family:var(--font);font-size:.92rem;outline:none;transition:border-color .2s}
.chat-input input::placeholder{color:var(--muted-2)}
.chat-input input:focus{border-color:var(--accent)}
.chat-input button{width:46px;height:46px;flex:none;border-radius:50%;background:var(--accent);color:var(--bg);border:0;display:grid;place-items:center;cursor:pointer;box-shadow:var(--glow);transition:transform .15s}
.chat-input button:active{transform:scale(.92)}.chat-input button svg{width:19px;height:19px}
.reveal{opacity:0;transform:scale(.85);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
@media(min-width:640px){.wall{columns:2}}
@media(min-width:900px){.nav-links{display:flex}.brand{max-width:none}.craft-wrap{grid-template-columns:1.05fr 1fr}.wall{columns:3}.visit-wrap{grid-template-columns:1.2fr 1fr;align-items:start}.panel{left:auto;right:clamp(20px,4vw,40px);transform:translateY(103%);border-radius:24px;bottom:104px;height:min(70svh,560px)}.panel.open{transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.hero h1 .ln>span{transform:none}.reveal{opacity:1;transform:none}.lightup .w{color:var(--ink)}.hero-bg img{animation:none}}
/* ---- light-theme patches (dark template -> bright bg) ---- */
.final-card p{color:color-mix(in srgb,#fff 82%,var(--accent))}
.final-card .eyebrow{color:color-mix(in srgb,#fff 72%,var(--accent))}
.final-card .eyebrow::before{background:color-mix(in srgb,#fff 72%,var(--accent))}
/* ---- contact / quote hub (moved before reviews, all owner-comms in one box) ---- */
.contact-hub{display:flex;flex-direction:column;align-items:center;gap:6px}
.contact-hub h2{margin-top:.4rem}.contact-hub p{margin-bottom:10px}
.hub-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
.contact-hub .btn{gap:9px}
.hub-call{background:var(--bg);color:var(--accent)}.hub-call:hover{background:#fff}
.hub-text,.hub-quote{background:color-mix(in srgb,#fff 15%,transparent);border:1px solid color-mix(in srgb,#fff 55%,transparent);color:#fff;backdrop-filter:blur(4px)}
.hub-text:hover,.hub-quote:hover{background:color-mix(in srgb,#fff 24%,transparent)}
.hub-meta{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:26px;font-family:var(--font);font-size:.87rem;color:color-mix(in srgb,#fff 85%,var(--accent))}
.hub-meta span{display:inline-flex;align-items:center;gap:8px}.hub-meta svg{width:16px;height:16px;opacity:.9}
.hub-open .d{width:9px;height:9px;border-radius:50%;background:#84e6a0;animation:live 1.8s infinite}
/* ---- reviews: subtle animated background (drifting glow + twinkling stars) ---- */
#reviews{position:relative;overflow:hidden}
#reviews::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(42% 48% at 14% 22%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),radial-gradient(38% 46% at 86% 78%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%);
  animation:revdrift 17s ease-in-out infinite alternate}
#reviews::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(2px 2px at 18% 30%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),radial-gradient(2px 2px at 62% 20%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 60%),radial-gradient(2px 2px at 82% 64%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),radial-gradient(1.5px 1.5px at 40% 76%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 60%);
  animation:revtwinkle 5s ease-in-out infinite}
#reviews>.wrap{position:relative;z-index:1}
@keyframes revdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-16px,0) scale(1.05)}}
@keyframes revtwinkle{0%,100%{opacity:.28}50%{opacity:.62}}

#intro{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 32%,var(--bg-2),var(--bg));will-change:transform}
#intro .iw{position:relative;font-family:'Fraunces',Georgia,serif;font-weight:600;
  letter-spacing:-.01em;font-size:clamp(1.7rem,7.4vw,3.1rem);line-height:1.08;text-align:center;
  padding:0 24px;max-width:min(92vw,15ch);color:transparent;
  background:linear-gradient(100deg,var(--accent-dark) 0%,var(--accent) 32%,var(--accent-light) 48%,var(--accent) 64%,var(--accent-dark) 100%);
  background-size:230% 100%;-webkit-background-clip:text;background-clip:text;
  opacity:0;transform:translateY(22px) scale(.97);
  animation:iwUp .8s cubic-bezier(.16,1,.3,1) .12s forwards, iwSheen 2.8s linear .9s infinite}
@keyframes iwUp{to{opacity:1;transform:translateY(0) scale(1)}}
/* the name must leave WITH the panel. iwUp is fill:forwards and a forwards
   animation overrides a transition, so it has to be cancelled on .done or the
   word hangs on screen for a beat after everything else has gone. */
#intro.done .iw,#intro.done .ch{animation:none!important}
@keyframes iwSheen{to{background-position:230% 0}}
@media(prefers-reduced-motion:reduce){}

/* the panel is a wall of tiles that blows apart in a wave from the centre */
#intro .tile{position:absolute;background:var(--bg-2);will-change:transform,opacity;
  transition:transform .78s cubic-bezier(.7,0,.2,1),opacity .6s ease}
#intro .iw{z-index:3}
#intro.done .tile{transform:scale(.24) rotate(var(--r,8deg));opacity:0}
#intro.done .iw{opacity:0;transform:scale(1.15);transition:.45s ease}
#intro.done{background:transparent;transition:background .05s .1s}


/* the canvas is first in the DOM and sits at z-index 0, so every positioned
   element in the template paints over it without any of them being touched.
   Do NOT add a blanket `body > *` position rule here: the nav, the progress
   bar, the mascot and the pinned carousel are all position:fixed/sticky and
   forcing them to relative collapses the whole page. */
#amb-layer{position:fixed;inset:0;z-index:0;pointer-events:none}
#amb-layer canvas{width:100%;height:100%;display:block}
footer{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){#amb-layer{display:none}
}

.mascot{display:none!important}

/* brand was inheriting ink and vanishing against the hero photo */
header.nav .brand{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
header.nav .nav-links a{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(0,0,0,.55)}
header.nav.scrolled .brand{color:var(--ink);text-shadow:none}
header.nav.scrolled .nav-links a{color:var(--muted);text-shadow:none}

/* hero type has to read over ANY photo, bright or dark */
.hero h1{text-shadow:0 2px 3px rgba(0,0,0,.35),0 6px 30px rgba(0,0,0,.55),0 1px 90px rgba(0,0,0,.4)}
.hero h1 .text-accent{-webkit-text-stroke:1.5px rgba(255,255,255,.34);paint-order:stroke fill}
.hero .sub{text-shadow:0 1px 2px rgba(0,0,0,.45),0 3px 20px rgba(0,0,0,.6);color:#fff}
.hero .hero-strip span{text-shadow:0 1px 12px rgba(0,0,0,.65);color:#fff}
.hero .hero-bg::after{content:'';position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.12) 42%,rgba(0,0,0,.55));pointer-events:none}

/* the shipped .btn:hover was #000; on a phone it sticks after a tap */
.btn:hover,.btn:focus{background:var(--accent-hover);color:#fff}
.hub-call,.hub-call:hover,.hub-call:focus{background:#fff;color:var(--accent-dark)}
.hub-text:hover,.hub-quote:hover{background:color-mix(in srgb,#fff 30%,transparent);color:#fff}
.btn:active{transform:scale(.97)}
a,button{-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 22%,transparent)}

/* only the CARD carries the color; the section keeps the clean page ground */
.final{background:none}
.final-card{background:linear-gradient(160deg,var(--accent-hover),var(--accent) 58%,var(--accent-dark));
 box-shadow:0 30px 70px -30px color-mix(in srgb,var(--accent) 60%,transparent)}
.final .eyebrow{color:#fff;opacity:.92}
.final h2,.final p{color:#fff}
.hub-meta{color:rgba(255,255,255,.92)}

/* lightup: brighter lit state, real glow on the hot words */
.lightup .w{color:color-mix(in srgb,var(--ink) 22%,transparent);transition:color .45s,text-shadow .45s}
.lightup .w.lit{color:var(--ink)}
.lightup .w.hot{color:var(--accent);text-shadow:0 0 26px color-mix(in srgb,var(--accent) 55%,transparent)}

/* quote form */
.qform{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;text-align:left}
.qform input,.qform textarea,.qform select{width:100%;padding:13px 14px;border-radius:11px;
 border:1px solid color-mix(in srgb,#fff 48%,transparent);
 background:color-mix(in srgb,#fff 18%,transparent);color:#fff;font:500 15px/1.4 var(--font)}
.qform input::placeholder,.qform textarea::placeholder{color:rgba(255,255,255,.75)}
.qform select option{color:var(--ink)}
.qform textarea{min-height:92px;resize:vertical}
.qform .wide{grid-column:1/-1}
.qform button{grid-column:1/-1;padding:15px;border:0;border-radius:11px;background:#fff;
 color:var(--accent-dark);font:700 16px var(--font);cursor:pointer;transition:transform .18s}
.qform button:hover{background:var(--bg)}
.qform button:active{transform:scale(.98)}
.qnote{grid-column:1/-1;font-size:12.5px;color:rgba(255,255,255,.85);text-align:center}
.qdone{margin-top:18px;padding:18px;border-radius:12px;
 background:color-mix(in srgb,#fff 20%,transparent);color:#fff;font-weight:600}
@media(max-width:620px){.qform{grid-template-columns:1fr}}

.hero h1 .text-accent{text-shadow:0 2px 22px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7)}
/* On a solid red panel the placeholders wash out to pink; same fix as
   Butcher's, so the fields read as fields. */
#visit input::placeholder,#visit textarea::placeholder{color:rgba(255,255,255,.85)}
#visit input,#visit textarea,#visit select{color:#fff;border-color:rgba(255,255,255,.5)}

.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.brand img{height:30px;width:auto;display:block}
.brand .bt{font-family:var(--font);font-weight:800;letter-spacing:.06em;font-size:.95rem;color:var(--ink);white-space:nowrap}
footer .brand img{height:34px}
@media(max-width:520px){.brand img{height:26px}.brand .bt{font-size:.82rem}}
#intro .iw img{width:min(58vw,380px);height:auto;display:block;margin:0 auto}

/* the intro is his logo now, so it must be visible for the whole
   sequence rather than fading in behind the tiles */
#intro .iw{opacity:1;transform:none}
#intro .iw img{position:relative;z-index:4}

/* RED AND WHITE, as he asked for. The page was white with red trim only, so
   the statement line and the footer become full-width red bands. Every color
   that lives on them is inverted -- the lightup words are accent-coloured by
   default and would have vanished on red, and his logo mark is red so on red it
   needs a white chip behind it. */
.statement{background:var(--accent);color:#fff;padding:clamp(3rem,9vw,5.5rem) 0}
.statement .lightup .w{color:rgba(255,255,255,.42)}
.statement .lightup .w.lit{color:#fff}
.statement .lightup .w.hot{color:#fff;text-shadow:0 0 26px rgba(255,255,255,.5)}
footer{background:var(--accent);border-top:0;color:#fff}
footer small{color:rgba(255,255,255,.92)}
footer .made{color:#fff;opacity:.75}
footer .brand .bt{color:#fff}
footer .brand img{background:#fff;border-radius:9px;padding:5px 7px}
#gallery{padding:clamp(3rem,8vw,6rem) 0}.galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(10px,1.4vw,16px);margin-top:34px}.galt{display:block;position:relative;padding:0;border:1px solid var(--hair);background:var(--card);border-radius:16px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;box-shadow:0 8px 22px rgba(16,12,14,.09);transition:transform .25s,box-shadow .25s}.galt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.galt:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(16,12,14,.16)}.galt:hover img{transform:scale(1.05)}.galt:focus-visible{outline:3px solid var(--accent);outline-offset:3px}#lb{position:fixed;inset:0;z-index:200;background:rgba(14,10,11,.93);display:none;align-items:center;justify-content:center;padding:22px}#lb.open{display:flex}#lb img{max-width:94vw;max-height:88vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55)}.lbnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#16121a;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}#lbprev{left:16px}#lbnext{right:16px}.social{display:inline-flex;gap:10px;justify-content:center}.social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--accent);display:grid;place-items:center;transition:transform .2s}.social a:hover{transform:translateY(-2px)}.social svg{width:18px;height:18px}.final-card .qform input,.final-card .qform select,.final-card .qform textarea{font-family:var(--font);font-size:1rem;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);color:#fff;transition:background .2s,border-color .2s,box-shadow .2s}.final-card .qform input:focus,.final-card .qform select:focus,.final-card .qform textarea:focus{outline:0;background:rgba(255,255,255,.22);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}.final-card .qform .bad{border-color:#fff;background:rgba(0,0,0,.20);animation:nudge .3s}@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}.final-card .qform button{font-family:var(--font);font-weight:700;font-size:1rem;padding:15px 22px;border:0;border-radius:12px;background:#fff;color:var(--accent);cursor:pointer;grid-column:1/-1;transition:transform .18s,opacity .2s}.final-card .qform button[disabled]{opacity:.72;cursor:default}.qdone{display:grid;gap:8px;justify-items:center;text-align:center;margin-top:20px;padding:26px 20px;border-radius:16px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);color:#fff;animation:pop .45s ease both}.qdone .qtick{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-size:24px;font-weight:800}.qdone b{font-size:1.12rem}.qdone span{font-size:.92rem;opacity:.9}@media(max-width:560px){.galgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}[hidden]{display:none!important}#services{padding:clamp(3rem,8vw,6rem) 0}.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(12px,1.6vw,20px);margin-top:34px}.svc{background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:26px 24px;transition:transform .28s,box-shadow .28s,border-color .28s}.svc:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px rgba(16,12,14,.13)}.svc-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--accent);color:#fff;margin-bottom:16px}.svc-ic svg{width:23px;height:23px}.svc h3{font-family:var(--disp);font-size:1.28rem;letter-spacing:-.01em;margin-bottom:7px}.svc p{font-family:var(--font);color:var(--muted);font-size:.95rem;line-height:1.55}.galmarq{margin-top:34px;display:grid;gap:clamp(10px,1.4vw,16px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.galrow{display:flex;gap:clamp(10px,1.4vw,16px);width:max-content;animation:drift 46s linear infinite}.galrow.back{animation-direction:reverse}.galmarq:hover .galrow,.galmarq.hold .galrow{animation-play-state:paused}@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}.galmarq .galt{flex:0 0 auto;width:clamp(210px,25vw,320px)}.rev-stage{margin-top:34px}.rev-view{overflow:hidden;border-radius:20px}.rev-track{display:flex;transition:transform .6s cubic-bezier(.22,.9,.28,1)}.rev-slide{flex:0 0 100%;margin:0!important;padding:clamp(26px,4vw,44px)!important;border-radius:20px}.rev-slide p{font-size:clamp(1.1rem,2.4vw,1.5rem)!important;line-height:1.5!important}.rev-slide .stars svg{width:22px;height:22px}.rev-dots{display:flex;gap:9px;justify-content:center;margin-top:20px}.rev-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--muted-2);transition:width .3s,background .3s}.rev-dot.on{width:26px;border-radius:99px;background:var(--accent)}.qok{grid-column:1/-1;text-align:center;font-family:var(--font);font-weight:700;color:#fff;margin-top:18px;animation:pop .4s ease both}@media (prefers-reduced-motion: reduce){.galrow{animation:none}.rev-track{transition:none}}.rev-host{display:block;column-count:1;columns:auto}a.svc{display:block;color:inherit;text-decoration:none}.svc-more{display:inline-block;margin-top:14px;font-family:var(--font);font-weight:700;font-size:.92rem;color:var(--accent)}a.svc:hover .svc-more{text-decoration:underline}








/* the fixed bar would otherwise sit on top of the last section */
body{padding-bottom:78px}
@media (max-width:380px){}
@media (prefers-reduced-motion:reduce){}

/* brand was inheriting ink and vanishing against the hero photo */
header.nav .brand{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
header.nav .nav-links a{color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(0,0,0,.55)}
header.nav.scrolled .brand{color:var(--ink);text-shadow:none}
header.nav.scrolled .nav-links a{color:var(--muted);text-shadow:none}

/* hero type has to read over ANY photo, bright or dark */
.hero h1{text-shadow:0 2px 3px rgba(0,0,0,.35),0 6px 30px rgba(0,0,0,.55),0 1px 90px rgba(0,0,0,.4)}
.hero h1 .text-accent{-webkit-text-stroke:1.5px rgba(255,255,255,.34);paint-order:stroke fill}
.hero .sub{text-shadow:0 1px 2px rgba(0,0,0,.45),0 3px 20px rgba(0,0,0,.6);color:#fff}
.hero .hero-strip span{text-shadow:0 1px 12px rgba(0,0,0,.65);color:#fff}
.hero .hero-bg::after{content:'';position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.12) 42%,rgba(0,0,0,.55));pointer-events:none}

/* the shipped .btn:hover was #000; on a phone it sticks after a tap */
.btn:hover,.btn:focus{background:var(--accent-hover);color:#fff}
.hub-call,.hub-call:hover,.hub-call:focus{background:#fff;color:var(--accent-dark)}
.hub-text:hover,.hub-quote:hover{background:color-mix(in srgb,#fff 30%,transparent);color:#fff}
.btn:active{transform:scale(.97)}
a,button{-webkit-tap-highlight-color:color-mix(in srgb,var(--accent) 22%,transparent)}

/* only the CARD carries the color; the section keeps the clean page ground */
.final{background:none}
.final-card{background:linear-gradient(160deg,var(--accent-hover),var(--accent) 58%,var(--accent-dark));
 box-shadow:0 30px 70px -30px color-mix(in srgb,var(--accent) 60%,transparent)}
.final .eyebrow{color:#fff;opacity:.92}
.final h2,.final p{color:#fff}
.hub-meta{color:rgba(255,255,255,.92)}

/* lightup: brighter lit state, real glow on the hot words */
.lightup .w{color:color-mix(in srgb,var(--ink) 22%,transparent);transition:color .45s,text-shadow .45s}
.lightup .w.lit{color:var(--ink)}
.lightup .w.hot{color:var(--accent);text-shadow:0 0 26px color-mix(in srgb,var(--accent) 55%,transparent)}

/* quote form */
.qform{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;text-align:left}
.qform input,.qform textarea,.qform select{width:100%;padding:13px 14px;border-radius:11px;
 border:1px solid color-mix(in srgb,#fff 48%,transparent);
 background:color-mix(in srgb,#fff 18%,transparent);color:#fff;font:500 15px/1.4 var(--font)}
.qform input::placeholder,.qform textarea::placeholder{color:rgba(255,255,255,.75)}
.qform select option{color:var(--ink)}
.qform textarea{min-height:92px;resize:vertical}
.qform .wide{grid-column:1/-1}
.qform button{grid-column:1/-1;padding:15px;border:0;border-radius:11px;background:#fff;
 color:var(--accent-dark);font:700 16px var(--font);cursor:pointer;transition:transform .18s}
.qform button:hover{background:var(--bg)}
.qform button:active{transform:scale(.98)}
.qnote{grid-column:1/-1;font-size:12.5px;color:rgba(255,255,255,.85);text-align:center}
.qdone{margin-top:18px;padding:18px;border-radius:12px;
 background:color-mix(in srgb,#fff 20%,transparent);color:#fff;font-weight:600}
@media(max-width:620px){.qform{grid-template-columns:1fr}}

header.nav .brand .bt{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}header.nav.scrolled .brand .bt{color:var(--ink);text-shadow:none}
/* ---- nav logo: no chip. It follows the nav bar: transparent over the hero,
   with a soft light edge so the grey lettering still reads on the photo, and
   plain on the white bar once scrolled. The footer keeps its white backing,
   because his red letters disappear on the red footer. ---- */
.brand img.logo-badge{height:50px;width:auto;background:none;border-radius:0;padding:0;box-shadow:none;transition:filter .3s ease}
header.nav:not(.scrolled) .brand img.logo-badge{filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 7px rgba(255,255,255,.55))}
header.nav.scrolled .brand img.logo-badge{filter:none}
@media(max-width:520px){.brand img.logo-badge{height:44px}}
footer .brand img.logo-badge{height:64px;padding:6px 10px;border-radius:14px;background:#fff}
/* ---- intro: calm. The logo fades up on a bright stage, one soft shine,
   then glides into the nav while the stage fades away. ---- */
#intro{background:transparent!important;display:grid;place-items:center}
#intro .in-bg{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 46%,#ffffff 0%,#f8f8fa 55%,#efeff2 100%);transition:opacity .7s ease}
#intro.leaving .in-bg{opacity:0}
#intro .in-logo{position:relative;z-index:5;width:min(68vw,400px);transform-origin:50% 50%;animation:inLogo .9s cubic-bezier(.2,.7,.2,1) .15s both;will-change:transform,opacity}
#intro .in-logo img{display:block;width:100%;height:auto}
@keyframes inLogo{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
#intro .in-shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(img/logo-amr.png?v=1) center/contain no-repeat;mask:url(img/logo-amr.png?v=1) center/contain no-repeat;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 60%);background-size:260% 100%;background-repeat:no-repeat;background-position:160% 0;animation:inShine 1.3s ease-in-out .95s both}
@keyframes inShine{from{background-position:160% 0}to{background-position:-70% 0}}
html:has(#intro:not(.leaving)) .hero h1 .ln>span{animation-play-state:paused}

/* ---- service pages ---- */
.shero{position:relative;min-height:min(78svh,660px);display:flex;align-items:flex-end;padding:140px 0 60px;overflow:hidden;color:#fff}
.shero .hero-bg img{animation:none}
.shero .wrap{position:relative;z-index:2}
.crumbs{font-size:.84rem;letter-spacing:.03em;margin-bottom:14px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.crumbs a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.shero h1{font-family:var(--disp);font-size:clamp(2.6rem,8vw,5.2rem);line-height:.95;text-transform:uppercase;max-width:15ch;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.shero .lead{font-size:clamp(1.02rem,2.2vw,1.22rem);max-width:54ch;margin-top:16px;line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.shero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.sec{padding:clamp(3rem,7vw,5.2rem) 0}
.sec.alt{background:var(--bg-2)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.prose p{font-family:var(--font);font-size:1.06rem;line-height:1.72;color:var(--ink);margin-top:16px;max-width:66ch}
.fit{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.fit li{list-style:none;padding:10px 16px;border-radius:99px;background:var(--card);border:1px solid var(--hair);font-family:var(--font);font-weight:600;font-size:.92rem}
.steps{display:grid;gap:12px;margin-top:24px}
.step{position:relative;padding:18px 20px 18px 68px;background:var(--card);border:1px solid var(--hair);border-radius:16px;font-family:var(--font)}
.step i{position:absolute;left:18px;top:16px;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800}
.step b{display:block;font-size:1.02rem}
.step span{color:var(--muted);font-size:.95rem;line-height:1.5}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:26px}
.shots figure{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--hair);background:var(--bg-2)}
.shots img{width:100%;height:100%;object-fit:cover;display:block}
.faq{margin-top:24px;display:grid;gap:10px;max-width:840px}
.faq details{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:16px 20px;font-family:var(--font)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;padding-right:26px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:-2px;color:var(--accent);font-weight:800;font-size:1.3rem}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:10px;color:var(--muted);line-height:1.65}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:24px}
.quotes blockquote{margin:0;padding:22px;border-radius:16px;background:var(--card);border:1px solid var(--hair);font-family:var(--font);line-height:1.6}
.quotes .st{color:#f5b301;letter-spacing:2px;margin-bottom:8px}
.quotes cite{display:block;margin-top:12px;font-style:normal;font-weight:700;font-size:.9rem}
.quotes cite small{font-weight:400;color:var(--muted)}
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:24px}
.others a{display:block;padding:18px 20px;border-radius:16px;border:1px solid var(--hair);background:var(--card);color:var(--ink);text-decoration:none;font-family:var(--font);font-weight:700;transition:border-color .2s,transform .2s}
.others a:hover{border-color:var(--accent);transform:translateY(-2px)}
.others a span{display:block;font-weight:400;color:var(--muted);font-size:.9rem;margin-top:4px;line-height:1.45}
.flinks{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:.9rem;margin:6px 0}
.flinks a{color:#fff;opacity:.92;text-decoration:none}
.flinks a:hover{opacity:1;text-decoration:underline}