:root{
  --primary-900:#00351F; --primary-700:#005F37; --primary-600:#007A46; --primary-300:#72D5A0; --primary-100:#DDF3E6;
  --support-700:#8D2D16; --support-600:#B33A1C; --support-300:#F09A7E; --support-100:#FBE4DC;
  --neutral-950:#101511; --neutral-900:#19201B; --neutral-800:#28312A; --neutral-700:#3E4941; --neutral-600:#59645C;
  --neutral-500:#747E76; --neutral-400:#929B94; --neutral-300:#B7BDB8; --neutral-200:#D7DBD7; --neutral-100:#ECEDE9;
  --neutral-50:#FBF8F1; --white:#FFFFFF;

  --page:var(--neutral-50); --surface:var(--white); --surface-soft:var(--primary-100); --surface-warm:var(--support-100);
  --text:var(--neutral-950); --text-muted:var(--neutral-600); --text-soft:var(--neutral-700);
  --border:var(--neutral-200); --border-strong:var(--neutral-400);
  --action:var(--primary-600); --action-hover:var(--primary-900); --action-text:var(--white);
  --accent:var(--support-700); --accent-soft:var(--support-100);
  --inverse-bg:var(--primary-900); --inverse-text:var(--white); --inverse-muted:var(--neutral-200);
  --header-bg:rgb(251 248 241 / 72%); --header-solid:rgb(251 248 241 / 96%);
  --shadow:rgb(16 21 17 / 8%); --hero-shade:rgb(8 20 13 / 82%); --hero-clear:rgb(8 20 13 / 8%);
  --focus:var(--support-600); --error:var(--support-700);
  --success-bg:var(--primary-100); --success-border:var(--primary-600);
  --logo-main:var(--primary-700); --logo-accent:var(--support-600); --logo-detail:var(--support-700);
  --head:74px; --ease:cubic-bezier(.22,.61,.36,1);

  --step--2:clamp(.72rem,.7rem + .08vw,.78rem);
  --step--1:clamp(.8rem,.78rem + .1vw,.875rem);
  --step-0:clamp(1rem,.96rem + .18vw,1.125rem);
  --step-1:clamp(1.25rem,1.17rem + .36vw,1.406rem);
  --step-2:clamp(1.563rem,1.43rem + .58vw,1.758rem);
  --step-3:clamp(1.953rem,1.73rem + .95vw,2.197rem);
  --step-4:clamp(2.441rem,2.08rem + 1.55vw,2.747rem);
  --step-5:clamp(3.052rem,2.5rem + 2.35vw,3.433rem);
  --step-6:clamp(3.052rem,2.4rem + 2.9vw,4.292rem);
  --step-7:clamp(3.4rem,2.6rem + 4.9vw,6.2rem);
}
@media (prefers-color-scheme:dark){
  :root{
    --page:var(--neutral-950); --surface:var(--neutral-900); --surface-soft:var(--neutral-800); --surface-warm:var(--neutral-800);
    --text:var(--neutral-50); --text-muted:var(--neutral-300); --text-soft:var(--neutral-200);
    --border:var(--neutral-700); --border-strong:var(--neutral-500);
    --action:var(--primary-300); --action-hover:var(--primary-100); --action-text:var(--primary-900);
    --accent:var(--support-300); --accent-soft:var(--neutral-800);
    --inverse-bg:var(--neutral-900); --inverse-text:var(--neutral-50); --inverse-muted:var(--neutral-300);
    --header-bg:rgb(16 21 17 / 72%); --header-solid:rgb(16 21 17 / 96%);
    --shadow:rgb(0 0 0 / 24%); --focus:var(--support-300); --error:var(--support-300);
    --success-bg:var(--neutral-800); --success-border:var(--primary-300);
    --logo-main:var(--primary-300); --logo-accent:var(--support-300); --logo-detail:var(--support-300);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--page);color:var(--text);font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--step-0);line-height:1.72;letter-spacing:-.008em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
