:root {
  color-scheme: light dark;

  --bg:#f5f2e9;
  --surface:#faf8f2;
  --surface-active:#eee9dc;

  --text:#181816;
  --muted:#66645d;
  --line:#d5d0c4;
  --accent:#9b7a3d;

  --width:1120px;
}

@media (prefers-color-scheme:dark) {
  :root {
    --bg:#171715;
    --surface:#1d1d1a;
    --surface-active:#292821;

    --text:#f2efe7;
    --muted:#aaa79e;
    --line:#34332e;
    --accent:#c19b4f;
  }
}

:root[data-theme="light"] {
  --bg:#f5f2e9;
  --surface:#faf8f2;
  --surface-active:#eee9dc;

  --text:#181816;
  --muted:#66645d;
  --line:#d5d0c4;
  --accent:#9b7a3d;
}

:root[data-theme="dark"] {
  --bg:#171715;
  --surface:#1d1d1a;
  --surface-active:#292821;

  --text:#f2efe7;
  --muted:#aaa79e;
  --line:#34332e;
  --accent:#c19b4f;
}


* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body {
  margin:0;

  background:var(--bg);
  color:var(--text);

  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
}

.container {
  width:min(calc(100% - 56px),var(--width));
  margin-inline:auto;
}


/* HEADER */

.site-header {
  position:sticky;
  top:0;
  z-index:10;

  background:var(--surface);
  border-bottom:1px solid var(--line);

  box-shadow:0 4px 18px rgb(0 0 0 / .03);
}

.header-inner {
  min-height:76px;

  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;

  gap:32px;
}

.brand {
  display:inline-flex;
  align-items:center;

  gap:11px;

  width:fit-content;

  color:var(--text);
  text-decoration:none;
}

.brand-mark {
  width:32px;
  height:32px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--accent);

  color:var(--accent);

  font-family:"Times New Roman",serif;
  font-size:23px;
}

.brand-name {
  font-size:14px;
  font-weight:600;
}

.nav {
  display:flex;
  gap:8px;
}

.nav a {
  padding:8px 12px;

  color:var(--muted);
  text-decoration:none;

  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  font-weight:500;

  transition:.16s ease;
}

.nav a:hover {
  color:var(--text);
}

.nav a.active {
  color:var(--accent);
  background:var(--surface-active);
}

.theme-toggle {
  width:34px;
  height:34px;

  border:0;
  background:none;

  color:var(--text);

  cursor:pointer;
}


/* HERO */

.hero {
  border-bottom:1px solid var(--line);
}

.hero-inner {
  min-height:520px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  padding:82px 0;
}

.hero h1 {
  max-width:850px;

  margin:0;

  font-size:clamp(46px,5vw,64px);
  font-weight:500;

  letter-spacing:-.045em;
  line-height:1.03;
}

.hero p {
  max-width:620px;

  margin:30px 0 34px;

  color:var(--muted);

  font-size:18px;
}


/* BUTTON */

.button {
  display:inline-block;

  padding:14px 22px;

  border:1px solid var(--text);

  color:var(--text);
  background:transparent;

  text-decoration:none;

  font-size:14px;
  font-weight:600;

  transition:.16s ease;
}

.button:hover {
  background:var(--text);
  color:var(--bg);
}

.button-large {
  padding:15px 25px;

  font-size:15px;
}


/* SECTIONS */

.section {
  padding:106px 0;

  border-bottom:1px solid var(--line);
}

.section-label {
  display:block;

  margin-bottom:18px;

  color:var(--accent);

  font-family:"IBM Plex Mono",monospace;
  font-size:17px;
  font-weight:500;

  letter-spacing:.08em;
  text-transform:uppercase;
}

.section h2 {
  margin:0;

  font-size:clamp(40px,4vw,54px);
  font-weight:500;

  letter-spacing:-.04em;
  line-height:1.08;
}


/* SERVICES */

.services-heading {
  margin-bottom:54px;
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:24px;
}

