/* Ometto: marketing site.
   Palette is the Boyce-Bailey OS wall palette (warm gray-green, sage accent,
   pastel "people" colors) so the product and the site read as one thing. */

@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-latin-wght-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --bg:#E9EAE3; --bg2:#F3F4EE; --card:#FCFCF8;
  --ink:#273029; --soft:#687168; --line:#D3D7CD;
  --accent:#6F9A6A; --accent-d:#416B55; --accent-pale:#DDE8D8;
  --stone:#4D534C;
  --peach:#F1C09B; --rose:#EBA9C0; --sky:#A6C6DE; --sagep:#A7C6A2;
  --butter:#F2DDA0; --lav:#C7B9DD; --mint:#AFD8C2; --clay:#E6B39C;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gut:clamp(20px,5vw,48px);
  /* slightly lopsided corners: cards read as pebbles, not boxes */
  --pebble:34px 42px 36px 46px / 44px 34px 46px 36px;
  color-scheme:light only;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:
    radial-gradient(circle at 85% 6%,rgba(111,154,106,.14),transparent 28%),
    linear-gradient(135deg,var(--bg2),var(--bg));
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--accent-d);outline-offset:3px;border-radius:8px}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--gut)}

h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.03em;line-height:1.05}
em{font-style:italic;color:var(--accent-d)}

.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d);margin-bottom:.9rem}
.eyebrow.light{color:var(--accent-pale)}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gut);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(233,234,227,.72);border-bottom:1px solid rgba(211,215,205,.6);
}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{height:30px;width:auto}
.brand span{font-family:var(--serif);font-weight:600;font-size:1.65rem;letter-spacing:-.04em;line-height:1}
.top nav{display:flex;align-items:center;gap:clamp(.75rem,2.4vw,1.75rem)}
.nav-link{font-weight:600;font-size:.95rem;text-decoration:none;color:var(--soft);transition:color .15s}
.nav-link:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--bg2);
  font-weight:700;font-size:1rem;text-decoration:none;padding:.95rem 1.55rem;border-radius:999px;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),background .18s,box-shadow .18s;
  box-shadow:0 8px 22px rgba(39,48,41,.18);
}
.btn:hover{background:var(--accent-d);transform:translateY(-3px) rotate(-1deg);box-shadow:0 14px 28px rgba(65,107,85,.28)}
.btn:active{transform:translateY(0)}
.btn .arr{display:inline-block;transition:transform .18s}
.btn:hover .arr{transform:translateX(4px)}
.btn-small{padding:.55rem 1.1rem;font-size:.92rem;box-shadow:none}
.link{font-weight:600;color:var(--accent-d);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--accent)}
.link:hover{color:var(--ink)}