::selection{background:var(--action);color:var(--action-text)}
img{max-width:100%;display:block}
p,blockquote,figcaption{max-width:68ch}
h1,h2,h3,h4{margin:0}
a,button{transition:color 280ms var(--ease),background-color 280ms var(--ease),border-color 280ms var(--ease),opacity 280ms var(--ease),transform 280ms var(--ease)}
a:not(.button):hover{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.wrap{width:min(1180px,calc(100% - 2.5rem));margin-inline:auto}
.serif{font-family:"Bodoni Moda",Georgia,"Times New Roman",serif;font-optical-sizing:auto;font-weight:600;letter-spacing:-.052em;line-height:.98}
.title{font-size:var(--step-6);line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.eyebrow{margin:0;color:var(--accent);font-size:var(--step--1);font-weight:700;line-height:1.25;letter-spacing:.19em;text-transform:uppercase}
.muted{color:var(--text-muted)}
.inverse{background:var(--inverse-bg);color:var(--inverse-text)}
.inverse .muted{color:var(--inverse-muted)}
.inverse .eyebrow{color:var(--support-300)}
.section{padding:5rem 0}
@media (min-width:768px){.section{padding:7rem 0}}
.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.mt-12{margin-top:3rem}
.grid-split{display:grid;gap:3rem}
@media (min-width:1024px){.grid-split{grid-template-columns:5fr 7fr;gap:5rem}.grid-split.narrow{grid-template-columns:4fr 8fr}}

.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:.8rem 1.3rem;border:1px solid var(--action);border-radius:2px;background:var(--action);color:var(--action-text);font-size:var(--step--1);font-weight:700;line-height:1;letter-spacing:.025em;text-decoration:none;cursor:pointer;font-family:inherit}
.button:hover{border-color:var(--action-hover);background:var(--action-hover);color:var(--action-text);transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button-outline{border-color:var(--inverse-muted);background:transparent;color:var(--inverse-text)}
.button-outline:hover{border-color:var(--inverse-text);background:var(--inverse-text);color:var(--inverse-bg)}
.button[disabled]{opacity:.65;cursor:wait;transform:none}

/* Header */
header{position:sticky;top:0;z-index:50;height:var(--head);background:var(--header-bg);backdrop-filter:blur(0);border-bottom:1px solid transparent;box-shadow:0 8px 30px transparent;transition:height 360ms var(--ease),background-color 360ms var(--ease),border-color 360ms var(--ease),box-shadow 360ms var(--ease),backdrop-filter 360ms var(--ease)}
header.scrolled{height:64px;background:var(--header-solid);backdrop-filter:blur(14px);border-color:var(--border);box-shadow:0 8px 30px var(--shadow)}
.head-inner{display:flex;height:100%;align-items:center;justify-content:space-between;gap:1rem}
.brand-lockup{display:flex;align-items:center;gap:.7rem}
.brand{display:block;width:148px;color:var(--primary-700);text-decoration:none}
.brand svg{display:block;width:100%;height:auto;overflow:visible}
.since{display:none;padding-left:.7rem;border-left:1px solid var(--border);color:var(--text-muted);font-size:.66rem;font-weight:700;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
@media (min-width:640px){.since{display:block}}
.logo-green{fill:var(--logo-main)}.logo-red{fill:var(--logo-accent)}
.logo-line{fill:none;stroke:var(--logo-accent);stroke-width:4}
.logo-hat{fill:none;stroke:var(--logo-detail);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.brand:hover{color:var(--primary-600);transform:translateY(-1px)}
.desk-nav{display:none;gap:1.75rem}
@media (min-width:1024px){.desk-nav{display:flex}}
.nav{position:relative;color:var(--text-soft);font-size:var(--step--1);font-weight:600;line-height:1;letter-spacing:.01em;text-decoration:none}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 280ms var(--ease)}
.nav:hover::after{transform:scaleX(1)}
.nav.active{color:var(--accent)}
.nav.active::after{transform:scaleX(1)}
.head-actions{display:flex;align-items:center;gap:.5rem}
.head-actions .button{display:none;min-height:42px}
@media (min-width:640px){.head-actions .button{display:inline-flex}}
.menu-button{width:52px;height:44px;border:0;background:transparent;color:var(--text);font:700 .72rem/1 "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
@media (min-width:1024px){.menu-button{display:none}}
.menu-button:hover{color:var(--accent)}
.mobile{position:fixed;inset:var(--head) 0 0;z-index:45;padding:2rem 1.25rem;background:var(--page);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity 300ms var(--ease),transform 300ms var(--ease),visibility 300ms var(--ease),inset-block-start 360ms var(--ease)}
header.scrolled + .mobile{inset-block-start:64px}
.mobile nav{display:flex;flex-direction:column;gap:1.25rem}
.mobile a{color:var(--text);font-size:var(--step-4);line-height:1.05;text-decoration:none}
.menu-open .mobile{visibility:visible;opacity:1;transform:none}

/* Hero */
.hero{min-height:calc(100svh - var(--head));position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--neutral-950);color:var(--white)}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroDrift 14s var(--ease) both}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--hero-clear) 12%,var(--hero-shade) 100%);animation:heroShade 600ms var(--ease) both}
.hero-copy{position:relative;z-index:2;padding:5rem 0 3.5rem}
.hero-copy > *{opacity:0;transform:translateY(14px);animation:heroIn 560ms var(--ease) forwards}
.hero-copy > *:nth-child(1){animation-delay:80ms}
.hero-copy > *:nth-child(2){animation-delay:160ms}
.hero-copy > *:nth-child(3){animation-delay:240ms}
.hero-copy > *:nth-child(4){animation-delay:320ms}
.hero-copy > *:nth-child(5){animation-delay:420ms}
.hero .eyebrow{color:var(--support-300)}
.hero h1{max-width:12ch;font-size:var(--step-7);font-weight:600;line-height:.9;letter-spacing:-.065em;text-wrap:balance}
.hero p:not(.eyebrow){max-width:58ch;color:var(--neutral-100);font-size:var(--step-1);line-height:1.58;letter-spacing:-.015em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
@keyframes heroDrift{from{transform:scale(1.045)}to{transform:scale(1.01) translateX(-.35%)}}
@keyframes heroShade{from{opacity:.72}to{opacity:1}}
@keyframes heroIn{to{opacity:1;transform:none}}

/* Proof strip */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid rgb(255 255 255 / 22%);max-width:640px}
.proof div{padding-right:1rem}
.proof b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:var(--step-3);font-weight:600;line-height:1;letter-spacing:-.045em;color:var(--white)}
.proof span{display:block;margin-top:.4rem;color:var(--neutral-200);font-size:var(--step--2);font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.35}

