:root{
  --paper:#FCF8EE;
  --sand:#F1E8D3;
  --ink:#33341A;
  --olive:#5C5E22;
  --shade:#D98E86;
  --serif:'Young Serif',Georgia,serif;
  --sans:'Figtree',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--shade);outline-offset:3px}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:20}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1}
h1{font-size:clamp(2.9rem,6.2vw,5.6rem);letter-spacing:-.02em}
h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:.75rem}
h3{font-size:1.5rem}
.sub{max-width:34rem;margin-bottom:2.5rem;color:var(--olive)}
.fine{font-size:.9rem;color:var(--olive);margin-top:.75rem}
.wrap{max-width:72rem;margin:0 auto;padding:6rem 1.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}

.nav{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1.5rem;background:rgba(252,248,238,.92);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:.6rem;font:400 1.3rem var(--serif);text-decoration:none}
.brand .mark{width:2.8rem;height:2.8rem;object-fit:contain;mix-blend-mode:multiply}
.nav nav{display:flex;gap:1.75rem;align-items:center;font-weight:500;font-size:.95rem}
.nav nav a{text-decoration:none}
.nav nav a:not(.pill):hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--shade);text-decoration-thickness:2px}
.pill{background:var(--shade);color:#fff;padding:.5rem 1.2rem;border-radius:99px;transition:background .4s}
.pill{color:var(--ink);}

.btn{display:inline-block;background:var(--shade);color:var(--ink);border:0;padding:.9rem 1.8rem;border-radius:99px;font:600 1rem var(--sans);text-decoration:none;cursor:pointer;transition:background .4s,transform .2s}
.btn:hover{transform:translateY(-2px)}
.actions{margin-top:2rem}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:2rem clamp(1.5rem,5vw,5rem) 4rem;min-height:calc(100vh - 4rem)}
.hero-copy p{margin-top:1.5rem;font-size:1.2rem;max-width:28rem}
.mosaic{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:.9rem;height:min(72vh,38rem)}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:1.25rem}
.m1{grid-row:1/3;border-radius:14rem 14rem 1.25rem 1.25rem!important}
.m1{object-position:35% 50%}

/* builder */
.build{background:var(--sand)}
.builder{display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:start}
fieldset{border:0;padding:0;margin-bottom:2rem}
legend{font:400 1.25rem var(--serif);margin-bottom:.9rem}
.opts{display:flex;flex-wrap:wrap;gap:.6rem}
.opts label{cursor:pointer}
.opts input,.shades input{position:absolute;opacity:0}
.opts span{display:block;padding:.7rem 1.3rem;border:2px solid rgba(51,52,26,.18);border-radius:1rem;background:var(--paper);font-weight:600;transition:border-color .2s,background .2s}
.opts small{display:block;font-weight:400;font-size:.85rem;color:var(--olive)}
.opts input:checked+span{border-color:var(--ink);background:#fff}
.opts input:focus-visible+span,.shades input:focus-visible+i{outline:3px solid var(--shade);outline-offset:2px}
.shades{display:flex;flex-wrap:wrap;gap:1rem}
.shades label{display:grid;justify-items:center;gap:.35rem;cursor:pointer;font-size:.85rem;font-weight:500}
.shades i{width:3.4rem;height:3.4rem;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c);border:3px solid var(--paper);box-shadow:0 0 0 2px transparent;transition:box-shadow .2s,transform .2s}
.shades input:checked+i{box-shadow:0 0 0 2px var(--ink);transform:translateY(-3px)}

.summary{position:sticky;top:5.5rem;background:var(--paper);border-radius:1.5rem;padding:2rem;border-top:.6rem solid var(--shade);transition:border-color .4s}
.hand{display:flex;gap:.45rem;margin-bottom:1.25rem}
.hand b{width:2.1rem;height:3rem;border-radius:1rem 1rem .6rem .6rem;background:var(--shade);transition:background .4s;box-shadow:inset -4px -6px 0 rgba(0,0,0,.08),inset 4px 4px 0 rgba(255,255,255,.25)}
.hand b:nth-child(1){height:2.4rem;align-self:flex-end}
.hand b:nth-child(3){height:3.4rem}
.hand b:nth-child(5){height:2.2rem;align-self:flex-end}
.sum-tier{color:var(--olive);font-weight:500}
.sum-price{font:400 3rem var(--serif);margin:.25rem 0 1rem}
#sum-list{list-style:none;padding:0;display:grid;gap:.4rem;margin-bottom:1rem}
#sum-list li{padding-left:1.5rem;position:relative}
#sum-list li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;height:.7rem;border-radius:50% 0 50% 0;background:var(--olive)}
.summary .btn{margin-top:1rem}

.strip{display:grid;grid-template-columns:repeat(3,1fr)}
.strip img{width:100%;height:20rem;object-fit:cover}

.cards{display:grid;gap:1.25rem}
.cards div{background:var(--sand);border-radius:1.25rem;padding:1.5rem 1.75rem}
.cards h3{margin-bottom:.4rem}

.jami{background:var(--sand)}
.jami .portrait{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:60% 30%;border-radius:50% 50% 1.5rem 1.5rem}
.jami p+p{margin-top:1rem}
.jami h2{margin-bottom:1.25rem}
.logo{width:10rem;margin-top:2rem;border-radius:.5rem}

address{font-style:normal;line-height:1.8;margin-top:1.5rem}
form{display:grid;gap:1.1rem;background:var(--sand);padding:2rem;border-radius:1.5rem}
label{display:grid;gap:.35rem;font-weight:600;font-size:.95rem}
input[type=text],input:not([type]){font:400 1rem var(--sans);color:var(--ink);padding:.75rem .9rem;border:2px solid rgba(51,52,26,.15);border-radius:.8rem;background:var(--paper)}
.chosen{background:var(--paper);border-left:.5rem solid var(--shade);padding:.75rem 1rem;border-radius:.6rem;font-weight:500}
form .btn{justify-self:start}

footer{text-align:center;padding:3rem 1.5rem;background:var(--ink);color:var(--sand)}
footer .fine{color:var(--sand);opacity:.7}

@media (max-width:860px){
  .nav nav a:not(.pill){display:none}
  .hero,.two,.builder{grid-template-columns:1fr}
  .hero{min-height:0}
  .mosaic{height:22rem}
  .wrap{padding:4rem 1.25rem}
  .strip{grid-template-columns:1fr}
  .strip img{height:13rem}
  .summary{position:static}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

.contact{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn.ghost{background:transparent;border:2px solid var(--ink);color:var(--ink)}