/* ---------- pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);
  padding:.45rem 1rem .45rem .8rem;border-radius:999px;font-weight:700;font-size:.85rem;letter-spacing:.04em;color:var(--accent-d);
  box-shadow:0 4px 14px rgba(39,48,41,.06);
}
.dot{position:relative;width:.65rem;height:.65rem;border-radius:50%;background:var(--accent)}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3);opacity:0}}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(1rem,4vw,3.5rem);
  padding-block:clamp(1rem,2.4vw,2rem) clamp(1.5rem,3vw,2.5rem);
}
.hero h1{font-size:clamp(2.6rem,6.1vw,5.1rem);margin:1.1rem 0 1.2rem;text-wrap:balance}
.hero h1 em{position:relative;display:inline-block;padding-right:.04em}
.squig{position:absolute;left:0;bottom:-.14em;width:100%;height:.22em;overflow:visible}
.squig path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s 2.7s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sub{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--soft);max-width:34rem}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 1.8rem;margin-top:2rem}

.hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1/1.05;width:min(100%,34rem);justify-self:center}
.blob{
  position:absolute;inset:4% 2% 8%;background:linear-gradient(160deg,var(--accent-pale),#E7EEDF 60%,var(--bg2));
  border-radius:62% 38% 54% 46% / 48% 56% 44% 52%;animation:morph 14s ease-in-out infinite alternate;
}
@keyframes morph{
  0%{border-radius:62% 38% 54% 46% / 48% 56% 44% 52%}
  50%{border-radius:44% 56% 40% 60% / 58% 42% 58% 42%}
  100%{border-radius:54% 46% 62% 38% / 42% 58% 42% 58%}
}
.peb{position:absolute;border-radius:58% 42% 52% 48% / 52% 50% 50% 48%;animation:float 7s ease-in-out infinite alternate;opacity:.95}
.p1{width:11%;height:8%;background:var(--peach);top:12%;left:6%;animation-duration:6s}
.p2{width:8%;height:6.4%;background:var(--rose);top:24%;right:5%;animation-duration:8s;animation-delay:-2s}
.p3{width:13%;height:9%;background:var(--sky);bottom:20%;left:2%;animation-duration:9s;animation-delay:-4s}
.p4{width:7%;height:5.5%;background:var(--butter);bottom:12%;right:10%;animation-duration:7s;animation-delay:-1s}
.p5{width:9%;height:6.8%;background:var(--lav);top:6%;right:26%;animation-duration:10s;animation-delay:-5s}
.p6{width:6%;height:4.6%;background:var(--mint);bottom:30%;right:1%;animation-duration:6.5s;animation-delay:-3s}
@keyframes float{from{transform:translateY(-8px) rotate(-6deg)}to{transform:translateY(10px) rotate(7deg)}}

/* the cairn */
.cairn{
  position:relative;z-index:2;width:72%;background:none;border:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;padding:0;margin-top:2%;
}
.cairn-svg{width:100%;height:auto;overflow:visible}
.stone{transform-box:fill-box;transform-origin:50% 100%;animation:drop 1.05s both}
.stone.s4{animation-delay:.15s}
.stone.s3{animation-delay:.8s}
.stone.s2{animation-delay:1.45s}
.stone.s1{animation-delay:2.1s,3.6s;animation-name:drop,wobble;animation-duration:1.05s,9s;animation-iteration-count:1,infinite;animation-fill-mode:both,none}
@keyframes drop{
  0%{transform:translateY(-1500px);opacity:0;animation-timing-function:cubic-bezier(.55,0,.9,.55)}
  5%{opacity:1}
  56%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  64%{transform:translateY(0) scale(1.04,.94)}
  79%{transform:translateY(-16px) scale(.99,1.02)}
  92%{transform:translateY(0) scale(1.012,.99)}
  100%{transform:translateY(0) scale(1,1);opacity:1}
}
@keyframes wobble{
  0%,80%,100%{transform:rotate(0)}
  85%{transform:rotate(-2.4deg)}
  90%{transform:rotate(1.8deg)}
  95%{transform:rotate(-.8deg)}
}
.cairn:hover .s1{animation-play-state:running}
.cairn-shadow{
  position:absolute;left:8%;right:8%;bottom:-2%;height:5%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(39,48,41,.28),transparent 70%);
  animation:shadow 3.2s both;transform-origin:center;
}
@keyframes shadow{0%{opacity:0;transform:scaleX(.3)}25%{opacity:.5;transform:scaleX(.9)}100%{opacity:1;transform:scaleX(1)}}
.tap{position:absolute;bottom:-1%;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);opacity:0;animation:fadein .8s 3.4s forwards}
@keyframes fadein{to{opacity:.85}}

/* ---------- the real thing (photo) ---------- */
.showcase{
  display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:clamp(1.8rem,5vw,4.5rem);
  padding-block:clamp(1.5rem,3.6vw,3.25rem) clamp(1rem,2.5vw,2rem);
}
.shot{position:relative;margin:0}
.print{
  position:relative;z-index:1;background:var(--card);padding:clamp(8px,1.2vw,14px);
  border:2.5px solid var(--ink);border-radius:var(--pebble);transform:rotate(-1.4deg);
  box-shadow:10px 12px 0 var(--sagep),0 26px 50px rgba(39,48,41,.16);
  transition:transform .4s cubic-bezier(.3,1.4,.5,1),box-shadow .4s;
}
.shot:hover .print{transform:rotate(0);box-shadow:6px 8px 0 var(--sagep),0 22px 44px rgba(39,48,41,.14)}
.print img{width:100%;height:auto;border-radius:22px 28px 24px 30px / 28px 22px 30px 24px;border:1.5px solid var(--line)}
.shot .peb{z-index:0}
.s-a{width:12%;height:12%;background:var(--butter);top:-5%;left:-3%;animation-duration:7s}
.s-b{width:8%;height:8%;background:var(--sky);bottom:-4%;right:6%;animation-duration:9s;animation-delay:-3s}
.s-c{width:6%;height:6%;background:var(--rose);top:12%;right:-2.5%;animation-duration:6s;animation-delay:-2s}
.shot-copy h2{font-size:clamp(1.9rem,3.4vw,2.8rem);text-wrap:balance}
.shot-copy p:not(.eyebrow){margin-top:1.1rem;color:var(--soft);max-width:26rem}