h2{font-weight:600}
h3{font-weight:600;letter-spacing:-.025em;line-height:1.15}
.reveal{opacity:0;transform:translateY(18px);transition:opacity 540ms var(--ease),transform 540ms var(--ease);transition-delay:var(--delay,0ms);will-change:opacity,transform}
.reveal.show{opacity:1;transform:none}

/* About */
.lede{color:var(--text-muted);font-size:var(--step-1);line-height:1.62;max-width:60ch}
.trust-grid{display:grid;gap:0 2rem;margin-top:2.25rem}
@media (min-width:640px){.trust-grid{grid-template-columns:1fr 1fr}}
.trust-item{border-top:1px solid var(--border);padding:1.35rem 0}
.trust-item b{font-size:var(--step-0);font-weight:700;line-height:1.25;letter-spacing:-.02em}
.trust-item p{margin:.5rem 0 0;color:var(--text-muted);font-size:var(--step--1);line-height:1.65}
.values{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.values li{list-style:none;padding:.42rem .85rem;border:1px solid var(--border-strong);border-radius:100px;color:var(--text-soft);font-size:var(--step--2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.mission{margin-top:2.5rem;padding:1.75rem;border-left:3px solid var(--accent);background:var(--surface-warm)}
.mission blockquote{margin:0;font-family:"Bodoni Moda",Georgia,serif;font-size:var(--step-2);font-weight:500;line-height:1.24;letter-spacing:-.035em}
.mission p{margin:1rem 0 0;color:var(--text-soft);font-size:var(--step--1);line-height:1.7}

/* Services */
.service{display:grid;gap:1.4rem;padding:2.25rem 0;border-top:1px solid var(--neutral-700)}
.service i{color:var(--support-300);font-family:"Bodoni Moda",Georgia,serif;font-style:normal;font-size:var(--step-1)}
.service h3{font-size:var(--step-3);line-height:1.02;letter-spacing:-.045em}
.service h3 + p{margin:.6rem 0 0;max-width:44ch;color:var(--support-300);font-size:var(--step--1);font-weight:600;line-height:1.55}
.service .body p{max-width:46ch;color:var(--inverse-muted);font-size:var(--step--1);line-height:1.72;margin:0}
.service ul{margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
.service li{list-style:none;display:flex;gap:.65rem;align-items:flex-start;color:var(--inverse-text);font-size:var(--step--1);line-height:1.5}
.service li::before{content:"";flex:none;width:6px;height:6px;margin-top:.55rem;border-radius:50%;background:var(--support-300)}
.service .kicker{margin:1.25rem 0 0;color:var(--neutral-400);font-size:var(--step--2);font-style:italic;letter-spacing:.02em}
@media (min-width:768px){.service{grid-template-columns:60px 1fr 1.2fr;gap:3rem;align-items:start}}
.services-cta{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* Gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.gallery button{min-height:190px;border:0;padding:0;overflow:hidden;background:var(--surface-soft);cursor:zoom-in}
.gallery button:hover{transform:translateY(-3px)}
.gallery button:first-child{grid-column:1/-1;min-height:320px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 480ms var(--ease),filter 320ms var(--ease)}
.gallery button:hover img{transform:scale(1.035);filter:saturate(1.04)}
@media (min-width:768px){
  .gallery{grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:280px 280px}
  .gallery button,.gallery button:first-child{min-height:0}
  .gallery button:first-child{grid-column:auto;grid-row:1/3}
}

/* Testimonials */
.stories{background:var(--surface-warm)}
.rating-line{display:flex;align-items:center;gap:.6rem;margin-top:1.5rem;color:var(--text-soft);font-size:var(--step--1);font-weight:600}
.stars{color:var(--accent);letter-spacing:.12em;font-size:var(--step-0)}
.quotes{display:grid;gap:2.5rem}
.quote{margin:0;border-left:3px solid var(--accent);padding-left:1.2rem}
.quote blockquote{margin:0;font-family:"Bodoni Moda",Georgia,serif;font-size:var(--step-2);font-weight:500;line-height:1.28;letter-spacing:-.035em}
.quote blockquote b{font-weight:700}
.quote figcaption{display:flex;align-items:center;gap:.85rem;margin-top:1.1rem}
.avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--action);color:var(--action-text);font-size:var(--step--1);font-weight:800;letter-spacing:.04em}
.who b{display:block;font-size:var(--step--1);font-weight:700;line-height:1.3}
.who span{display:block;color:var(--text-muted);font-size:var(--step--2);font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;margin-top:.15rem}

/* FAQ */
details{border-top:1px solid var(--border)}
details:last-child{border-bottom:1px solid var(--border)}
summary{display:flex;justify-content:space-between;gap:1rem;padding:1.2rem 0;list-style:none;font-size:var(--step-0);font-weight:700;line-height:1.35;letter-spacing:-.02em;cursor:pointer;transition:color 260ms var(--ease)}
summary:hover{color:var(--action)}
summary::-webkit-details-marker{display:none}
summary span{color:var(--accent);font-size:var(--step-1);transition:transform 260ms var(--ease);line-height:1}
details[open] summary span{transform:rotate(45deg)}
details p{max-width:62ch;margin:0;padding-bottom:1.25rem;color:var(--text-muted);font-size:var(--step--1);line-height:1.75}
details p strong{color:var(--text);font-weight:700}

/* CTA band */
.cta-band{background:var(--action);color:var(--action-text);padding:3.5rem 0}
.cta-band .wrap{display:flex;flex-direction:column;gap:1.75rem}
@media (min-width:768px){.cta-band .wrap{flex-direction:row;align-items:center;justify-content:space-between}}
.cta-band h2{font-size:var(--step-5)}
.cta-band .button-outline{border-color:var(--action-text);color:var(--action-text)}
.cta-band .button-outline:hover{background:var(--action-text);color:var(--action)}

/* Contact channels */
.channels{display:grid;gap:.7rem;margin-top:2rem}
@media (min-width:640px){.channels{grid-template-columns:1fr 1fr}}
.channel{display:flex;align-items:center;gap:.9rem;padding:.95rem 1rem;border:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text)}
.channel:hover{border-color:var(--action);transform:translateY(-2px);color:var(--text)}
.channel .ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface-soft);color:var(--primary-700)}
.channel .ico svg{width:18px;height:18px}
.channel.wa .ico{background:#25D366;color:#fff}
.channel b{display:block;font-size:var(--step--2);font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);line-height:1.3}
.channel span{display:block;font-size:var(--step--1);font-weight:700;line-height:1.45;margin-top:.15rem}
.social-heading{margin:2.25rem 0 .9rem;color:var(--text-muted);font-size:var(--step--2);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.social-links{display:flex;flex-wrap:wrap;gap:.65rem 1.25rem}
.social-links a{color:var(--text-soft);font-size:var(--step--1);font-weight:600;text-decoration:none}
.area-note{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--step--1)}
.area-note b{color:var(--text)}

