/* Palette: ink, paper, one amber accent. Amber is used only as a fill with ink text,
   or as text on ink, so every pairing clears WCAG AA. */
:root{
  --ink:#14110f; --ink2:#1f1b18; --paper:#f6f2e9; --tint:#ebe5d6;
  --text:#14110f; --muted:#5a544a; --line:rgba(20,17,15,.16);
  --amber:#f0a60a; --on-dark:#f6f2e9; --on-dark-muted:#b9b1a2;
  --max:1120px;
  --display:Fraunces,Georgia,serif; --body:"Public Sans",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--paper);color:var(--text);font:400 17px/1.65 var(--body)}
a{color:inherit}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.section--dark :focus-visible,.hero :focus-visible,.nav :focus-visible{outline-color:var(--amber)}
.wrap{width:min(var(--max),100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--ink);padding:8px 14px;z-index:100}
.skip:focus{left:8px}

/* Nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;background:var(--ink);color:var(--on-dark)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo b{font:700 20px var(--display)}
.logo span{font:400 15px var(--body);color:var(--on-dark-muted)}
.nav__links{display:flex;align-items:center;gap:28px;font-size:15px}
.nav__links a{text-decoration:none}
.nav__links a:not(.btn):hover{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--amber)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--on-dark);margin:7px 9px}

/* Buttons and links */
.btn{display:inline-block;padding:14px 24px;border:0;border-radius:4px;cursor:pointer;text-decoration:none;
  font:600 15px var(--body);background:var(--amber);color:var(--ink);transition:background .2s}
.btn:hover{background:#ffb923}
.btn--sm{padding:9px 16px;font-size:14px}
.link{font-weight:600;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--amber)}
.link:hover{text-decoration-color:currentColor}

/* Hero */
.hero{background:var(--ink);color:var(--on-dark);padding:170px 0 110px}
.hero__in{display:grid;grid-template-columns:1.4fr 1fr;gap:70px;align-items:end}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(42px,6.4vw,84px);font-weight:700}
h1 em{font-style:italic;font-weight:500;color:var(--amber)}
.lead{color:var(--on-dark-muted);font-size:18px;margin-bottom:30px}
.cta{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.hero .link{color:var(--on-dark)}

/* Sections */
.section{padding:110px 0}
.section--tint{background:var(--tint)}
.section--dark{background:var(--ink);color:var(--on-dark)}
.head{max-width:600px;margin-bottom:56px}
h2{font-size:clamp(32px,4.4vw,52px);font-weight:700;margin-bottom:16px}
.head p,.muted{color:var(--muted)}
.section--dark .muted{color:var(--on-dark-muted)}
.muted{margin-bottom:32px}

/* Services: ruled list with one featured row, not a card grid */
.services{border-top:2px solid var(--ink)}
.svc{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)}
.svc h3{font-size:26px;margin-bottom:8px}
.svc p{color:var(--muted);max-width:60ch}
.num{font:500 22px var(--display);color:var(--muted)}
.svc--lead{padding:44px 0}
.svc--lead h3{font-size:clamp(30px,4vw,44px)}
.svc--lead p{font-size:18px}

/* Approach */
.flow{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
.flow div{padding:26px 0;border-top:1px solid var(--line)}
.flow dt{font:700 26px var(--display);margin-bottom:6px}
.flow dd{color:var(--muted);margin:0}

/* Why */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start}
.split__lead{position:sticky;top:110px}
.split__lead p{color:var(--muted)}
.points li{padding:22px 0;border-top:1px solid var(--line);color:var(--muted)}
.points li:last-child{border-bottom:1px solid var(--line)}
.points strong{color:var(--text);font-weight:600}

/* About: the single amber block on the page */
.band{background:var(--amber);color:var(--ink);padding:100px 0}
.band__text{font:500 clamp(26px,3.6vw,44px)/1.25 var(--display);max-width:26em}

/* Contact */
.contact__in{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}
.info{margin-bottom:18px}
.info address{font-style:normal}
.info span{display:block;font-size:14px;color:var(--on-dark-muted)}
.info a{color:var(--amber);text-underline-offset:4px}
.form{display:grid;gap:18px;padding:32px;background:var(--ink2);border:1px solid rgba(246,242,233,.18);border-radius:6px}
label{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--on-dark-muted)}
input,select,textarea{font:inherit;color:var(--on-dark);background:var(--ink);border:1px solid rgba(246,242,233,.35);border-radius:4px;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--amber);outline-offset:1px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#ff8a80}
.form .btn{justify-self:start}
.form .btn:disabled{opacity:.6;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{font-size:14.5px;min-height:1.4em;color:var(--amber)}
.form__msg.err{color:#ff8a80}

.foot{background:var(--ink);color:var(--on-dark-muted);border-top:1px solid rgba(246,242,233,.14);padding:28px 0;font-size:14px}
.foot__in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* Interaction layer (all gated on .js so the page works without scripting) */
.progress{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:left}
.nav__links a[aria-current]:not(.btn){text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--amber)}

.svc__btn{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;cursor:pointer}
.js .svc__btn:hover{color:#8a5a00}
.svc__btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.svc__icon{position:relative;flex:none;width:22px;height:22px}
.svc__icon::before,.svc__icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .25s}
.svc__icon::after{transform:rotate(90deg)}
.svc__btn[aria-expanded="true"] .svc__icon::after{transform:rotate(0)}
.svc__panel{display:grid;grid-template-rows:1fr}
.svc__inner{overflow:hidden}
.svc__inner ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 30px;margin:20px 0;padding-left:18px;border-left:3px solid var(--amber)}
.svc__inner li{list-style:none}
.link--btn{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer;margin-bottom:6px}
.js .svc__panel{grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.js .svc__panel .svc__inner{visibility:hidden;transition:visibility 0s .3s}
.js .svc.open .svc__panel{grid-template-rows:1fr}
.js .svc.open .svc__panel .svc__inner{visibility:visible;transition-delay:0s}
.svc.open{background:rgba(20,17,15,.04)}
.svc{transition:background .2s}

.copy{margin-left:10px;padding:3px 10px;font:500 13px var(--body);color:var(--on-dark);background:none;border:1px solid rgba(246,242,233,.5);border-radius:4px;cursor:pointer}
.copy:hover{border-color:var(--amber);color:var(--amber)}

.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}

@media(max-width:860px){
  .hero{padding:130px 0 80px}
  .hero__in,.split,.contact__in,.flow{grid-template-columns:1fr;gap:36px}
  .split__lead{position:static}
  .section{padding:76px 0}
  .svc{grid-template-columns:50px 1fr}
  .burger{display:block}
  .nav__links{position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    padding:8px 20px 22px;background:var(--ink);border-bottom:1px solid rgba(246,242,233,.14);display:none}
  .nav__links.open{display:flex}
  .nav__links li{padding:12px 0}
  .nav__links .btn{text-align:center}
  .logo span{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.js .rv{opacity:1;transform:none}}