:root{
  --ink:#141813; --bone:#f2f1ea; --clay:#c26a3f; --clay-hi:#d47b4e;
  --moss:#9a9a52; --moss-dk:#5c5c30; --bark:#2e2418; --panel:#fdfcf8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);font-family:'Schibsted Grotesk',sans-serif;-webkit-font-smoothing:antialiased;color:var(--bone)}
a{color:var(--clay);text-decoration:none}
a:hover{color:var(--moss)}
.wrap{max-width:1200px;margin:0 auto}
.mono{font-family:'IBM Plex Mono',monospace}
img{display:block;max-width:100%}

/* Nav */
.nav{background:var(--ink);border-bottom:1px solid rgba(242,241,234,.12);position:sticky;top:0;z-index:50}
.nav .wrap{padding:20px 32px;display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{color:inherit}
.glyph{display:flex;gap:3px;align-items:flex-end;height:18px}
.glyph i{display:block;width:4px}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--bone)}
.navlinks{display:flex;gap:28px;align-items:center}
.navlink{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:rgba(242,241,234,.65)}
.navlink:hover{color:var(--bone)}
.navlink.active{color:var(--bone);border-bottom:1px solid var(--clay);padding-bottom:2px}
.btn-clay{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--ink);background:var(--clay)}
.btn-clay:hover{background:var(--clay-hi);color:var(--ink)}
.nav .btn-clay{font-size:11px;letter-spacing:.14em;padding:9px 18px}
.nav .btn-clay.active{color:var(--ink)}

/* Generic eyebrow / links */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.24em;color:var(--moss)}
.link-underline{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--moss-dk);border-bottom:1px solid var(--moss-dk);padding-bottom:3px;white-space:nowrap}
.link-underline:hover{color:var(--clay);border-color:var(--clay)}

/* Hero (home) */
.hero .wrap{padding:96px 32px 72px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero h1{margin:0;font-weight:700;font-size:60px;line-height:1.06;letter-spacing:-.02em;color:var(--bone)}
.hero p{margin:0;font-size:18px;line-height:1.65;color:rgba(242,241,234,.72);max-width:520px}
.hero-cta{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.cta-primary{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--ink);background:var(--clay);padding:15px 26px}
.cta-primary:hover{background:var(--clay-hi);color:var(--ink)}
.cta-ghost{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--bone);border:1px solid rgba(242,241,234,.3);padding:14px 26px}
.cta-ghost:hover{border-color:var(--moss);color:var(--bone)}
.hero-media{min-width:0;position:relative;height:420px;border:1px solid rgba(242,241,234,.15);overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Page hero (interior pages) */
.pagehero .wrap{padding:88px 32px 64px;display:flex;flex-direction:column;gap:20px}
.pagehero h1{margin:0;font-weight:700;font-size:52px;line-height:1.08;letter-spacing:-.02em;color:var(--bone);max-width:760px}
.pagehero p{margin:0;font-size:17px;line-height:1.65;color:rgba(242,241,234,.7);max-width:620px}
.pagehero .eyebrow{letter-spacing:.24em}

/* Pillars (home) */
.pillars{background:var(--ink);border-top:1px solid rgba(242,241,234,.12)}
.pillars .wrap{display:grid;grid-template-columns:1fr 1fr 1fr}
.pillar{padding:44px 32px;display:flex;flex-direction:column;gap:12px;border-right:1px solid rgba(242,241,234,.12)}
.pillar:last-child{border-right:none}
.pillar .idx{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--moss)}
.pillar h3{margin:0;font-weight:700;font-size:24px;color:var(--bone)}
.pillar p{margin:0;font-size:15px;line-height:1.6;color:rgba(242,241,234,.65)}
.pillar.accent .idx,.pillar.accent h3{color:var(--clay)}

