/* Valley Web Company — public site
   Warm white, black type, brand green as the accent; serif italics for the emphasised words.
   Fonts are served from /assets/fonts (SIL Open Font License, see OFL.txt):
   Bricolage Grotesque for headings, Geist for text, Instrument Serif italic for highlighted words. */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --ink:#0b0b0b; --ink-2:#2b2b29; --muted:#6a6a64; --line:#e4e2dc; --line-2:#d3d0c8;
  --paper:#fbfaf7; --soft:#f3f2ed; --white:#fff;
  --accent:#0e7a5f; --accent-2:#14b88a; --accent-soft:#e2f3ec;
  --wrap:1280px; --gutter:clamp(20px,4vw,48px); --r:20px;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,system-ui,sans-serif;
  --body:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --dark:#0c0e0d; --dark-2:#161a18; --dark-line:rgba(255,255,255,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);letter-spacing:-.006em;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:600;font-optical-sizing:auto;line-height:1.02;letter-spacing:-.03em;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.9rem,1.6rem + 5.6vw,6.75rem);letter-spacing:-.035em;line-height:.98}
h2{font-size:clamp(2.2rem,1.3rem + 3.6vw,4.5rem)}
h3{font-size:clamp(1.35rem,1.1rem + .8vw,1.85rem);letter-spacing:-.02em;line-height:1.15}
h1 em,h2 em,.display em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.06em;line-height:.9;color:var(--accent);padding-right:.06em}
.display{font-size:clamp(3.1rem,1.4rem + 7.4vw,9rem);letter-spacing:-.03em;line-height:.92;max-width:13ch}
.lead{font-size:clamp(1.2rem,1rem + .85vw,1.6rem);line-height:1.45;color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:500;color:var(--muted);margin:0 0 clamp(18px,2.4vw,32px)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-2);flex:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--wide{max-width:1520px}
.center{text-align:center}
.ico{width:24px;height:24px;flex:none}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:10px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-soft)}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:500;font-size:1rem;line-height:1.2;text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .ico{width:18px;height:18px;transition:transform .2s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn--lg{padding:19px 32px;font-size:1.0625rem}
.btn--sm{padding:11px 20px;font-size:.95rem}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--accent{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink)}
.btn--accent:hover{background:#fff;border-color:#fff;color:var(--ink)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap}
.link .ico{width:18px;height:18px;transition:transform .2s var(--ease)}
.link:hover{color:var(--accent)}.link:hover .ico{transform:translateX(3px)}

/* Nav: floating pill */
.nav{position:sticky;top:12px;z-index:50;padding:0 max(12px,calc(var(--gutter) - 20px));margin-top:12px}
.nav__in{position:relative;z-index:1;max-width:calc(var(--wrap) + 16px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px;padding:0 10px 0 20px}
/* pill background on a pseudo-element: backdrop-filter on the bar itself would trap the fixed mobile menu inside it */
.nav__in::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border:1px solid rgba(11,11,11,.06);border-radius:999px;transition:box-shadow .25s var(--ease),background .25s}
.nav.is-scrolled .nav__in::before{background:rgba(255,255,255,.9);box-shadow:0 10px 40px -12px rgba(11,11,11,.18)}
.nav__in>.brand,.nav__toggle{position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.03em}
.brand__logo{height:36px;width:auto;display:block}
.foot .brand__logo{height:40px}
.nav__menu{display:flex;align-items:center;gap:2px}
.nav__link{text-decoration:none;color:var(--ink-2);font-weight:500;font-size:.98rem;padding:8px 14px;border-radius:999px;transition:background .15s,color .15s}
.nav__link:hover{background:var(--soft);color:var(--ink)}
.nav__link[aria-current]{color:var(--ink);background:var(--soft)}
.nav__portal{color:var(--muted)}
.nav__lang{text-decoration:none;font-weight:600;font-size:.82rem;letter-spacing:.04em;padding:7px 11px;border:1px solid var(--line-2);border-radius:999px;margin:0 6px;color:var(--ink)}
.nav__lang:hover{border-color:var(--ink)}
.nav__lang-long{display:none}
.nav__toggle{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;padding:12px}
.nav__toggle span{display:block;height:2px;background:var(--ink);margin:7px 0;border-radius:2px;transition:transform .25s var(--ease)}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (max-width:1080px){
  .nav__toggle{display:block}
  .nav__menu{position:fixed;inset:0;z-index:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:104px var(--gutter) 40px;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .25s var(--ease),visibility 0s .25s}
  .nav__menu.open{visibility:visible;opacity:1;transition:opacity .25s var(--ease)}
  .nav__link{font-family:var(--display);font-size:clamp(2rem,8vw,2.75rem);font-weight:600;letter-spacing:-.025em;color:var(--ink);padding:14px 0;border-radius:0;border-bottom:1px solid var(--line);transform:translateY(12px);transition:transform .4s var(--ease),color .15s}
  .nav__menu.open .nav__link{transform:none}
  .nav__link:hover,.nav__link[aria-current]{background:none;color:var(--accent)}
  .nav__portal{font-size:1.25rem;font-family:var(--body);font-weight:500;letter-spacing:0;color:var(--muted)}
  .nav__lang{align-self:flex-start;margin:24px 0 0;font-size:1rem;padding:10px 18px}
  .nav__lang-long{display:inline}.nav__lang-short{display:none}
  .nav__menu .btn{margin-top:20px;padding:19px 32px;font-size:1.0625rem}
  body.menu-open{overflow:hidden}
}

/* Sections */
.section{padding:clamp(88px,12vw,168px) 0}
.section--tight{padding-top:clamp(24px,4vw,48px)}
.section--soft{background:var(--soft)}
.section--line{border-top:1px solid var(--line)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(44px,6vw,88px)}
.shead h2{max-width:17ch;margin:0}
.shead .eyebrow{margin-bottom:20px}

/* Home hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,8vw,112px) 0 0;margin-top:-80px;padding-top:calc(80px + clamp(56px,8vw,112px))}
.hero__bg{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(42% 52% at 88% 8%,rgba(20,184,138,.22),transparent 70%),
    radial-gradient(30% 40% at 6% 40%,rgba(20,184,138,.10),transparent 70%),
    linear-gradient(to right,rgba(11,11,11,.045) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(to bottom,rgba(11,11,11,.045) 1px,transparent 1px) 0 0/72px 72px;
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 85%);mask-image:linear-gradient(to bottom,#000 30%,transparent 85%)}
.hero__in{position:relative}
.hero__foot{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:clamp(32px,4vw,56px)}
.hero__foot .lead{margin:0}
.actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:860px){.hero__foot{grid-template-columns:1fr}}
/* load sequence */
.js .hero__in>*{animation:rise .9s var(--ease) both}
.js .hero__in>:nth-child(2){animation-delay:.08s}
.js .hero__in>:nth-child(3){animation-delay:.2s}
.js .marquee{animation:fade 1.2s .35s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Project marquee */
.marquee{margin-top:clamp(56px,8vw,104px);overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;animation:scroll 70s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{position:relative;margin:0;width:clamp(260px,30vw,480px);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--soft);flex:none}
.marquee__item img{width:100%;height:100%;object-fit:cover}
.marquee__item figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;font-size:.85rem;font-weight:500;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease)}
.marquee__item:hover figcaption{opacity:1;transform:none}
@keyframes scroll{to{transform:translateX(calc(-50% - clamp(12px,1.4vw,20px) / 2))}}