/* ---------- what's inside ---------- */
.inside{padding-block:clamp(2rem,4vw,3.5rem) clamp(3rem,7vw,6rem)}
.inside h2,.name h2{font-size:clamp(2rem,4.4vw,3.5rem);max-width:20ch;text-wrap:balance}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.8vw,1.4rem);margin-top:clamp(2rem,4vw,3.2rem)}
.card{
  border-radius:var(--pebble);padding:1.5rem 1.4rem 1.6rem;min-height:15rem;display:flex;flex-direction:column;
  box-shadow:0 10px 26px rgba(39,48,41,.07);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s;
}
.card:nth-child(odd){transform:rotate(-.9deg)}
.card:nth-child(even){transform:rotate(.8deg) translateY(10px)}
.card:hover{transform:rotate(0) translateY(-6px);box-shadow:0 18px 34px rgba(39,48,41,.12)}
.ico{display:grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:50%;background:rgba(255,255,255,.72);font-size:1.5rem;margin-bottom:auto;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.card h3{font-size:1.6rem;font-weight:500;margin:1.6rem 0 .4rem}
.card p{font-size:.98rem;line-height:1.5;color:rgba(39,48,41,.82)}
.c-sky{background:var(--sky)} .c-butter{background:var(--butter)} .c-mint{background:var(--mint)} .c-peach{background:var(--peach)}
.c-rose{background:var(--rose)} .c-lav{background:var(--lav)} .c-clay{background:var(--clay)} .c-sage{background:var(--sagep)}

/* ---------- the name ---------- */
.name{
  background:var(--ink);color:var(--bg2);padding-block:clamp(4rem,9vw,7.5rem);
  border-radius:clamp(36px,7vw,96px) clamp(36px,7vw,96px) 0 0;margin-top:clamp(1rem,3vw,3rem);
}
.name em{color:var(--sagep)}
.entry{max-width:40rem;margin-bottom:clamp(3.5rem,8vw,6rem)}
.word{font-family:var(--serif);font-weight:200;font-size:clamp(4.5rem,14vw,10rem);letter-spacing:-.06em;line-height:.9;color:var(--bg2)}
.pron{margin:.9rem 0 1.4rem;font-size:1.05rem;color:var(--accent-pale)}
.pron span{font-weight:700;letter-spacing:.04em}
.pron i{margin-left:.6rem;opacity:.7}
.defs{display:grid;gap:.8rem;font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.4;font-weight:300}
.defs li{padding-left:2rem;position:relative}
.defs b{position:absolute;left:0;font-family:var(--sans);font-size:.85rem;top:.55em;color:var(--sagep)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.3rem);align-items:end;margin-top:clamp(2.2rem,5vw,3.6rem)}
.step{border-radius:var(--pebble);padding:1.4rem 1.3rem 1.5rem;color:var(--ink);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.step:hover{transform:translateY(-6px) rotate(-.8deg)}
.st1{background:var(--sky);min-height:11rem}
.st2{background:var(--peach);min-height:14rem}
.st3{background:var(--rose);min-height:17rem}
.st4{background:var(--lav);min-height:20rem}
.step{display:flex;flex-direction:column;justify-content:flex-end}
.step .n{font-family:var(--serif);font-weight:200;font-size:3.4rem;line-height:1;letter-spacing:-.05em;margin-bottom:auto;opacity:.55}
.step h3{font-size:1.45rem;font-weight:500;margin:1rem 0 .3rem}
.step p{font-size:.96rem;line-height:1.45;color:rgba(39,48,41,.82)}

/* ---------- join ---------- */
.join{background:var(--ink);padding-bottom:clamp(3.5rem,8vw,6rem)}
.join-grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,5vw,4rem);align-items:start;
  background:linear-gradient(160deg,var(--accent-pale),#E3ECDC);color:var(--ink);
  border-radius:clamp(30px,5vw,64px);padding:clamp(1.6rem,5vw,4rem) clamp(1.4rem,5vw,4rem);
}
.join-copy h2{font-size:clamp(2.2rem,4.6vw,3.7rem);margin:1.2rem 0 1rem}
.join-copy p:not(.pill){color:var(--soft);font-size:1.1rem;max-width:26rem}
.join-card{background:var(--card);border-radius:var(--pebble);padding:clamp(1rem,2.6vw,2rem);box-shadow:0 14px 34px rgba(39,48,41,.10)}
.join-card iframe{width:100%;border:0;min-height:300px;display:block}
.fallback{margin-top:.6rem;font-size:.88rem;color:var(--soft)}
.fallback a{color:var(--accent-d);font-weight:600}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--accent-pale);padding:0 0 2.2rem}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.4rem;border-top:1px solid rgba(221,232,214,.18)}
.foot .brand img{filter:invert(1) brightness(1.9) saturate(0);opacity:.9}
.foot .brand span{color:var(--bg2)}
.foot p{font-size:.9rem;opacity:.8}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem}
.foot-links a{font-size:.9rem;font-weight:600;color:var(--accent-pale);text-underline-offset:4px}
.foot-links a:hover{color:#fff}

/* ---------- legal pages (privacy policy) ---------- */
.legal{max-width:48rem;padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,7vw,5rem)}
.legal h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:.2rem 0 .8rem;text-wrap:balance}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:500;margin:2.4rem 0 .7rem;letter-spacing:-.02em}
.legal p,.legal li{color:rgba(39,48,41,.88)}
.legal p{margin-top:.8rem}
.legal ul{margin:.8rem 0 0;padding-left:1.3rem;list-style:disc}
.legal li{margin-top:.45rem;padding-left:.2rem}
.legal li::marker{color:var(--accent)}
.legal a{color:var(--accent-d);font-weight:600;text-underline-offset:3px}
.legal .meta{color:var(--soft);font-size:.95rem;margin-top:0}
.legal .lead{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.4rem);font-weight:300;line-height:1.5;margin-top:1.4rem}
.legal code{font-size:.9em;background:rgba(39,48,41,.07);padding:.1em .4em;border-radius:6px}
mark.todo{background:#FFE98A;color:var(--ink);padding:.05em .3em;border-radius:5px;font-weight:600;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.draft-box{background:#FFF6CC;border:2px dashed #C9A400;border-radius:18px;padding:1rem 1.2rem;font-size:.95rem;line-height:1.5;margin-bottom:2rem}

/* ---------- reveal on scroll (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .card.reveal{transform:translateY(26px) rotate(0)}
.js .card.reveal.in:nth-child(odd){transform:rotate(-.9deg)}
.js .card.reveal.in:nth-child(even){transform:rotate(.8deg) translateY(10px)}
.js .card.reveal.in:hover{transform:rotate(0) translateY(-6px)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);align-items:stretch}
  .st1,.st2,.st3,.st4{min-height:12rem}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:.6rem}
  .hero-art{order:-1;width:min(78%,22rem);margin-bottom:.5rem}
  .join-grid{grid-template-columns:1fr}
  .showcase{grid-template-columns:1fr}
  .print{box-shadow:6px 8px 0 var(--sagep),0 18px 36px rgba(39,48,41,.14)}
  .nav-link{display:none}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .card:nth-child(odd),.card:nth-child(even),.js .card.reveal.in:nth-child(odd),.js .card.reveal.in:nth-child(even){transform:none}
  .steps{grid-template-columns:1fr}
  .st1,.st2,.st3,.st4{min-height:0}
  .step .n{margin-bottom:1rem}
  .brand span{font-size:1.45rem}
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stone,.cairn-shadow,.tap{opacity:1}
  .squig path{stroke-dashoffset:0}
  .js .reveal{opacity:1;transform:none}
}