/* Reset */
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* FormaFelina – Stylesheet */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --soft:#F5F5F7; --ink:#1D1D1F; --muted:#6E6E73; --line:#E3E3E6;
  --kraft:#6E6E73; --nav:rgba(255,255,255,.72);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(20px,4vw,56px);
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
a{color:inherit}
:focus-visible{outline:2px solid var(--kraft);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.wide{max-width:1480px;margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
.eyebrow{font-size:1rem;font-weight:600;color:var(--kraft);margin:0 0 12px}
.h2{font-size:clamp(2.1rem,5vw,3.75rem);font-weight:700;line-height:1.04;letter-spacing:-.032em}
.h2 span{color:var(--muted)}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.45;color:var(--muted);letter-spacing:-.01em}

/* Nav: translucent material, content scrolls beneath */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--nav);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav .wide{display:flex;align-items:center;gap:28px;height:52px}
.logo{text-decoration:none;font:600 1.05rem/1 var(--display);letter-spacing:-.02em}
.logo span{color:var(--kraft)}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:.8rem}
.nav nav a{text-decoration:none;color:var(--muted);transition:color .2s}
.nav nav a:hover{color:var(--ink)}
@media (max-width:520px){.nav nav a.opt{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.72em 1.4em;
  font:500 1rem/1 var(--sans);text-decoration:none;background:var(--ink);color:#fff;
  transition:transform 240ms cubic-bezier(.2,.8,.2,1),background .2s}
.btn:hover{background:#000}
.link{color:var(--kraft);text-decoration:none;font-weight:500}
.link:hover{text-decoration:underline}
.link::after{content:" \203A"}
.pressed{transform:scale(.96);transition-duration:90ms}

/* Images: wide frames, gentle scroll-linked settle where supported */
.frame{overflow:hidden;border-radius:clamp(0px,1.6vw,22px);background:var(--soft)}
.frame img{display:block;width:100%;height:100%;object-fit:cover}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .frame img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes settle{from{transform:scale(1.07)}to{transform:scale(1)}}
  }
}

/* Hero */
.hero{text-align:center;padding-block:clamp(64px,9vw,112px) 0}
.hero h1{font-size:clamp(2.9rem,8vw,6rem);font-weight:700;line-height:1;letter-spacing:-.04em}
.hero .lead{max-width:32em;margin:22px auto 32px}
.actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px}
.hero .frame{margin-top:clamp(40px,6vw,72px);aspect-ratio:21/9}
.hero .frame img{object-position:60% 55%}
@media (max-width:700px){.hero .frame{aspect-ratio:4/3}}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,5vw,72px);padding-block:clamp(64px,9vw,112px)}
.pillars .k{font-size:.8rem;font-weight:600;color:var(--kraft);margin:0 0 10px}
.pillars h3{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.pillars p{margin:0;color:var(--muted)}
@media (max-width:980px){.pillars{grid-template-columns:1fr 1fr;gap:40px}}
@media (max-width:560px){.pillars{grid-template-columns:1fr;gap:36px}}

/* Split: image + text */
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(40px,6vw,80px)}
.split .frame{aspect-ratio:16/10}
.split .lead{margin:20px 0 0;max-width:26em}
.split.flip{grid-template-columns:1fr 1.35fr}
.split.flip .frame{order:2}
.split .k{font-size:.8rem;font-weight:600;color:var(--kraft);margin:0 0 12px}
@media (max-width:860px){.split,.split.flip{grid-template-columns:1fr}.split.flip .frame{order:0}}

/* Place: full-bleed */
.place{padding-block:clamp(80px,11vw,150px) 0;text-align:center}
.place .lead{max-width:32em;margin:20px auto 0}
.bleed{margin-top:clamp(40px,6vw,72px);aspect-ratio:21/9;overflow:hidden;background:var(--soft)}
.bleed img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bleed img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  }
}
@media (max-width:700px){.bleed{aspect-ratio:4/3}}

