@font-face{font-family:"Fraunces";src:url(/fonts/Fraunces-Display.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/Fraunces-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/Fraunces-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/DMSans-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/DMSans-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --ink:#1C1915;--ink-soft:#3a332c;--walnut:#5A3E2B;--caramel:#9C6B43;--sand:#D8C7AE;--oat:#EADFCF;--cream:#F6F1E8;
  --muted:#6f6254;--rule:rgba(28,25,21,.14);
  --display:"Fraunces",Georgia,serif;--sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--oat);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--caramel);text-underline-offset:4px;text-decoration-thickness:1.5px}
a:hover{color:var(--walnut)}
::selection{background:var(--ink);color:var(--oat)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
img{display:block;max-width:100%}

/* header */
header.site{position:sticky;top:0;z-index:20;background:rgba(234,223,207,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.site.scrolled{border-color:var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo img{height:46px;width:auto}
nav{display:flex;align-items:center;gap:30px}
nav a{text-decoration:none;font-size:15px;color:var(--ink-soft)}
nav a:hover{color:var(--walnut)}
.pill{display:inline-block;padding:11px 20px;border-radius:999px;background:var(--ink);color:var(--oat)!important;font:500 14px/1 var(--sans);text-decoration:none;transition:transform .2s,background .2s}
.pill:hover{background:var(--walnut);transform:translateY(-1px)}
.pill.light{background:var(--cream);color:var(--ink)!important}
.pill.light:hover{background:var(--sand)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(68px,12vw,168px);letter-spacing:-.035em}
h2{font-size:clamp(44px,6.4vw,84px);margin-bottom:28px}
h3{font-size:clamp(28px,3vw,38px)}
.it{font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-.01em}
.kicker{font:500 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--walnut);margin:0 0 26px;display:block}
p{margin:0 0 18px}
.big{font-size:clamp(20px,2vw,24px);line-height:1.55;color:var(--ink-soft)}

/* hero */
.hero{padding:70px 0 90px}
.hero .wrap{display:grid;grid-template-columns:1.35fr .9fr;gap:40px;align-items:center}
.hero h1 .u{position:relative;display:inline-block}
.hero h1 .u img{position:absolute;left:1%;bottom:-.2em;width:52%;height:.2em}
.dict{margin-top:44px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.dict b{font:600 30px/1 var(--display)}
.dict .pr{color:var(--muted);font-size:16px}
.dict .def{flex-basis:100%;font:400 italic clamp(22px,2.3vw,28px)/1.4 var(--display);color:var(--walnut);margin-top:6px}
.hero .lede{margin-top:26px;max-width:46ch;color:var(--ink-soft)}
.seal-wrap{position:relative;justify-self:center;width:min(440px,100%)}
.seal-wrap img{width:100%;will-change:transform;transition:transform .12s linear}
.sticker{position:absolute;right:-6px;bottom:8%;background:var(--cream);border:1.5px solid var(--ink);border-radius:999px;padding:9px 16px;font:400 italic 18px/1 var(--display);transform:rotate(-8deg);box-shadow:4px 4px 0 var(--ink)}

/* marquee */
.marquee{background:var(--ink);color:var(--oat);overflow:hidden;white-space:nowrap;padding:22px 0;border-block:1px solid var(--ink)}
.marquee .track{display:inline-flex;gap:46px;animation:mq 38s linear infinite;padding-left:46px}
.marquee span{font:400 italic clamp(26px,3vw,38px)/1 var(--display)}
.marquee i{font-style:normal;color:var(--caramel);font-size:22px;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
section{padding:130px 0}
section.cream{background:var(--cream)}
section.walnut{background:var(--walnut);color:var(--cream)}
section.walnut .kicker{color:var(--sand)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.story p{font-size:clamp(19px,1.8vw,22px);line-height:1.6;color:var(--ink-soft)}
.story .iykyk{font:400 italic 26px/1.3 var(--display);color:var(--walnut);margin-top:30px}

/* practice */
.motto{font:600 clamp(28px,3.4vw,44px)/1.15 var(--display);letter-spacing:-.02em;margin:34px 0 0;max-width:24ch}
.motto span{display:block;font-style:italic;font-weight:400;color:var(--walnut)}
.practice{list-style:none;padding:0;margin:40px 0 0;border-top:1px solid var(--rule)}
.practice li{display:grid;grid-template-columns:90px 1fr 1.1fr;gap:30px;align-items:baseline;padding:38px 0;border-bottom:1px solid var(--rule)}
.practice .n{font:500 14px/1 var(--sans);color:var(--caramel);letter-spacing:.14em}
.practice h3{font-size:clamp(40px,5vw,66px)}
.practice p{margin:0;font-size:19px;color:var(--ink-soft)}
.practice li:hover h3{color:var(--walnut)}

/* seal section */
.seal-sec .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}
.seal-sec .seal-wrap{width:min(360px,100%)}
.promises{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:34px}
.promises div{padding:22px 0;border-top:1px solid var(--rule)}
.promises b{display:block;font:600 24px/1.2 var(--display);margin-bottom:6px}
.promises span{color:var(--ink-soft);font-size:16px}

/* portfolio */
.venture{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;margin-top:20px}
.venture h3{font-size:clamp(48px,6vw,80px);margin:14px 0 22px}
.venture p{color:var(--sand);font-size:19px;max-width:46ch}
.venture p strong{color:var(--cream);font-weight:500}
.tag{display:inline-block;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--sand);color:var(--sand);border-radius:999px;padding:8px 13px}
.phone{justify-self:center;width:300px;aspect-ratio:9/18.5;border-radius:46px;background:#2b1f17;border:10px solid #1C1915;box-shadow:0 30px 60px rgba(0,0,0,.35);padding:22px 16px;display:flex;flex-direction:column;gap:14px;position:relative}
.phone .time{color:var(--cream);text-align:center;font:600 54px/1 var(--display);margin:22px 0 4px}
.phone .date{color:var(--sand);text-align:center;font-size:13px;margin-bottom:10px}
.widget{background:var(--cream);color:var(--ink);border-radius:24px;padding:18px;font-size:13px;line-height:1.45}
.widget .hi{font:600 22px/1.1 var(--display)}
.widget .aff{font:400 italic 15px/1.35 var(--display);color:var(--walnut);margin:6px 0 10px}
.widget .row{display:flex;gap:8px;align-items:center;padding:2px 0}
.widget .row i{width:13px;height:13px;border:1.5px solid var(--ink);border-radius:50%;flex:none}
.widget .row.done i{background:var(--ink)}
.widget .row.done span{text-decoration:line-through;color:var(--muted)}
.widget.small{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.widget.small b{font:600 16px/1.2 var(--display)}
.widget.small span{font-size:12px;color:var(--muted)}

/* letter */
.letter{max-width:760px;margin:0 auto;background:var(--cream);border-radius:6px;padding:70px 72px;box-shadow:0 1px 0 var(--rule),0 24px 50px -30px rgba(60,40,20,.35);position:relative}
.letter p{font:400 clamp(19px,1.9vw,22px)/1.65 var(--display);color:var(--ink-soft)}
.letter .sign{font:400 italic 34px/1 var(--display);color:var(--ink);margin-top:30px}
.letter .who{font-size:14px;color:var(--muted);letter-spacing:.06em;margin-top:10px}
.letter .stamp{position:absolute;right:-40px;top:-46px;width:120px;transform:rotate(12deg)}

/* contact */
.contact{text-align:center}
.contact h2{font-size:clamp(64px,10vw,140px)}
.contact .mail{font:400 italic clamp(26px,3.4vw,44px)/1.2 var(--display);text-decoration-thickness:2px}
.contact .sq{margin:34px auto 0;width:160px}

/* footer */
footer.site{background:var(--ink);color:var(--sand);padding:80px 0 44px}
footer.site .row1{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
footer.site .row1 img.wm{height:64px}
footer.site .row1 img.seal{width:110px}
footer.site .row2{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(216,199,174,.18);font-size:14px}
footer.site a{color:var(--sand);text-decoration:none;margin-left:22px}
footer.site a:hover{color:var(--cream)}
footer.site .fish{font:400 italic 16px var(--display);color:var(--caramel)}

/* legal pages */
.page{padding:90px 0 110px}
.page .prose{max-width:720px}
.page h1{font-size:clamp(54px,8vw,96px);margin-bottom:20px}
.page h3{font-size:28px;margin:44px 0 12px}
.page p,.page li{color:var(--ink-soft)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}.marquee .track{animation:none}}

@media (max-width:900px){
  .hero .wrap,.two,.seal-sec .wrap,.venture{grid-template-columns:1fr;gap:48px}
  .hero{padding:40px 0 70px}
  .seal-wrap{width:min(300px,80%)}
  section{padding:90px 0}
  .practice li{grid-template-columns:1fr;gap:10px;padding:30px 0}
  .promises{grid-template-columns:1fr}
  nav a.hide-sm{display:none}
  nav{gap:18px}
  .letter{padding:48px 30px}
  .letter .stamp{width:84px;right:-6px;top:-40px}
  footer.site a{margin:0 18px 0 0}
  .logo img{height:40px}
}