/* Walking Forest — walkingforeststudio.com */

:root {
  --paper:#FAF5E8; --surface:#FFFCF3; --ink:#22331F; --green:#35592F; --leaf:#A9C64C;
  --brown:#6B4226; --border:#E0D6BC; --rule:#E4DAC2; --body:#4A5744; --muted:#5C6A54;
  --meta:#616F59; --sand:#F2EAD5; --tint-leaf:#E4EFCF; --tint-leaf-edge:#C3D89A;
  --btn-edge:#C9D3B6; --band-text:#F2EBD8; --band-muted:#BFCBB2; --band-rule:#3D5236;
  --contour:#D2C7A6;
  --serif:'Petrona','Iowan Old Style',Georgia,serif;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --gutter:72px;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; }
img,svg { max-width:100%; }
a { color:var(--green); text-decoration:none; }
a:hover { color:var(--brown); }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; border-radius:4px; }
h1,h2,h3 { font-family:var(--serif); font-weight:600; margin:0; }
p { margin:0; }

.wrap { max-width:1440px; margin:0 auto; background:var(--paper); }
.eyebrow { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--meta); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:8px; z-index:10; }

/* ---------- header ---------- */
.nav { display:flex; align-items:center; justify-content:space-between; gap:24px;
       padding:26px var(--gutter); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); }
.brand span { font-family:var(--serif); font-weight:600; font-size:23px; }
.nav-links { display:flex; align-items:center; gap:34px; font-size:15px; }
.nav-links a { color:var(--ink); }
.nav-links a[aria-current="page"] { color:var(--brown); }
.nav-toggle { display:none; width:44px; height:44px; align-items:center; justify-content:center;
              background:none; border:0; padding:0; cursor:pointer; color:var(--ink); }

/* ---------- buttons ---------- */
.btn { display:inline-block; border-radius:999px; font-size:16px; padding:15px 28px;
       font-family:inherit; line-height:1.2; }
.btn-primary { background:var(--green); color:var(--paper); }
.btn-primary:hover { background:var(--ink); color:var(--paper); }
.btn-quiet { border:1px solid var(--btn-edge); color:var(--ink); }
.btn-quiet:hover { border-color:var(--brown); color:var(--brown); }
.link-u { color:var(--brown); border-bottom:1px solid var(--brown); padding-bottom:2px; }
.pill-soon { font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink);
             background:var(--leaf); border-radius:999px; padding:6px 13px; white-space:nowrap; }
.pill-off { font-size:13px; border:1px dashed #C3CDB4; border-radius:999px; padding:9px 17px;
            color:var(--meta); white-space:nowrap; }

/* ---------- hero ---------- */
.hero { position:relative; padding:100px var(--gutter) 84px; overflow:hidden; }
.hero-contour { position:absolute; right:-60px; top:-30px; opacity:.55; pointer-events:none; }
.hero-inner { position:relative; max-width:880px; display:flex; flex-direction:column; gap:28px; }
.hero-eyebrow { display:flex; align-items:center; gap:10px; }
.hero-eyebrow::before { content:""; width:26px; height:1px; background:var(--meta); }
.hero h1 { font-size:clamp(2.75rem,7.4vw,100px); line-height:.97; letter-spacing:-2px; text-wrap:pretty; }
.hero h1 em { font-style:italic; color:var(--green); }
.hero-sub { font-size:20px; line-height:1.6; max-width:620px; color:var(--body); }
.hero-cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:10px; }

/* ---------- section scaffolding ---------- */
.section { padding:0 var(--gutter) 84px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px;
                border-bottom:1px solid var(--border); padding-bottom:16px; margin-bottom:38px; }
.section-head h2 { font-size:40px; }

/* ---------- app showcase ---------- */
.app-panel { border:1px solid var(--border); border-radius:24px; overflow:hidden;
             display:grid; grid-template-columns:400px minmax(0,1fr); }
.app-art { position:relative; background:var(--tint-leaf); border-right:1px solid var(--tint-leaf-edge);
           display:flex; align-items:center; justify-content:center; padding:56px; }