/* Range: prototypes on white, image blends into page */
.range{text-align:center;padding-block:clamp(88px,12vw,160px) clamp(40px,6vw,72px)}
.range .lead{max-width:32em;margin:20px auto 0}
.range img{display:block;width:100%;max-width:1344px;height:auto;margin:clamp(24px,4vw,48px) auto 0}

/* Contact */
.contact{background:var(--soft);text-align:center;padding-block:clamp(88px,12vw,150px)}
.contact .lead{margin:18px auto 44px;max-width:30em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto 40px;text-align:left}
.card{background:var(--bg);border-radius:18px;padding:24px 26px}
.card .label{font-size:.8rem;font-weight:600;color:var(--muted);margin:0 0 8px}
.card address,.card .val{font-style:normal;font-size:1.05rem;line-height:1.45;font-weight:500}
.copy{margin-top:10px;background:none;border:0;padding:0;font:500 .85rem var(--sans);color:var(--kraft);cursor:pointer}
@media (max-width:860px){.cards{grid-template-columns:1fr;max-width:460px}}

footer{font-size:.75rem;color:var(--muted);padding-block:22px;border-top:1px solid var(--line)}
footer .wide{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
footer nav{display:flex;gap:18px}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}



/* Intro */
.intro{text-align:center;padding-block:clamp(88px,12vw,160px) clamp(40px,6vw,64px)}
.intro .lead{max-width:34em;margin:22px auto 0}
/* Services */
.svc{padding-block:clamp(48px,7vw,96px)}
.svc-head{text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.svc-grid article{min-width:0}
.svc-grid .frame{aspect-ratio:3/4;margin-bottom:24px}
.svc-grid .k{font-size:.8rem;font-weight:600;color:var(--kraft);margin:0 0 8px}
.svc-grid h3{font-size:1.5rem;font-weight:600;letter-spacing:-.022em;margin-bottom:10px}
.svc-grid article > p:last-child{margin:0;color:var(--muted);max-width:32em}
@media (max-width:860px){.svc-grid{grid-template-columns:1fr;gap:56px}.svc-grid .frame{aspect-ratio:4/3}}
.contact .lead{margin:18px auto 44px}
a.val{display:block;text-decoration:none;color:var(--ink)}
a.val:hover{color:var(--kraft)}


/* Monochrome: interactive text in ink */
.link,.copy,.legal .back{color:var(--ink)}
.link{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.val:hover{color:var(--muted)}
:focus-visible{outline-color:var(--ink)}

/* Legal pages */
[id]{scroll-margin-top:64px}
.legal{max-width:760px;margin-inline:auto;padding-inline:var(--gutter);padding-block:clamp(48px,7vw,88px) clamp(80px,10vw,120px)}
.legal .back{display:inline-block;color:var(--kraft);text-decoration:none;font-weight:500;margin-bottom:28px}
.legal .back:hover{text-decoration:underline}
.legal h1{font-size:clamp(2.4rem,6vw,3.75rem);font-weight:700;letter-spacing:-.035em;line-height:1.04;margin-bottom:12px}
.legal .stand{color:var(--muted);margin:0 0 48px}
.legal h2{font-size:1.25rem;font-weight:600;letter-spacing:-.015em;margin:44px 0 10px}
.legal h3{font-size:1.02rem;font-weight:600;margin:24px 0 6px}
.legal p,.legal li{color:#3A3A3E;font-size:1rem;line-height:1.65;max-width:65ch}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:1.2em}
.legal address{font-style:normal;font-size:1.05rem;line-height:1.6;font-weight:500}
.todo{background:#FFF1C2;color:#5C4400;border-radius:4px;padding:0 .3em;font-weight:500}
@media (prefers-reduced-motion:no-preference){.view-in{animation:fadein .35s ease both}@keyframes fadein{from{opacity:0}to{opacity:1}}}

@media (prefers-reduced-motion:reduce){
  .btn{transition:background .2s}
  .pressed{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--ink);color:#fff;padding:.6em 1em;border-radius:8px;text-decoration:none}
.skip:focus{left:16px}