/* Form */
.form-card{padding:1.75rem;border:1px solid var(--border);background:var(--surface)}
@media (min-width:768px){.form-card{padding:2.25rem}}
.form-card h3{font-size:var(--step-2);font-family:"Bodoni Moda",Georgia,serif;letter-spacing:-.04em}
.form-card .sub{margin:.5rem 0 1.75rem;color:var(--text-muted);font-size:var(--step--1)}
.row{display:grid;gap:0 1rem}
@media (min-width:640px){.row{grid-template-columns:1fr 1fr}}
.field{margin-bottom:1rem}
.field label{display:block;margin-bottom:.4rem;color:var(--text-soft);font-size:.72rem;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase}
.field label .opt{color:var(--text-muted);letter-spacing:.04em;text-transform:none;font-weight:600}
.field input,.field select,.field textarea{width:100%;padding:.86rem .9rem;border:1px solid var(--border-strong);border-radius:2px;background:var(--surface);color:var(--text);font:500 var(--step--1)/1.45 "Manrope",system-ui,sans-serif;transition:border-color 260ms var(--ease),box-shadow 260ms var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--action);box-shadow:0 0 0 3px var(--surface-soft)}
.field textarea{min-height:120px;line-height:1.65;resize:vertical}
.field.bad input,.field.bad select{border-color:var(--error)}
.error{display:none;margin:.25rem 0 0;color:var(--error);font-size:.76rem;font-weight:600;line-height:1.45}
.field.bad .error{display:block}
.honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{min-height:1.5em;margin:1rem 0 0;color:var(--text-muted);font-size:var(--step--2);line-height:1.6}
.form-note.error-note{color:var(--error)}
.success{display:none;padding:2rem;border:1px solid var(--success-border);background:var(--success-bg)}
.success.show{display:block}
form.sent{display:none}