.app-art svg.contour { position:absolute; left:-60px; top:-40px; opacity:.45; }
.app-icon { position:relative; width:148px; height:148px; border-radius:36px; background:var(--surface);
            border:1px solid var(--tint-leaf-edge); display:flex; align-items:center; justify-content:center;
            font-family:var(--serif); font-weight:600; font-size:62px; color:var(--green); }
.app-body { background:var(--surface); padding:46px 48px; display:flex; flex-direction:column; gap:18px; }
.app-title { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.app-title h3 { font-size:36px; }
.app-desc { font-size:17px; line-height:1.65; color:var(--muted); }
.app-links { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:auto; padding-top:10px; }
.app-links .sep { width:1px; height:20px; background:var(--border); }
.app-stores { display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- studio ---------- */
.studio { padding:0 var(--gutter) 84px; display:grid;
          grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:72px; align-items:start; }
.studio-head { display:flex; flex-direction:column; gap:18px; }
.studio-head h2 { font-size:46px; line-height:1.05; letter-spacing:-.8px; }
.studio-copy { display:flex; flex-direction:column; gap:20px; font-size:17px; line-height:1.7; color:var(--body); }

/* ---------- dark values band ---------- */
.values { background:var(--ink); color:var(--band-text); padding:68px var(--gutter);
          display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.values h3 { font-size:29px; color:var(--leaf); }
.values p { font-size:16px; line-height:1.65; color:var(--band-muted); }
.values > div { display:flex; flex-direction:column; gap:12px; }

/* ---------- CTA band ---------- */
.cta-wrap { padding:76px var(--gutter) 84px; }
.cta { background:var(--sand); border:1px solid var(--border); border-radius:24px; padding:46px 48px;
       display:flex; align-items:center; justify-content:space-between; gap:56px; }
.cta-text { display:flex; flex-direction:column; gap:12px; }
.cta-text h2 { font-size:40px; line-height:1.05; letter-spacing:-.8px; }
.cta-text p { font-size:17px; line-height:1.7; color:var(--body); max-width:560px; }
.cta .btn { white-space:nowrap; }

/* ---------- document pages ---------- */
.doc-hero { padding:72px var(--gutter) 48px; border-bottom:1px solid var(--border); }
.doc-hero-inner { max-width:820px; display:flex; flex-direction:column; gap:18px; }
.doc-hero h1 { font-size:clamp(2.4rem,5.4vw,68px); line-height:1; letter-spacing:-1.4px; }
.doc-hero p { font-size:19px; line-height:1.65; color:var(--body); }
.doc { padding:56px var(--gutter) 64px; }
.doc-inner { max-width:820px; display:flex; flex-direction:column; gap:34px; }
.callout { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:30px;
           display:flex; flex-direction:column; gap:12px; }
.callout h2 { font-size:29px; }
.doc-sec { display:flex; flex-direction:column; gap:12px; padding-bottom:34px; border-bottom:1px solid var(--rule); }
.doc-sec h2 { font-size:29px; }
.doc p, .callout p { font-size:17px; line-height:1.72; color:var(--body); }
.doc-terms { display:flex; flex-direction:column; gap:16px; padding-top:14px; }
.doc-terms h2 { font-size:42px; letter-spacing:-.8px; }

/* ---------- support directory ---------- */
.support-list { display:flex; flex-direction:column; gap:20px; }
.support-card { background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:32px;
                display:flex; gap:30px; align-items:center; }
.support-card .icon { width:88px; height:88px; border-radius:22px; background:var(--tint-leaf);
                      border:1px solid var(--tint-leaf-edge); display:flex; align-items:center;
                      justify-content:center; flex-shrink:0; font-family:var(--serif); font-weight:600;
                      font-size:36px; color:var(--green); }
.support-card .meta { display:flex; flex-direction:column; gap:10px; flex-grow:1; }
.support-card h3 { font-size:30px; }
.support-card p { font-size:17px; line-height:1.7; color:var(--body); max-width:620px; }

/* ---------- footer ---------- */
.footer { border-top:1px solid var(--border); padding:40px var(--gutter) 48px;
          display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
          font-size:14px; color:var(--meta); }
.footer-brand { display:flex; align-items:center; gap:8px; }
.footer-links { display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a, .footer-links button { color:var(--meta); }
.footer-links button { background:none; border:0; padding:0; font:inherit; cursor:pointer; }
.footer-links a:hover, .footer-links button:hover { color:var(--brown); }

/* ---------- cookie banner ---------- */
.consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:50;
           background:var(--surface); border:1px solid var(--border); border-radius:12px;
           padding:24px 30px; display:flex; align-items:center; justify-content:space-between; gap:48px;
           box-shadow:0 8px 26px rgba(34,51,31,.16); max-width:1408px; margin:0 auto; }
.consent[hidden] { display:none; }
.consent-text { display:flex; flex-direction:column; gap:5px; max-width:780px; }
.consent-text strong { font-size:16px; font-weight:600; }
.consent-text p { font-size:15px; line-height:1.6; color:var(--body); }
.consent-actions { display:flex; align-items:center; gap:10px; }
.consent-actions button { font:inherit; font-size:15px; font-weight:500; border-radius:8px;
                          padding:13px 26px; cursor:pointer; white-space:nowrap; }
.consent-reject { border:1px solid var(--btn-edge); background:none; color:var(--ink); }
.consent-accept { border:1px solid var(--green); background:var(--green); color:var(--paper); }

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  :root { --gutter:40px; }
  .app-panel { grid-template-columns:1fr; }
  .app-art { border-right:0; border-bottom:1px solid var(--tint-leaf-edge); padding:44px; }
  .studio { grid-template-columns:1fr; gap:32px; }
  .values { grid-template-columns:1fr; gap:32px; }
  .cta { flex-direction:column; align-items:flex-start; gap:28px; }
}

@media (max-width:760px) {
  :root { --gutter:22px; }
  .nav { padding:18px var(--gutter); }
  .nav-toggle { display:flex; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column;
               align-items:flex-start; gap:0; background:var(--paper);
               border-bottom:1px solid var(--border); padding:8px var(--gutter) 16px; z-index:40; }
  .nav-links.open { display:flex; }
  .nav-links a { display:block; width:100%; padding:14px 0; font-size:17px; }
  .site-header { position:relative; }
  .hero { padding:44px var(--gutter) 40px; }
  .hero-inner { gap:18px; }
  .hero h1 { letter-spacing:-.9px; }
  .hero-sub { font-size:16px; }
  /* keep the contour clear of the copy at phone width */
  .hero-contour { width:420px; height:360px; right:-170px; top:-50px; opacity:.4; }
  .hero-cta { flex-direction:column; align-items:flex-start; gap:12px; }
  .hero-cta .btn { width:100%; text-align:center; }
  .section, .studio { padding:0 var(--gutter) 40px; }
  .section-head { flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:22px; }
  .section-head h2, .studio-head h2, .cta-text h2 { font-size:30px; }
  .app-art { padding:32px; }
  .app-icon { width:104px; height:104px; border-radius:26px; font-size:44px; }
  .app-body { padding:24px 22px; }
  .app-title h3 { font-size:26px; }
  .app-desc, .studio-copy, .support-card p, .doc p, .callout p { font-size:16px; }
  .app-links { gap:14px; }
  .app-links .sep { display:none; }
  .values { padding:36px var(--gutter); gap:26px; }
  .values h3 { font-size:25px; }
  .cta-wrap { padding:38px var(--gutter) 32px; }
  .cta { padding:26px 22px; border-radius:20px; }
  .doc-hero { padding:44px var(--gutter) 32px; }
  .doc-hero p { font-size:17px; }
  .doc { padding:32px var(--gutter) 40px; }
  .doc-inner { gap:26px; }
  .doc-sec h2, .callout h2 { font-size:25px; }
  .doc-terms h2 { font-size:30px; }
  .support-card { flex-direction:column; align-items:flex-start; gap:18px; padding:24px 22px; }
  .support-card h3 { font-size:26px; }
  .support-card .btn { width:100%; text-align:center; }
  .footer { padding:28px var(--gutter) 36px; flex-direction:column; align-items:flex-start; gap:16px; }
  .consent { left:10px; right:10px; bottom:10px; flex-direction:column; align-items:stretch; gap:14px;
             padding:20px; }
  .consent-actions button { flex:1 1 0; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}