.service-card {
  min-height:270px;

  display:flex;
  flex-direction:column;

  padding:30px;

  border:1px solid var(--line);

  background:var(--surface);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.service-card:hover {
  transform:translateY(-3px);

  border-color:var(--accent);

  box-shadow:0 12px 30px rgb(0 0 0 / .05);
}

.service-number {
  margin-bottom:56px;

  color:var(--accent);

  font-family:"IBM Plex Mono",monospace;
  font-size:13px;
  font-weight:500;
}

.service-card h3 {
  margin:0 0 14px;

  font-size:18px;
  font-weight:600;
}

.service-card p {
  margin:0;

  color:var(--muted);

  font-size:16px;
}


/* ABOUT */

.about-layout {
  max-width:850px;

  margin-left:auto;
  margin-right:max(28px, calc((100vw - var(--width)) / 2));

  text-align:right;
}

.about-layout h2 {
  margin-bottom:58px;
}

.about-block {
  margin-top:46px;
}

.about-block:first-of-type {
  margin-top:0;
}

.about-block h3 {
  margin:0 0 14px;

  font-size:18px;
  font-weight:600;
}

.about-block p {
  max-width:760px;

  margin:0 0 0 auto;

  color:var(--muted);

  font-size:18px;
  line-height:1.7;
}


/* CONTACT */

.contact-inner {
  max-width:780px;

  text-align:center;
}

.contact h2 {
  margin-bottom:28px;
}

.contact p {
  max-width:650px;

  margin:0 auto 34px;

  color:var(--muted);

  font-size:19px;
  line-height:1.65;
}


/* FOOTER */

footer {
  padding:32px 0 40px;
}

.footer-inner {
  text-align:center;

  color:var(--muted);

  font-size:12px;
}


/* MOBILE */

@media (max-width:860px) {

  .container {
    width:min(calc(100% - 32px),var(--width));
  }

  .header-inner {
    grid-template-columns:1fr auto;
  }

  .nav {
    display:none;
  }

  .hero-inner {
    min-height:470px;
    padding:70px 0;
  }

  .hero h1 {
    font-size:clamp(42px,12vw,56px);
  }

  .section {
    padding:76px 0;
  }

  .services-grid {
    grid-template-columns:1fr;
  }

  .service-card {
    min-height:0;
  }

  .service-number {
    margin-bottom:30px;
  }

  .about-layout {
    margin-inline:auto;

    text-align:left;
  }

  .about-block p {
    margin-left:0;
  }

  .section-label {
    font-size:15px;
  }
}

/* =========================================================
   LAYOUT REFINEMENT
   ========================================================= */

/* About: align with the rest of the page */

.about-layout {
  max-width:850px;
  margin-left:0;
  margin-right:auto;
  text-align:left;
}

.about-layout h2 {
  margin-bottom:54px;
}

.about-block p {
  max-width:760px;
  margin-left:0;
  margin-right:auto;
  text-align:left;
  text-wrap:pretty;
}


/* Contact: left aligned like the hero */

.contact-inner {
  max-width:760px;
  margin-left:0;
  margin-right:auto;
  text-align:left;
}

.contact h2 {
  margin-bottom:26px;
}

.contact p {
  max-width:650px;
  margin:0 0 34px;
  text-align:left;
  text-wrap:pretty;
}


/* Keep long copy from breaking awkwardly */

.hero p,
.about-block p,
.contact p,
.service-card p {
  overflow-wrap:break-word;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:980px) {

  .services-grid {
    grid-template-columns:1fr;
  }

  .service-card {
    min-height:0;
  }

  .service-number {
    margin-bottom:28px;
  }
}


@media (max-width:860px) {

  .container {
    width:min(calc(100% - 32px),var(--width));
  }

  /* Keep navigation visible */

  .header-inner {
    grid-template-columns:1fr auto;
    gap:12px 20px;
    padding-top:10px;
  }

  .brand {
    min-width:0;
  }

  .brand-name {
    font-size:13px;
  }

  .theme-toggle {
    justify-self:end;
  }

  .nav {
    grid-column:1 / -1;

    display:flex;
    justify-content:flex-start;

    width:100%;

    gap:6px;

    padding-bottom:10px;
  }

  .nav a {
    padding:7px 10px;
    font-size:12px;
  }

  html {
    scroll-padding-top:125px;
  }


  /* Hero */

  .hero-inner {
    min-height:auto;
    padding:72px 0;
  }

  .hero h1 {
    max-width:650px;
    font-size:clamp(40px,10vw,54px);
    line-height:1.04;
  }

  .hero p {
    font-size:17px;
  }


  /* Sections */

  .section {
    padding:72px 0;
  }

  .section h2 {
    font-size:clamp(36px,9vw,48px);
  }

  .section-label {
    font-size:15px;
  }

  .about-layout,
  .contact-inner {
    max-width:none;
  }

  .about-block {
    margin-top:38px;
  }

  .about-block p,
  .contact p {
    font-size:17px;
  }


  /* CTA */

  .button,
  .button-large {
    font-size:14px;
    padding:14px 20px;
  }
}


@media (max-width:520px) {

  .container {
    width:calc(100% - 28px);
  }

  .header-inner {
    padding-top:8px;
  }

  .brand-mark {
    width:29px;
    height:29px;
    font-size:21px;
  }

  .brand-name {
    font-size:12px;
  }

  .nav {
    justify-content:space-between;
    gap:0;
  }

  .nav a {
    padding:7px 8px;
  }

  .hero-inner {
    padding:60px 0;
  }

  .hero h1 {
    font-size:clamp(38px,11vw,48px);
  }

  .section {
    padding:60px 0;
  }

  .services-heading {
    margin-bottom:38px;
  }

  .service-card {
    padding:24px;
  }

  .button-large {
    width:100%;
    text-align:center;
  }

  .footer-inner {
    line-height:1.6;
  }
}


/* KISS alignment correction */

.about-layout,
.contact-inner {
  width:min(calc(100% - 56px),850px);
  margin-inline:auto;
  text-align:left;
}

.about-block p,
.contact p {
  margin-left:0;
  margin-right:0;
  text-align:left;
}

@media (max-width:860px) {
  .about-layout,
  .contact-inner {
    width:calc(100% - 32px);
  }
}


/* Final layout rhythm */

/* SERVICES: heading right, cards unchanged */

.services-heading {
  width:100%;
  margin-bottom:54px;
  text-align:right;
}

.services-heading h2 {
  margin-left:auto;
}


/* ABOUT + CONTACT: use full site grid */

.about-layout,
.contact-inner {
  width:min(calc(100% - 56px),var(--width));
  max-width:none;
  margin-inline:auto;
  text-align:left;
}

.about-layout h2,
.contact-inner h2 {
  max-width:none;
}


/* Keep prose readable without shrinking the section itself */

.about-block p {
  max-width:900px;
  margin-left:0;
}

.contact p {
  max-width:760px;
  margin-left:0;
}


/* Let sections breathe consistently */

.about-block {
  margin-top:44px;
}

.contact-inner {
  padding-right:15%;
}


/* Responsive */

@media (max-width:860px) {

  .about-layout,
  .contact-inner {
    width:calc(100% - 32px);
  }

  .services-heading {
    text-align:left;
  }

  .contact-inner {
    padding-right:0;
  }

  .about-block p,
  .contact p {
    max-width:none;
  }
}

@media (max-width:600px) {

  .about-layout,
  .contact-inner {
    width:calc(100% - 28px);
  }

  .about-block {
    margin-top:34px;
  }

  .about-block p,
  .contact p {
    font-size:16px;
    line-height:1.65;
  }
}


/* Final alignment standardization */

.services-heading {
  width:100%;
  margin-bottom:54px;
  text-align:left;
}

.services-heading h2 {
  margin-left:0;
}


/* Alignment lock */

.services-heading {
  width:100%;
  margin-bottom:54px;
  text-align:left;
}

.services-heading h2 {
  margin-left:0;
  margin-right:0;
}