/* Layout: multi-page company site in one file (hash routes). Sticky light
   header, dark forest bands for heroes and feature statements, light content
   pages, full sitemap footer. Single light look taken from the company plan. */
:root{
  --bg:#FBFBF7; --surface:#EEF1E4; --ink:#1C2B25; --muted:#5E6A62;
  --line:rgba(28,43,37,.14); --accent:#4A6638; --accent-soft:#8BA36C;
  --label:#5F7F48; --on-accent:#FFFFFF; --signal:#C8102E;
  --logo-bg:#1C2B25; --logo-fg:#D3EBAE;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --max:1240px;
  color-scheme:light;
}
.dark{
  --bg:#16231E; --surface:#1F3029; --ink:#EEF2E8; --muted:#A5B59C;
  --line:rgba(214,232,200,.14); --accent:#C2DD98; --accent-soft:#8BA36C;
  --label:#A9C783; --on-accent:#16231E;
  background:var(--bg); color:var(--ink);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;
  padding-left:max(28px,env(safe-area-inset-left,0px));
  padding-right:max(28px,env(safe-area-inset-right,0px))}
@media (max-width:560px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}
.label{font:500 12px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--label)}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.05;text-wrap:balance;margin:0}
p{margin:0}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--sans);white-space:nowrap;
  padding:15px 22px;text-decoration:none;border:1.5px solid var(--accent);
  background:var(--accent);color:var(--on-accent);transition:background .2s,border-color .2s,color .2s;cursor:pointer}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.arrow{width:16px;height:16px;transition:transform .25s;flex:none}