/* Stats */
.stats-band{border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px);gap:32px}
.stat+.stat{border-left:1px solid var(--line);padding-left:clamp(16px,2.4vw,32px)}
.stat b{display:block;color:var(--ink);font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,1.8rem + 2.6vw,4.25rem);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:12px}
.stat span{color:var(--muted);display:block;max-width:18ch}
@media (max-width:860px){.stats{grid-template-columns:1fr;row-gap:28px}.stat+.stat{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}}

/* Services bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"web cart app" "social cart camera" "server server server";gap:clamp(12px,1.4vw,20px)}
.tile{position:relative;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:clamp(26px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tile h3{margin:auto 0 0;padding-top:clamp(28px,4vw,56px)}
.tile p{margin:0;color:var(--muted);max-width:40ch}
.tile__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.tile__ico .ico{width:26px;height:26px}
@media (hover:hover){.tile:hover{transform:translateY(-4px);box-shadow:0 24px 60px -24px rgba(11,11,11,.22);border-color:transparent}}
.tile--web{grid-area:web}.tile--app{grid-area:app}.tile--social{grid-area:social}.tile--camera{grid-area:camera}
.tile--cart{grid-area:cart;background:var(--dark);border-color:var(--dark);color:#fff;overflow:hidden;isolation:isolate}
.tile--cart::before{content:"";position:absolute;inset:auto -30% -40% -30%;height:80%;background:radial-gradient(closest-side,rgba(20,184,138,.55),transparent);z-index:-1}
.tile--cart h3{font-size:clamp(2rem,1.4rem + 2vw,3rem);letter-spacing:-.04em;line-height:1.02}
.tile--cart p{color:rgba(255,255,255,.72);font-size:1.08em}
.tile--cart .tile__ico{background:rgba(20,184,138,.16);color:var(--accent-2)}
.tile--server{grid-area:server;display:grid;grid-template-columns:auto 1fr 1.3fr auto;align-items:center;gap:clamp(16px,3vw,48px);background:var(--accent-soft);border-color:transparent}
.tile--server h3{margin:0;padding:0}
.tile__link{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:background .2s,transform .2s var(--ease)}
.tile__link:hover{background:var(--accent);transform:rotate(-45deg)}
.tile__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
@media (max-width:960px){.bento{grid-template-columns:1fr 1fr;grid-template-areas:"cart cart" "web app" "social camera" "server server"}.tile--server{grid-template-columns:auto 1fr auto}.tile--server p{grid-column:1/-1;grid-row:2}}
@media (max-width:600px){.bento{grid-template-columns:1fr;grid-template-areas:"cart" "web" "app" "social" "camera" "server"}.tile h3{padding-top:20px}.tile--server{grid-template-columns:1fr auto}.tile--server .tile__ico{display:none}}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,112px);align-items:center}
.split>*{min-width:0}
.split__img{border-radius:var(--r);width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.ticks{list-style:none;padding:0;margin:clamp(24px,3vw,40px) 0;border-top:1px solid var(--line-2)}
.ticks li{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-2);font-size:1.0625em}
.ticks .ico{width:22px;height:22px;color:var(--accent)}

/* Work */
.work{display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:clamp(20px,3vw,40px);row-gap:clamp(56px,7vw,96px)}
@media (max-width:700px){.work{grid-template-columns:1fr}}
.work__item{display:flex;flex-direction:column;min-width:0}
.work__img{position:relative;aspect-ratio:3/2;border-radius:24px;overflow:hidden;background:var(--soft);margin-bottom:22px}
.work__tag{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:500;color:var(--ink)}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
@media (hover:hover){.work__item:hover .work__img img{transform:scale(1.035)}}
.work__item h3{margin:0 0 6px;transition:color .2s}
@media (hover:hover){.work__item:hover h3{color:var(--accent)}}
.work__item p{color:var(--muted);margin:4px 0 0;max-width:48ch}
.work__item .link{align-self:flex-start;margin-top:16px;font-size:.98rem}