/* Footer */
footer{border-top:1px solid var(--border);background:var(--surface);padding:3rem 0}
.foot{display:grid;gap:2.5rem}
@media (min-width:768px){.foot{grid-template-columns:repeat(3,1fr);align-items:end}}
.foot p{margin:0}
.foot .tag{color:var(--text-muted);font-size:var(--step--1);line-height:1.6}
.foot .since-line{margin-top:1rem;font-size:var(--step--1);font-weight:700}
.foot .contact{margin-top:1.25rem;color:var(--text-muted);font-size:var(--step--2);line-height:1.8}
.foot .contact a{color:var(--text-muted);text-decoration:none}
.foot .copy{margin-top:1.25rem;color:var(--text-muted);font-size:var(--step--2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:var(--step--1)}
@media (min-width:768px){.foot-nav{justify-content:center}}
.footer-logo{display:block;width:min(240px,58vw);color:var(--primary-700);justify-self:start}
@media (min-width:768px){.footer-logo{justify-self:end}}
.footer-logo svg{display:block;width:100%;height:auto}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:4rem 1rem 1rem;background:var(--neutral-950)}
.lightbox.open{display:grid}
.lightbox img{max-width:1100px;max-height:82vh;width:100%;object-fit:contain}
.lightbox > button{position:absolute;right:1rem;top:1rem;width:46px;height:46px;border:1px solid var(--neutral-400);background:transparent;color:var(--white);font:600 var(--step-1)/1 "Manrope",sans-serif;cursor:pointer}
.lightbox > button:hover{border-color:var(--white);background:var(--white);color:var(--neutral-950)}