a:hover>.arrow,.btn:hover .arrow{transform:translateX(4px)}
.more{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);text-decoration:none;color:var(--accent);padding-block:4px;border-bottom:1px solid transparent}
.more:hover{border-color:currentColor}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:40px;padding-block:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;margin-right:auto}
.mark{width:40px;height:40px;flex:none;display:grid;place-items:center;background:var(--logo-bg);color:var(--logo-fg)}
.mark svg{width:20px;height:20px}
.brand .name{display:flex;flex-direction:column;gap:5px;font:700 13px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.menu{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.menu a{text-decoration:none;color:var(--muted);padding-block:6px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--ink);border-color:var(--accent)}
.head-cta{padding:11px 18px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px}
@media (max-width:980px){
  .menu,.head-cta{display:none}
  .burger{display:grid}
  .site-head .wrap{gap:16px}
  .menu.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
  .menu.open a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
  .menu.open a[aria-current="page"]{color:var(--accent)}
}
@media (max-width:560px){.brand .name{font-size:11px;letter-spacing:.16em}.mark{width:34px;height:34px}}

/* ---------- views ---------- */
main{animation:fade .45s ease both}
main:focus{outline:none}
@keyframes fade{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
section.band{padding-block:112px}
@media (max-width:860px){section.band{padding-block:72px}}
.band + .band:not(.dark){border-top:1px solid var(--line)}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 20%,color-mix(in srgb,var(--bg) 50%,transparent) 50%,transparent 80%)}
@media (max-width:860px){.hero::after{background:linear-gradient(180deg,var(--bg) 40%,color-mix(in srgb,var(--bg) 55%,transparent) 70%,transparent 100%)}}
.hero .wrap{position:relative;z-index:2;padding-block:120px 150px}
@media (max-width:860px){.hero .wrap{padding-block:64px 320px}}
.hero h1{font-size:clamp(42px,6.2vw,96px);max-width:14ch;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .sub{max-width:44ch;color:var(--muted);font-size:clamp(18px,1.6vw,21px);margin:28px 0 40px;animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;animation:rise .9s .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:.15;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-foot{position:absolute;z-index:3;left:0;right:0;bottom:0;border-top:1px solid var(--line)}
.hero-foot .wrap{display:flex;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-block:18px}
.hero-foot .label{font-size:11px;color:var(--muted)}
.hero-foot b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.flags{display:inline-flex;gap:3px;vertical-align:middle;margin-right:10px}
.flags i{width:14px;height:3px;display:block}
.flags i:nth-child(1){background:var(--signal)}
.flags i:nth-child(2){background:#2F6FD6}
.flags i:nth-child(3){background:#F2C400}

/* ---------- statement ---------- */
.statement{display:grid;grid-template-columns:220px 1fr;gap:40px}
.statement p{font:400 clamp(26px,3vw,40px)/1.3 var(--serif);letter-spacing:-.01em;max-width:30ch;text-wrap:pretty}
.statement p em{font-style:normal;color:var(--accent)}
@media (max-width:860px){.statement{grid-template-columns:1fr;gap:16px}}

/* ---------- section heads ---------- */
.head-row{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.head-row h2{font-size:clamp(32px,3.8vw,52px);margin-top:14px}

/* ---------- capability tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tile{display:flex;flex-direction:column;text-decoration:none;min-width:0;background:var(--bg)}
.art{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;color:var(--accent);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;background-color:var(--bg)}
.art svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover .art svg{transform:scale(1.04)}
.art .tagline{position:absolute;left:16px;top:14px;font-size:10.5px;color:var(--muted)}
.tile-body{padding:24px 0 0;display:flex;flex-direction:column;gap:10px}
.tile h3{font:500 26px/1.15 var(--serif);letter-spacing:-.01em;margin:0}
.tile p{color:var(--muted)}
.tile .more{margin-top:8px;align-self:flex-start}
@media (max-width:1100px){.tiles{grid-template-columns:1fr 1fr;gap:48px 24px}}
@media (max-width:640px){.tiles{grid-template-columns:1fr}.art{aspect-ratio:16/9}}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0 40px}
.pillars .value{border-top:2px solid var(--line);position:relative}
.pillars .value::before{content:"";position:absolute;top:-2px;left:0;width:48px;height:2px;background:var(--accent)}
@media (max-width:960px){.pillars{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pillars{grid-template-columns:1fr}}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2{font-size:clamp(36px,4.6vw,64px)}
.split .copy{display:flex;flex-direction:column;gap:22px;max-width:52ch}
.split .copy p{color:var(--muted);font-size:18px}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}

/* ---------- cards row (news / careers) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.duo a{display:flex;flex-direction:column;gap:14px;padding:36px;background:var(--surface);text-decoration:none;border-top:3px solid var(--accent-soft);min-width:0;transition:background .25s}
.duo a:hover{background:color-mix(in srgb,var(--surface) 70%,var(--accent-soft))}
.duo h3{font:500 28px/1.15 var(--serif);letter-spacing:-.01em;margin:0}
.duo p{color:var(--muted)}
.duo .more{margin-top:auto;padding-top:12px}
@media (max-width:760px){.duo{grid-template-columns:1fr}.duo a{padding:28px}}

/* ---------- inner page header ---------- */
.page-head .wrap{padding-block:96px 80px;display:grid;gap:22px}
.page-head h1{font-size:clamp(44px,6vw,88px);max-width:16ch}
.page-head .sub{max-width:52ch;color:var(--muted);font-size:clamp(18px,1.6vw,21px)}
@media (max-width:860px){.page-head .wrap{padding-block:64px 56px}}

/* ---------- capability rows ---------- */
.cap{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.cap + .cap{margin-top:112px}
.cap:nth-child(even) .art{order:2}
.cap .copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.cap h2{font-size:clamp(32px,3.6vw,48px)}
.cap .copy>p{color:var(--muted);font-size:18px;max-width:46ch}
.ticks{list-style:none;margin:8px 0 0;padding:0;display:grid}
.ticks li{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks svg{width:16px;height:16px;color:var(--accent);margin-top:5px}
@media (max-width:860px){.cap{grid-template-columns:1fr;gap:28px}.cap:nth-child(even) .art{order:0}.cap + .cap{margin-top:72px}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--line)}
.step{padding:28px 28px 0 0;min-width:0;position:relative}
.step::before{content:"";position:absolute;top:-2px;left:0;width:48px;height:2px;background:var(--accent)}
.step h3{font:500 30px/1.1 var(--serif);margin:12px 0 12px}
.step p{color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:40px}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* ---------- values ---------- */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px}
.value{padding:30px 0;border-top:1px solid var(--line);min-width:0}
.value h3{font:500 24px/1.2 var(--serif);margin:0 0 10px}
.value p{color:var(--muted);max-width:46ch}
@media (max-width:760px){.values{grid-template-columns:1fr}}

/* ---------- facts panel ---------- */
.panel{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 40px;background:var(--surface);border-top:3px solid var(--accent-soft);padding:32px 40px}
.panel div{min-width:0}
.panel dt{margin-bottom:10px}
.panel dd{margin:0;font-size:17px}
@media (max-width:900px){.panel{grid-template-columns:1fr 1fr;padding:28px}}
@media (max-width:480px){.panel{grid-template-columns:1fr;gap:22px}}

/* ---------- news ---------- */
.news{list-style:none;margin:0;padding:0}
.news li{display:grid;grid-template-columns:200px 1fr;gap:32px;padding:36px 0;border-top:1px solid var(--line)}
.news li:last-child{border-bottom:1px solid var(--line)}
.news h3{font:500 30px/1.15 var(--serif);margin:0 0 12px}
.news p{color:var(--muted);max-width:60ch}
@media (max-width:760px){.news li{grid-template-columns:1fr;gap:10px}}

/* ---------- careers ---------- */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.areas div{background:var(--bg);padding:28px;min-width:0}
.areas h3{font:500 22px/1.2 var(--serif);margin:0 0 10px}
.areas p{color:var(--muted);font-size:15.5px}
@media (max-width:960px){.areas{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.areas{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.reach{display:grid;gap:0}
.reach>div{padding:22px 0;border-top:1px solid var(--line)}
.reach>div:last-child{border-bottom:1px solid var(--line)}
.reach .label{margin-bottom:8px}
.reach code{font:500 16px/1.4 var(--sans);user-select:all;overflow-wrap:anywhere}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--surface);border-top:3px solid var(--accent-soft);padding:32px}
form .full{grid-column:1/-1}
.field{display:grid;gap:8px;min-width:0}
.field label{font:600 13px/1 var(--sans)}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:12px 14px;width:100%;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.field textarea{min-height:140px;resize:vertical}
.form-note{color:var(--muted);font-size:14px}
.form-note.show{color:var(--accent);font-weight:500}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px}form{grid-template-columns:1fr;padding:24px}}

/* ---------- legal pages ---------- */
.doc{display:grid;grid-template-columns:280px minmax(0,1fr);gap:80px;align-items:start}
.doc aside{position:sticky;top:96px;background:var(--surface);border-top:3px solid var(--accent-soft);padding:26px 26px 28px;display:grid;gap:14px}
.doc aside ul{margin:0;padding:0 0 0 1.1em;display:grid;gap:8px;font-size:15.5px;color:var(--muted)}
.doc aside .contact{border-top:1px solid var(--line);padding-top:14px;font-size:14.5px;color:var(--muted)}
.doc aside code{font:500 14.5px/1.4 var(--sans);color:var(--ink);user-select:all;overflow-wrap:anywhere}
.prose{max-width:70ch;min-width:0}
.prose h2{font:500 clamp(24px,2.3vw,30px)/1.2 var(--serif);letter-spacing:-.01em;margin:56px 0 14px;text-wrap:balance}
.prose h2 .n{color:var(--label);font:500 13px/1 var(--sans);letter-spacing:.14em;margin-right:14px;vertical-align:middle}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:14px}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.prose li::marker{color:var(--accent-soft)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose code{font:500 16px/1.4 var(--sans);user-select:all}
.tbc{background:color-mix(in srgb,var(--accent-soft) 26%,transparent);padding:1px 5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.draft{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--signal);font-size:15px;color:var(--muted)}
.draft b{color:var(--ink);font-weight:600}
.draft svg{width:18px;height:18px;color:var(--signal);margin-top:2px}
.page-head .meta{display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--muted);font-size:14.5px}
@media (max-width:960px){.doc{grid-template-columns:1fr;gap:40px}.doc aside{position:static}}
.form-warn{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:14px;color:var(--muted);padding:14px 16px;background:var(--bg);border-left:3px solid var(--accent-soft)}
.form-warn svg{width:16px;height:16px;color:var(--accent);margin-top:3px}
.form-consent{font-size:14px;color:var(--muted)}
.form-consent a{color:var(--accent)}
.legal nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.legal nav a{color:var(--muted);text-decoration:none}
.legal nav a:hover{color:var(--ink)}

/* ---------- footer ---------- */
.site-foot .wrap{padding-block:80px 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.foot-grid .blurb{color:var(--muted);max-width:34ch;margin-top:20px}
.foot-grid h2{margin:0 0 16px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-grid a{text-decoration:none;color:var(--muted)}
.foot-grid a:hover{color:var(--ink)}
.site-foot .mark{background:var(--logo-fg);color:var(--logo-bg)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-top:24px;color:var(--muted);font-size:14px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- site additions ---------- */
.skip{position:absolute;left:12px;top:-80px;z-index:60;background:var(--accent);color:var(--on-accent);padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
[id]{scroll-margin-top:100px}
.menu-contact{display:none}
@media (max-width:980px){.menu.open .menu-contact{display:block;color:var(--accent);font-weight:600;border-bottom:0}}
.muted{color:var(--muted)}
.email{font:500 16px/1.4 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-soft);text-underline-offset:4px;overflow-wrap:anywhere}
.email:hover{color:var(--accent);text-decoration-color:currentColor}
.doc aside .email{font-size:14.5px}
.h-sub{margin-top:14px;font-size:clamp(30px,3.4vw,44px)}
.h-small{font-size:clamp(28px,3vw,40px)}
.start{align-self:flex-start}
.gap-top{margin-top:32px}
.gap-top-lg{margin-top:72px}
.cta-inline{display:flex;flex-wrap:wrap;gap:12px}
.page-head .cta-row{margin-top:12px}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.req{color:var(--accent)}
.form-note.error{color:var(--signal);font-weight:500}
form.checked .field :invalid{border-color:var(--signal)}
.btn[disabled]{opacity:.6;cursor:progress}
.news-link{text-decoration:none}
.news-link:hover{color:var(--accent)}
.news-more{margin-top:16px}
.crumb{text-decoration:none;border-bottom:1px solid currentColor}
.quote{margin:36px 0;padding:6px 0 6px 24px;border-left:3px solid var(--accent-soft)}
.quote p{font:500 clamp(21px,2vw,26px)/1.35 var(--serif);color:var(--ink)}
.quote footer{margin-top:12px;color:var(--muted);font-size:15px}
@media print{.site-head,.site-foot,.skip,#field,.burger{display:none!important}.dark{background:#fff!important;color:#000!important}main{animation:none}}

.sprite{position:absolute;width:0;height:0;overflow:hidden}