/* Process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.step{border-top:1px solid var(--ink);padding-top:24px}
.step__n{display:block;font-family:var(--body);font-weight:500;font-variant-numeric:tabular-nums;color:var(--accent);margin-bottom:clamp(28px,4vw,56px)}
.step p{color:var(--muted);margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr}.step__n{margin-bottom:16px}}

/* Two-column band */
.band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.band h2{margin:0}.band .lead{margin-bottom:28px}
@media (max-width:860px){.band{grid-template-columns:1fr}}

/* Closing CTA */
.cta{position:relative;overflow:hidden;isolation:isolate;background:var(--dark);color:#fff;padding:clamp(88px,12vw,168px) 0}
.cta__glow{position:absolute;z-index:-1;width:70vw;height:70vw;max-width:1000px;max-height:1000px;left:-18vw;bottom:-46vw;background:radial-gradient(closest-side,rgba(20,184,138,.45),transparent);pointer-events:none}
.cta h2 em{color:var(--accent-2)}
.cta__in{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.cta h2{font-size:clamp(2.6rem,1.4rem + 5vw,6.25rem);letter-spacing:-.035em;line-height:.98;margin:0}
.cta p{color:rgba(255,255,255,.72);font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.45;margin-bottom:32px;max-width:34ch}
.cta :focus-visible{outline-color:var(--accent-2)}
@media (max-width:860px){.cta__in{grid-template-columns:1fr}}

/* Inner page hero */
.phero{position:relative;isolation:isolate;margin-top:-80px;padding:calc(80px + clamp(56px,9vw,128px)) 0 clamp(48px,6vw,88px)}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 70% at 90% 0%,rgba(20,184,138,.18),transparent 70%)}
.js .phero .wrap>*{animation:rise .9s var(--ease) both}.js .phero .wrap>:nth-child(2){animation-delay:.08s}.js .phero .wrap>:nth-child(3){animation-delay:.18s}
.phero h1{max-width:15ch}
.phero .lead{margin-top:clamp(20px,2.4vw,32px)}
.phero--404{min-height:60vh}

/* Plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:stretch}
@media (max-width:960px){.plans{grid-template-columns:1fr;max-width:560px}}
.plan{position:relative;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(28px,3vw,40px);display:flex;flex-direction:column}
.plan h3{margin:0 0 6px}
.plan__desc{color:var(--muted);margin:0}
.plan__price{font-family:var(--display);font-weight:600;font-size:clamp(3rem,2.4rem + 2vw,4.25rem);letter-spacing:-.04em;line-height:1;margin:28px 0 8px}
.plan__price small{font-size:1.1rem;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:4px}
.plan__note{color:var(--muted);font-size:.95rem;margin:0 0 28px}
.plan ul{list-style:none;padding:24px 0 0;margin:0 0 32px;display:grid;gap:12px;border-top:1px solid var(--line)}
.plan li{display:flex;gap:12px;align-items:flex-start}
.plan li .ico{width:22px;height:22px;color:var(--accent);margin-top:2px}
.plan .btn{margin-top:auto}
.plan--hot{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:0 30px 70px -30px rgba(14,122,95,.55)}
.plan--hot .plan__desc,.plan--hot .plan__note,.plan--hot .plan__price small{color:rgba(255,255,255,.65)}
.plan--hot ul{border-color:rgba(255,255,255,.15)}
.plan--hot li .ico{color:var(--accent-2)}
.plan__badge{position:absolute;top:clamp(28px,3vw,40px);right:clamp(28px,3vw,40px);font-size:.8rem;font-weight:600;background:var(--accent-2);color:var(--ink);padding:5px 12px;border-radius:999px}
.specs{margin-top:clamp(64px,8vw,112px);display:grid;grid-template-columns:1fr 2fr;gap:32px;border-top:1px solid var(--ink);padding-top:28px}
.specs__h{font-size:clamp(1.35rem,1.1rem + .8vw,1.85rem);margin:0}
.specs ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}
.specs li{display:flex;gap:12px;align-items:center}
.specs li .ico{width:20px;height:20px;color:var(--accent)}
@media (max-width:760px){.specs,.specs ul{grid-template-columns:1fr}}

/* Contact + forms */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,112px);align-items:start}
.contact .lead{margin-top:0}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.contact__box{background:var(--white);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,4vw,48px)}
.form{display:grid;gap:22px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
label{font-weight:500;font-size:.95rem;display:grid;gap:8px;color:var(--ink-2)}
input,select,textarea{font:inherit;font-size:1.0625rem;padding:16px 18px;border:1px solid var(--line-2);border-radius:14px;background:var(--paper);color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s,background .15s}
input:hover,select:hover,textarea:hover{border-color:#b9b6ad}
input:focus,select:focus,textarea:focus{border-color:var(--ink);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(20,184,138,.18)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px;padding-right:46px}
textarea{min-height:170px;resize:vertical}
.form .btn{justify-self:start}
.hp{position:absolute;left:-9999px}
.alert{padding:18px 20px;border-radius:14px;font-weight:500}
.alert--ok{background:var(--accent-soft);color:#0b5c47}
.alert--err{background:#fdecec;color:#9b1c1c}

/* Footer */
.foot{border-top:1px solid var(--line);padding:clamp(64px,8vw,104px) 0 28px;background:var(--paper)}
.foot__grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}.foot__about{grid-column:1/-1}}
.foot__about p{color:var(--muted);margin-top:20px;max-width:34ch}
.foot h3{font-family:var(--body);font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--muted);margin:6px 0 16px}
.foot a:not(.brand){display:block;text-decoration:none;padding:5px 0;color:var(--ink)}
.foot a:not(.brand):hover{color:var(--accent)}
.foot__word{font-family:var(--display);font-weight:600;font-size:calc((min(100vw,var(--wrap)) - 2 * var(--gutter)) / 6);letter-spacing:-.045em;line-height:.85;margin:clamp(56px,8vw,112px) 0 0;color:var(--ink);white-space:nowrap;overflow:hidden}
.foot__word span{color:var(--accent-2)}
.foot__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:clamp(28px,3vw,40px);padding-top:22px;font-size:.92rem;color:var(--muted)}

/* WhatsApp */
.wa{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:40;transition:transform .2s var(--ease)}
.wa:hover{transform:scale(1.06)}
.wa svg{width:30px;height:30px}

/* Reveal on scroll (only when JS is on) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}.marquee{overflow-x:auto}}