/* Floating WhatsApp */
.wa-float{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;align-items:center;gap:.6rem;padding:.8rem 1.05rem;border-radius:100px;background:#25D366;color:#062d15;font-size:var(--step--1);font-weight:800;letter-spacing:.01em;text-decoration:none;box-shadow:0 10px 30px rgb(16 21 17 / 22%);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.wa-float.show{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{color:#062d15;transform:translateY(-2px)}
.wa-float svg{width:20px;height:20px;flex:none}
.wa-float span{display:none}
@media (min-width:480px){.wa-float span{display:inline}}

.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:.75rem 1rem;background:var(--action);color:var(--action-text);font-weight:700;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal,.hero-copy > *{opacity:1;transform:none}
  .reveal{will-change:auto}
}

/* ============ MULTI-PAGE ADDITIONS ============ */
.page-head{padding:4rem 0 2rem;border-bottom:1px solid var(--border)}
@media (min-width:768px){.page-head{padding:6rem 0 3rem}}
.page-head .title{font-size:var(--step-5)}

.card-grid{display:grid;gap:1.5rem}
@media (min-width:768px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.scard{padding:1.75rem;border:1px solid var(--neutral-700);background:rgb(255 255 255 / 3%)}
.scard i{display:block;color:var(--support-300);font-family:"Bodoni Moda",Georgia,serif;font-style:normal;font-size:var(--step-1);margin-bottom:.75rem}
.scard h3{font-size:var(--step-2);letter-spacing:-.04em}
.scard p{margin:.75rem 0 0;color:var(--inverse-muted);font-size:var(--step--1);line-height:1.7}
@media (min-width:768px){.card-grid .scard:nth-child(n+4){margin-top:0}}

/* Blog */
.post-grid{display:grid;gap:1.75rem}
@media (min-width:640px){.post-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);overflow:hidden}
.post-card:hover{border-color:var(--action);transform:translateY(-3px);color:var(--text)}
.post-card .pc-body{padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.post-card h3{font-family:"Bodoni Moda",Georgia,serif;font-size:var(--step-2);letter-spacing:-.04em;line-height:1.1}
.post-card p{margin:0;color:var(--text-muted);font-size:var(--step--1);line-height:1.65}
.post-meta{display:flex;gap:.6rem;align-items:center;color:var(--text-muted);font-size:var(--step--2);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.post-tag{padding:.2rem .6rem;border:1px solid var(--border-strong);border-radius:100px;letter-spacing:.08em}
.pc-more{margin-top:auto;color:var(--action);font-size:var(--step--1);font-weight:700}

/* Article */
.article{padding:3rem 0 5rem}
.article-head{max-width:46rem;margin-inline:auto}
.article-body{max-width:38rem;margin-inline:auto;margin-top:2.5rem}
.article-body p,.article-body ul,.article-body ol{font-size:var(--step-0);line-height:1.8;color:var(--text-soft)}
.article-body h2{font-family:"Bodoni Moda",Georgia,serif;font-size:var(--step-3);letter-spacing:-.045em;margin:2.5rem 0 .75rem}
.article-body h3{font-size:var(--step-1);margin:2rem 0 .5rem}
.article-body ul,.article-body ol{padding-left:1.25rem}
.article-body li{margin:.4rem 0}
.article-body blockquote{margin:2rem 0;padding-left:1.2rem;border-left:3px solid var(--accent);font-family:"Bodoni Moda",Georgia,serif;font-size:var(--step-2);line-height:1.3;letter-spacing:-.03em;color:var(--text)}
.article-body a{color:var(--action);font-weight:600}
.article-body img{margin:2rem 0;border:1px solid var(--border)}
.article-body code{padding:.15em .4em;background:var(--surface-soft);border-radius:3px;font-size:.9em}
.back-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--text-muted);font-size:var(--step--1);font-weight:700;text-decoration:none}

.empty-state{padding:3rem;border:1px dashed var(--border-strong);text-align:center;color:var(--text-muted);grid-column:1/-1}