/* Services overview (home, light) */
.services{background:var(--bone)}
.services .wrap{padding:88px 32px}
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.services-head .col{display:flex;flex-direction:column;gap:14px}
.services-head .eyebrow{color:var(--moss-dk)}
.services-head h2{margin:0;font-weight:700;font-size:40px;letter-spacing:-.015em;color:#22261f;line-height:1.1}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(34,38,31,.15);border:1px solid rgba(34,38,31,.15)}
.svc{background:var(--panel);padding:36px 32px;display:flex;flex-direction:column;gap:10px;color:inherit}
.svc:hover{background:#fffef9}
.svc .idx{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--moss)}
.svc.accent .idx{color:var(--clay)}
.svc h3{margin:0;font-weight:700;font-size:21px;color:#22261f}
.svc p{margin:0;font-size:15px;line-height:1.6;color:#55584e}

/* Clients (home, bark) */
.clients{background:var(--bark)}
.clients .wrap{padding:72px 32px;display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.clients .col{display:flex;flex-direction:column;gap:16px}
.clients .eyebrow{color:var(--clay)}
.clients h2{margin:0;font-weight:700;font-size:34px;letter-spacing:-.015em;color:var(--bone);line-height:1.15}
.clients p{margin:0;font-size:16px;line-height:1.65;color:rgba(242,241,234,.7)}
.client-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(242,241,234,.15);border:1px solid rgba(242,241,234,.15)}
.client-cell{background:var(--bark);padding:26px 24px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:rgba(242,241,234,.8)}

/* About teaser (home, light) */
.about{background:var(--bone);border-top:1px solid rgba(34,38,31,.1)}
.about .wrap{padding:88px 32px;display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.about-photo{width:170px;height:170px;border-radius:50%;overflow:hidden;background:rgba(34,38,31,.08)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.about .col{display:flex;flex-direction:column;gap:16px;max-width:640px}
.about .eyebrow{color:var(--moss-dk)}
.about h2{margin:0;font-weight:700;font-size:34px;letter-spacing:-.015em;color:#22261f;line-height:1.15}
.about p{margin:0;font-size:16px;line-height:1.65;color:#55584e}
.about .link-underline{align-self:flex-start}

/* CTA band (clay) */
.ctaband{background:var(--clay)}
.ctaband .wrap{padding:72px 32px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.ctaband h2{margin:0;font-weight:700;font-size:38px;letter-spacing:-.015em;color:var(--ink);line-height:1.1;max-width:620px}
.cta-dark{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--bone);background:var(--ink);padding:16px 30px;white-space:nowrap}
.cta-dark:hover{background:var(--bark);color:var(--bone)}

/* Footer */
.footer{background:var(--ink);border-top:1px solid rgba(242,241,234,.12)}
.footer .wrap{padding:48px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer .brand span.brand-name{font-size:13px}
.footer-links{display:flex;gap:24px}
.footer-links a{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:rgba(242,241,234,.55)}
.footer-links a:hover{color:var(--bone)}
.footer .cjk{font-family:'Noto Serif TC',serif;font-size:11px;color:rgba(242,241,234,.3);margin-left:4px}
.copy{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:rgba(242,241,234,.4)}

/* ---- Services page ---- */
.svc-row{display:grid;grid-template-columns:auto 1fr 1fr;gap:48px;padding:72px 32px}
.svc-row.light{background:var(--bone)}
.svc-row.panel{background:var(--panel);border-top:1px solid rgba(34,38,31,.12)}
.svc-row .num{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--moss);padding-top:6px}
.svc-row.accent .num{color:var(--clay)}
.svc-row .body{display:flex;flex-direction:column;gap:14px}
.svc-row .body h2{margin:0;font-weight:700;font-size:30px;letter-spacing:-.015em;color:#22261f;line-height:1.15}
.svc-row .body p{margin:0;font-size:16px;line-height:1.65;color:#55584e}
.svc-row .list{border-left:1px solid rgba(34,38,31,.2);padding-left:32px;display:flex;flex-direction:column;gap:12px}
.svc-row .list .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--moss-dk)}
.svc-row .list .items{display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.5;color:#3d4038}

.engage{background:var(--bark)}
.engage .wrap{padding:80px 32px}
.engage .head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px}
.engage .eyebrow{color:var(--clay)}
.engage h2{margin:0;font-weight:700;font-size:36px;letter-spacing:-.015em;color:var(--bone);line-height:1.12;max-width:600px}
.engage-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(242,241,234,.15);border:1px solid rgba(242,241,234,.15)}
.engage-cell{background:var(--bark);padding:32px 28px;display:flex;flex-direction:column;gap:10px}
.engage-cell .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--moss)}
.engage-cell.accent .lbl{color:var(--clay)}
.engage-cell p{margin:0;font-size:15px;line-height:1.6;color:rgba(242,241,234,.75)}

/* ---- About page ---- */
.about-hero .wrap{padding:88px 32px 72px;display:grid;grid-template-columns:1fr auto;gap:64px;align-items:center}
.about-hero .col{display:flex;flex-direction:column;gap:20px}
.about-hero h1{margin:0;font-weight:700;font-size:52px;line-height:1.08;letter-spacing:-.02em;color:var(--bone);max-width:680px}
.about-hero p{margin:0;font-size:17px;line-height:1.65;color:rgba(242,241,234,.7);max-width:600px}
.about-hero .portrait{width:220px;height:270px;border:1px solid rgba(242,241,234,.15);overflow:hidden;background:rgba(242,241,234,.05)}
.about-hero .portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}
.linkedin-link{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--moss);border-bottom:1px solid var(--moss);padding-bottom:3px;align-self:flex-start}
.linkedin-link:hover{color:var(--clay);border-color:var(--clay)}

.experience{background:var(--bone)}
.experience .wrap{padding:88px 32px;display:grid;grid-template-columns:1fr 1.3fr;gap:64px}
.experience .col{display:flex;flex-direction:column;gap:16px}
.experience .eyebrow{color:var(--moss-dk)}
.experience h2{margin:0;font-weight:700;font-size:36px;letter-spacing:-.015em;color:#22261f;line-height:1.12}
.experience p{margin:0;font-size:16px;line-height:1.65;color:#55584e}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(34,38,31,.15);border:1px solid rgba(34,38,31,.15)}
.exp-cell{background:var(--panel);padding:26px 24px;display:flex;flex-direction:column;gap:6px}
.exp-cell .t{font-weight:700;font-size:16px;color:#22261f}
.exp-cell.accent .t{color:var(--clay)}
.exp-cell .m{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--moss)}

.namestory{background:var(--bark)}
.namestory .wrap{padding:80px 32px;display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.namestory .badge{width:120px;height:120px;border:1px solid rgba(242,241,234,.2);display:flex;align-items:center;justify-content:center}
.namestory .badge span{font-family:'Noto Serif TC',serif;font-size:52px;color:rgba(242,241,234,.55)}
.namestory .col{display:flex;flex-direction:column;gap:14px;max-width:640px}
.namestory .eyebrow{color:var(--clay)}
.namestory p{margin:0;font-size:18px;line-height:1.7;color:rgba(242,241,234,.8)}
.namestory p i{font-style:italic}

.principles{background:var(--bone)}
.principles .wrap{padding:88px 32px}
.principles .eyebrow{color:var(--moss-dk);margin-bottom:40px;display:block}
.prin-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px}
.prin{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--moss-dk);padding-top:20px}
.prin.accent{border-top-color:var(--clay)}
.prin .t{font-weight:700;font-size:21px;color:#22261f}
.prin p{margin:0;font-size:15px;line-height:1.65;color:#55584e}

/* ---- Contact page ---- */
.contact-hero .wrap{padding:88px 32px 56px}
.contact{background:var(--bone)}
.contact .wrap{padding:80px 32px;display:grid;grid-template-columns:1.3fr 1fr;gap:72px;align-items:start}
.form{display:flex;flex-direction:column;gap:22px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--moss-dk)}
.field input,.field textarea{font-family:'Schibsted Grotesk',sans-serif;font-size:15px;color:#22261f;background:var(--panel);border:1px solid rgba(34,38,31,.25);padding:14px 16px;outline:none}
.field textarea{line-height:1.6;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--moss-dk)}
.field input::placeholder,.field textarea::placeholder{color:rgba(34,38,31,.4)}
.form .send{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--bone);background:var(--clay);padding:16px 30px;align-self:flex-start;border:none;cursor:pointer}
.form .send:hover{background:var(--clay-hi);color:var(--bone)}
.form .note{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;color:#8a8a72}
.details{display:flex;flex-direction:column;gap:1px;background:rgba(34,38,31,.15);border:1px solid rgba(34,38,31,.15)}
.detail{background:var(--panel);padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.detail .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--moss)}
.detail a{font-weight:600;font-size:17px;color:#22261f}
.detail a:hover{color:var(--clay)}
.detail.dark{background:var(--bark)}
.detail.dark .lbl{color:var(--clay)}
.detail.dark p{margin:0;font-size:15px;line-height:1.6;color:rgba(242,241,234,.8)}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{font-size:44px}
  .pagehero h1,.about-hero h1{font-size:38px}
  .pillars .wrap{grid-template-columns:1fr}
  .pillar{border-right:none;border-bottom:1px solid rgba(242,241,234,.12)}
  .services-head{flex-direction:column;align-items:flex-start}
  .svc-grid,.client-grid,.exp-grid,.form-row{grid-template-columns:1fr}
  .clients .wrap,.about .wrap{grid-template-columns:1fr}
  .about-photo{width:160px;height:160px}
  .svc-row{grid-template-columns:1fr;gap:24px}
  .svc-row .list{border-left:none;border-top:1px solid rgba(34,38,31,.2);padding-left:0;padding-top:20px}
  .engage-grid,.prin-grid{grid-template-columns:1fr}
  .about-hero .wrap,.experience .wrap,.namestory .wrap,.contact .wrap{grid-template-columns:1fr}
  .about-hero .portrait{width:100%;height:300px}
}