/* Web by Hand — landing page design system.
   Paper field, forest green as the single accent, Fraunces display + Schibsted Grotesk UI
   (kept as brand tokens: preserve mode). One primary action down the page.

   Rebuilt 2026-09-12 to the studio's second target comp: sticky cream header with the
   hand-drawn monogram mark, a forest pill action and an always-visible menu button; a hero
   whose photograph bleeds off the right edge of the viewport; a statement band whose three
   columns carry the circled line-art icon beside the title with short hairline dividers
   between columns; two split bands (photograph left, panel right) for the sample
   transformation and the three-step process; a forest closing band with the inquiry card;
   and a forest footer behind a single hairline.

   Sections: header · hero · three-question features · sample transformation (forest split
   + stacked phone viewer) · process (photo + paper split) · contact · footer. */

@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/fraunces-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk-normal.woff2") format("woff2");
}

/* ---------- tokens ---------- */
.page {
  --paper: #f7f3ec;
  --sheet: #fffdf8;
  --ink: #132a22;
  --green: #0e3b2e;
  --green-deep: #082620;
  --sage: #a8d5ba;
  --sage-soft: #cfe6d8;
  --sage-dim: #6f9484;      /* step numerals on light paper: pale, but 3:1 on the sheet */
  --label: #4a7360;
  --muted: #4a5a54;
  --line: #e2d9c8;
  --line-strong: rgba(14, 59, 46, .32);
  --pad: clamp(20px, 4.5vw, 40px);
  --shell: 1240px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", Arial, sans-serif;
  --ease: cubic-bezier(.22, .68, .18, 1);
}

/* ---------- scaffolding ---------- */
html { height: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  min-height: 100svh;
  margin: 0;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.page {
  min-height: 100vh;
  overflow: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
.page *, .page *::before, .page *::after { box-sizing: border-box; }
.page :is(h1, h2, h3, h4, p, figure, figcaption, ol, ul) { margin: 0; }
.page :is(p, li) { text-wrap: pretty; }
.page :is(ol, ul) { list-style: none; padding: 0; }
.page a { color: inherit; text-decoration: none; }
.page img, .page svg { display: block; max-width: 100%; }
.page :is(a, button, input, textarea):focus-visible { outline: 3px solid #c2691f; outline-offset: 3px; }
.page :is(#work, #services, #process, #inquiry, #teardown, #inquiry-form) { scroll-margin-top: 104px; }

.shell { width: min(var(--shell), calc(100% - (var(--pad) * 2))); margin-inline: auto; }
.arrow { display: inline-block; transition: transform .22s var(--ease); }
:is(.btn, .link-arrow, .inquiry__action button):hover .arrow { transform: translateX(3px); }

/* icon sprite host: present in the DOM for <use>, never painted */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.skip-link {
  position: fixed; z-index: 100; top: 8px; left: 8px;
  padding: 12px 16px; background: var(--green); color: #fff !important;
  border-radius: 8px; transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

/* ---------- shared type ---------- */
.eyebrow {
  color: var(--label);
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow--light { color: var(--sage); }

h1, h2, h3, .mock-h { font-family: var(--serif); font-weight: 560; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.04; padding-bottom: .08em; }
h2 em { font-weight: 450; font-style: italic; }

/* the comp's short rule, under the headline in both split bands */
.rule { width: 64px; height: 2px; border: 0; margin: 26px 0 0; background: currentColor; opacity: .3; }
.split--forest .rule { background: #fff; opacity: .55; }

.lede { max-width: 600px; margin-top: 26px; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 10px;
  padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--green); color: #fff !important;
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(14, 59, 46, .75); }
.btn:active { transform: scale(.98); }
.btn--sm { min-height: 46px; padding: 0 22px; font-size: 13px; }
.btn--light { background: #fff; color: var(--green) !important; box-shadow: 0 16px 32px -20px rgba(2, 20, 15, .8); }
.btn--light:hover { background: var(--sage-soft); color: var(--green-deep) !important; }

.link-arrow {
  display: inline-flex; min-height: 44px; align-items: center; gap: 8px;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  font-size: 14px; font-weight: 600;
  transition: color .18s var(--ease);
}
.link-arrow:hover { color: var(--green); }

/* ---------- header (sticky; the menu button is always present, as in the comp) ---------- */
.site-header {
  position: sticky; z-index: 30; top: 0;
  width: 100%;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: blur(10px);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header__inner {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 32px);
  min-height: 86px;
  transition: min-height .25s var(--ease);
}
.site-header[data-scrolled] {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  box-shadow: 0 1px 0 0 var(--line-strong), 0 16px 34px -30px rgba(8, 43, 34, .65);
}
.site-header[data-scrolled] .site-header__inner { min-height: 70px; }

.brand { display: inline-flex; flex: none; align-items: center; gap: 12px; transition: opacity .18s var(--ease); }
.brand:hover { opacity: .74; }
.brand__mark {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  box-shadow: 0 8px 18px -12px rgba(8, 43, 34, .7);
  transition: transform .24s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-3deg) scale(1.04); }
.brand__text {
  display: grid;
  font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: .98; letter-spacing: -.02em;
}
.brand__text small { margin-top: 5px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .01em; color: var(--muted); }

/* the action + menu button sit together on the right, as in the comp */
.site-header__actions {
  display: flex; flex: none; align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  margin-left: auto;
}
.site-header__cta { flex: none; }

.nav-toggle {
  display: inline-flex; flex: none;
  width: 46px; height: 46px; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  color: var(--green); cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.nav-toggle:hover { background: color-mix(in srgb, var(--green) 8%, transparent); border-color: var(--green); }
.nav-toggle__bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle__bars i {
  display: block; height: 1.6px; background: currentColor; border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* the panel drops from the header at every width, so the comp's header shape holds
   on desktop and the same control already works on touch */
.site-nav {
  position: absolute; z-index: 2; top: 100%;
  right: max(var(--pad), calc((100% - var(--shell)) / 2));
  display: grid; gap: 2px;
  min-width: min(260px, calc(100vw - (var(--pad) * 2)));
  margin: 10px 0 0; padding: 8px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 60px -34px rgba(8, 43, 34, .72);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.site-nav a {
  position: relative; display: flex; min-height: 46px; align-items: center;
  border-radius: 10px; padding: 0 14px;
  font-size: 14px; font-weight: 500;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.site-nav a:hover { background: color-mix(in srgb, var(--green) 7%, transparent); color: var(--green); }
.site-nav .nav-cta { display: none; }

/* ---------- hero (copy left; the photograph bleeds off the right edge) ---------- */
.hero { background: var(--paper); border-bottom: 1px solid var(--line); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center; gap: 0;
  /* the copy column keeps the shell's left edge while the media column runs to the viewport */
  padding-left: max(var(--pad), calc((100% - var(--shell)) / 2));
}
.hero__copy {
  max-width: 660px;
  padding-block: clamp(46px, 6vw, 96px);
  padding-right: clamp(26px, 3.6vw, 68px);
}
.hero h1 {
  margin-top: 20px;
  font-size: clamp(40px, 5.2vw, 66px); line-height: 1; padding-bottom: .09em;
}
.hero h1 em { color: var(--green); font-style: italic; font-weight: 450; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; margin-top: 34px; }
.hero__mail { display: flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--muted); font-size: 14px; }
.hero__mail .icon { width: 20px; height: 20px; color: var(--green); }
.hero__mail a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; border-bottom: 1px solid transparent; transition: color .18s var(--ease), border-color .18s var(--ease); }
.hero__mail a:hover { color: var(--green); border-bottom-color: currentColor; }

.hero__visual {
  position: relative; margin: 0; overflow: hidden;
  align-self: stretch; min-width: 0;
  min-height: clamp(340px, 44vw, 620px);
  background: linear-gradient(150deg, #efe9dc 0%, #ded6c5 100%);
}
.hero__visual picture { display: block; height: 100%; }
.hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; transition: transform 1.1s var(--ease); }
/* only lift on devices that actually hover, so touch never gets a sticky state */
@media (hover: hover) and (pointer: fine) {
  .hero__visual:hover img { transform: scale(1.03); }
}

/* functional note below the hero copy, never overlaid on the photograph */
.note {
  color: var(--muted);
  font-family: var(--serif); font-size: 13px; font-style: italic;
}
.hero__note { max-width: 360px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 14px; }

/* ---------- statement band + three features ---------- */
.band { padding-block: clamp(58px, 7vw, 108px); }
.band .shell > .eyebrow { margin-bottom: clamp(16px, 2vw, 26px); }
.band__head {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(24px, 4vw, 68px); align-items: end;
}
.band__head h2 { max-width: 640px; }
.band__head h2 em { color: var(--green); }
.band__head > p { max-width: 430px; color: var(--muted); font-size: 17px; line-height: 1.6; }

.features {
  /* one gutter value shared by the row and its dividers, so the rules sit at equal
     distance from the text on both sides and the outer columns still line up with the
     heading above (the negative margin is always smaller than the page padding, so it
     can never push the row past the viewport) */
  --feature-pad: clamp(16px, 2.4vw, 36px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(40px, 5vw, 74px) calc(-1 * var(--feature-pad)) 0;
}
.feature {
  position: relative; padding-inline: var(--feature-pad);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 16px; align-content: start;
}
/* the comp's divider is a short segment level with the icon, not a full-height rule */
.feature + .feature::before {
  position: absolute; left: 0; top: 4px; width: 1px; height: 68px;
  background: var(--line); content: "";
}
.feature__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--green);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.feature:hover .feature__icon { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-3px); }
.feature h3 { align-self: center; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.1; padding-bottom: .06em; }
/* description sits under the title, not under the icon */
.feature p { grid-column: 2; margin-top: 9px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* ---------- split bands (photograph left, panel right) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
.split__media { margin: 0; overflow: hidden; background: var(--green-deep); min-height: clamp(300px, 38vw, 560px); }
.split__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.split__panel {
  display: grid; align-content: center; justify-items: start;
  padding: clamp(46px, 6vw, 96px) clamp(24px, 5.5vw, 92px);
}
.split__panel > * { max-width: 560px; }
.split__panel > .eyebrow { margin-bottom: clamp(12px, 1.5vw, 18px); }
.split__panel h2 em { color: var(--green); }
.split__body { margin-top: 22px; color: var(--muted); font-size: 17px; line-height: 1.62; }
.illustrative {
  margin-top: 20px; color: var(--muted);
  font-family: var(--serif); font-size: 13px; font-style: italic;
}

.split--forest { background: var(--green); color: #fff; }
.split--forest .split__media { background: #06241c; }
/* the quiet right-hand wall stays beside the words when the wide plate is cropped */
.split--forest .split__media img { object-position: 64% 50%; }
.split--forest h2 { color: #fff; }
.split--forest h2 em { color: var(--sage); }
.split--forest .split__body { color: rgba(255, 255, 255, .84); }
.split--forest .illustrative { color: rgba(255, 255, 255, .82); margin-top: 26px; }

.split--paper { background: var(--paper); border-top: 1px solid var(--line); }
.split--paper .split__media img { object-position: 50% 30%; }

/* ---------- sample transformation viewer ---------- */
.compare-wrap { padding-block: clamp(46px, 6vw, 92px); }
/* paired cards: equal height, captions on a shared baseline (subgrid; degrades
   to the calm stacked default where subgrid is unavailable) */
.compare {
  display: grid; grid-template-columns: repeat(2, minmax(0, 340px));
  gap: clamp(24px, 3vw, 48px); justify-content: center; align-items: stretch;
}
.compare__item { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 16px; }
.compare__item figcaption { display: grid; gap: 7px; justify-items: center; text-align: center; align-content: start; }
.compare__item figcaption b { color: var(--green); font-family: var(--serif); font-size: 18px; font-weight: 550; }
.compare__item figcaption span { color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }

/* browser chrome, shared by both phone mockups */
.chrome {
  display: flex; flex: none; align-items: center; gap: .8em;
  border-bottom: 1px solid var(--line); padding: .75em .95em;
  background: #f2efe8;
}
.chrome__dots { display: flex; gap: .42em; flex: none; }
.chrome__dots i { display: block; width: .5em; height: .5em; border-radius: 50%; background: rgba(14, 59, 46, .26); }
.chrome__url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .42em 1em;
  color: #6b7a72; font-size: .86em; text-align: center;
}

.phone {
  justify-self: center; font-size: 13px;
  display: flex; flex-direction: column;
  width: min(330px, 100%); overflow: hidden;
  border: 1px solid rgba(14, 59, 46, .3); border-radius: 28px;
  background: var(--sheet);
  box-shadow: 0 30px 54px -30px rgba(8, 43, 34, .5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.compare__item:hover .phone { transform: translateY(-5px); box-shadow: 0 36px 62px -28px rgba(8, 43, 34, .55); }
.phone__nav {
  display: flex; flex: none; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line); padding: 13px 16px;
  color: #4f605a; font-size: 10px;
}
.phone__burger { display: grid; gap: 3px; flex: none; }
.phone__burger i { display: block; width: 14px; height: 1px; background: currentColor; }
.phone__links { letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone__body { flex: 1; min-height: 328px; padding: 22px 18px 24px; }
.phone--after .phone__body { display: flex; flex-direction: column; }

.phone--before .phone__body { display: grid; align-content: start; gap: 14px; }
.phone__box {
  border: 1px dashed rgba(14, 59, 46, .3); border-radius: 4px; padding: 8px;
  color: #857f74; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-align: center;
}
.phone__img {
  height: 118px; border-radius: 4px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14, 59, 46, .04), rgba(14, 59, 46, .1)),
    repeating-linear-gradient(135deg, #eae7de 0 7px, #e1ddd2 7px 14px);
}
.phone__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(.72) contrast(.94); }
.phone--before .mock-h { color: #4a4a45; font-size: 26px; line-height: 1.02; }
.phone--before p { color: #5f5f57; font-size: 12.5px; line-height: 1.5; }
.phone--before .ghost-btn {
  justify-self: start; margin-top: 4px;
  border: 1px solid #b0b0a4; border-radius: 6px; padding: 10px 15px;
  color: #5f5f57; font-size: 11px; font-weight: 600;
}

.phone--after { border-color: rgba(14, 59, 46, .45); background: linear-gradient(180deg, rgba(168, 213, 186, .14), rgba(168, 213, 186, .03) 40%), var(--sheet); }
.phone__kicker { color: var(--label); font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.phone--after .mock-h { margin-top: 10px; font-size: 31px; line-height: .95; }
.phone--after .mock-h em { color: var(--green); font-style: italic; font-weight: 450; }
.phone--after p { margin-top: 12px; color: #3b4a43; font-size: 12.5px; line-height: 1.5; }
/* mock label inside the sample: a span, never a button, single forest accent */
.phone__cta {
  display: inline-flex; justify-self: start; align-items: center; gap: 6px; margin-top: 16px;
  border-radius: 7px; padding: 12px 15px; background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700;
}
.phone__proof { display: grid; gap: 9px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; color: #3f4f48; font-size: 10.5px; font-weight: 600; }
.phone__proof span { display: flex; align-items: center; gap: 7px; }
.phone__proof svg { width: 13px; height: 13px; flex: none; fill: var(--green); color: var(--green); opacity: .78; }
.phone__foot { margin-top: auto; padding-top: 14px; color: #5f6f67; font-size: 10px; }

/* ---------- process steps (inside the split panel) ----------
   the comp separates the rows with whitespace and a small sans numeral column,
   not with rules, and keeps the numeral level with the title's first line */
.steps { width: 100%; margin-top: clamp(26px, 3.2vw, 44px); }
.steps li {
  display: grid; grid-template-columns: clamp(34px, 3.4vw, 46px) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 22px); align-items: start;
  padding-block: clamp(14px, 1.8vw, 22px);
}
.steps li:first-child { padding-top: 0; }
.steps li:last-child { padding-bottom: 0; }
.steps__num {
  display: block; padding-top: .34em;
  color: var(--sage-dim);
  font-family: var(--sans); font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; letter-spacing: .1em;
}
.steps h3 { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.1; padding-bottom: .06em; }
.steps p { max-width: 460px; margin-top: 8px; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* ---------- contact band ---------- */
.contact { background: var(--green); color: #fff; }
.contact__grid {
  display: grid; grid-template-columns: .94fr 1.06fr;
  gap: clamp(34px, 5vw, 78px); align-items: stretch;
  padding-block: clamp(58px, 7.5vw, 108px);
}
/* copy column stretches so the framed photo can settle level with the form card */
.contact__copy { display: flex; flex-direction: column; }
.contact__copy > .eyebrow { margin-bottom: clamp(12px, 1.5vw, 18px); }
.contact h2 { color: #fff; }
.contact__lede { max-width: 470px; margin-top: 18px; color: rgba(255, 255, 255, .9); font-size: clamp(18px, 1.7vw, 22px); line-height: 1.45; }
.contact__lede em { color: var(--sage); font-family: var(--serif); font-style: italic; }
.contact__copy > p:not(.contact__lede):not(.contact__note):not(.contact__mail) { max-width: 470px; margin-top: 22px; color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.6; }
.contact__mail { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #fff; font-size: 14px; }
.contact__mail .icon { width: 20px; height: 20px; color: var(--sage); }
.contact__mail a { border-bottom: 1px solid transparent; transition: border-color .18s var(--ease), color .18s var(--ease); }
.contact__mail a:hover { color: var(--sage); border-bottom-color: currentColor; }
.contact__action { display: grid; gap: 18px; justify-items: start; margin-top: auto; padding-top: clamp(26px, 3.4vw, 44px); }
.contact__note { justify-self: stretch; max-width: 400px; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 16px; color: rgba(255, 255, 255, .76); font-size: 13px; line-height: 1.55; }
.brand-mug {
  margin: 0; width: min(224px, 62%);
  overflow: hidden; border-radius: 10px;
  border: 6px solid #fff;
  transform: rotate(-2deg);
  box-shadow: 0 34px 54px -26px rgba(0, 0, 0, .82);
  transition: transform .45s var(--ease);
}
.brand-mug:hover { transform: rotate(-1deg) translateY(-5px); }
.brand-mug img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease); }
.brand-mug:hover img { transform: scale(1.04); }

.inquiry {
  border: 1px solid rgba(14, 59, 46, .32); border-radius: 24px;
  padding: clamp(20px, 2.6vw, 32px); background: var(--sheet);
  color: var(--ink); box-shadow: 0 34px 60px -30px rgba(2, 20, 15, .7);
}
.inquiry__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inquiry__note { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.inquiry__form label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }
.inquiry__form label > span { display: grid; gap: 2px; }
.inquiry__hint { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 500; }
.inquiry__form input, .inquiry__form textarea {
  width: 100%; min-height: 48px;
  border: 1px solid rgba(14, 59, 46, .24); border-radius: 9px;
  background: #fff; padding: 11px 13px;
  color: var(--ink); font-family: var(--sans); font-size: 16px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.inquiry__form input::placeholder, .inquiry__form textarea::placeholder { color: #5f6f66; }
.inquiry__form :is(input, textarea):hover { border-color: rgba(14, 59, 46, .4); }
.inquiry__form :is(input, textarea):focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(168, 213, 186, .5); outline: none; }
.inquiry__form textarea { min-height: 104px; resize: vertical; }
.inquiry__form :is(input, textarea)[aria-invalid="true"] { border-color: #a8323a; box-shadow: 0 0 0 1px #a8323a; }
.inquiry__form label small { color: #a8323a; font-size: 11px; font-weight: 600; }
.inquiry__wide, .inquiry__action { grid-column: 1 / -1; }
.inquiry__action { display: grid; gap: 13px; }
.inquiry__action small { color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.inquiry__action button {
  display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px;
  border: 0; border-radius: 999px; padding: 0 22px;
  background: var(--green); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.inquiry__action button:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(14, 59, 46, .8); }
.inquiry__action button:active { transform: scale(.98); }
.inquiry__action a { text-decoration: underline; text-underline-offset: 3px; }
.inquiry__action a:hover { color: var(--green); }

/* ---------- footer (forest continuation of the close, behind one hairline) ---------- */
.site-footer { background: var(--green); color: rgba(255, 255, 255, .82); border-top: 1px solid rgba(255, 255, 255, .22); }
.site-footer__grid {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  padding-block: 34px;
}
.site-footer__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.site-footer__brand .brand__mark { width: 36px; height: 36px; border-radius: 10px; }
.site-footer__brand:hover .brand__mark { transform: rotate(-3deg) scale(1.04); }
.site-footer p { margin-top: 8px; color: rgba(255, 255, 255, .72); font-size: 13px; }
.site-footer small { display: block; margin-top: 7px; color: rgba(255, 255, 255, .64); font-size: 12px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 13px; }
.site-footer nav a { display: inline-flex; min-height: 44px; align-items: center; color: #fff; transition: color .18s var(--ease); }
.site-footer :is(nav a, small a):hover { color: var(--sage); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- scroll reveal ---------- */
html.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
  will-change: opacity, transform;
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .band__head { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .band__head > p { max-width: 620px; }
  .contact__grid { grid-template-columns: 1fr; align-items: start; }
  .split__media { min-height: clamp(280px, 34vw, 460px); }
}

/* the hero stacks: copy first, then the photograph, still edge to edge */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; padding-left: 0; }
  .hero__copy { max-width: 720px; padding-inline: var(--pad); padding-bottom: clamp(34px, 5vw, 52px); }
  .hero__visual { min-height: 0; aspect-ratio: 16 / 10; }
}

/* the first narrower width where the panel needs the full row it drops into */
@media (max-width: 560px) {
  .site-nav { left: var(--pad); right: var(--pad); min-width: 0; }
}

@media (max-width: 1080px) {
  .features { grid-template-columns: 1fr; margin: clamp(32px, 6vw, 48px) 0 0; }
  .feature { padding-inline: 0; padding-block: clamp(20px, 4vw, 28px); }
  .feature:first-child { padding-top: 0; }
  .feature:last-child { padding-bottom: 0; }
  /* a short segment has nothing to sit beside once the columns stack */
  .feature + .feature::before { top: 0; left: 0; right: 0; width: auto; height: 1px; }
  .feature__icon { width: 48px; height: 48px; }
  .feature p { max-width: 62ch; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__media { min-height: 0; aspect-ratio: 16 / 11; }
  .split--paper .split__media { aspect-ratio: 4 / 3; }
  .split__panel { padding-block: clamp(40px, 7vw, 64px); }
  .split__panel > * { max-width: none; }
  .split--forest .split__media img { object-position: 62% 44%; }
}

@media (max-width: 650px) {
  .page { --pad: 16px; }
  .site-header__inner { min-height: 70px; gap: 10px; }
  .brand { gap: 10px; }
  .brand__mark { width: 34px; height: 34px; border-radius: 9px; }
  .brand__text { font-size: 19px; }
  .brand__text small { font-size: 9px; margin-top: 4px; }
  .site-header__cta { padding-inline: 15px; font-size: 11.5px; white-space: nowrap; }
  .nav-toggle { width: 44px; height: 44px; }
  .hero h1 { font-size: clamp(38px, 11.5vw, 56px); }
  .lede { font-size: 16px; margin-top: 20px; }
  .actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 26px; }
  .actions .btn { width: 100%; justify-content: center; }
  .actions .link-arrow { align-self: flex-start; }
  .hero__mail { margin-top: 18px; }
  .band { padding-block: 52px; }
  .brand-mug { width: min(196px, 58%); transform: none; }
  .chrome__url { font-size: 8.5px; }
  .compare { grid-template-columns: minmax(0, 340px); gap: 40px; }
  .compare-wrap { padding-block: 46px; }
  .split__media { aspect-ratio: 4 / 3; }
  .steps li { grid-template-columns: 1fr; gap: 6px; }
  .steps__num { padding-top: 0; }
  .inquiry__form { grid-template-columns: 1fr; }
  .contact__grid { padding-block: 54px 62px; }
  .site-footer__grid { padding-block: 28px 40px; }
}

/* the header action stays reachable but stops crowding the mark on very small phones */
@media (max-width: 440px) {
  .site-header__inner { gap: 8px; }
  .brand { gap: 8px; }
  .brand__mark { width: 32px; height: 32px; border-radius: 8px; }
  .brand__text { font-size: 17px; }
  .brand__text small { font-size: 8.5px; }
  .site-header__cta { padding-inline: 12px; font-size: 10.5px; }
  .site-header__cta .arrow { display: none; }
  .nav-toggle { width: 44px; height: 44px; }
  .nav-toggle__bars { width: 16px; }
}

/* below this the mark + action + menu stop fitting on one row: the action moves
   into the menu panel, where every destination already lives */
@media (max-width: 370px) {
  .site-header__cta { display: none; }
  .site-nav .nav-cta {
    display: inline-flex; justify-self: start;
    min-height: 46px; margin-top: 10px; padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .page * { transition: none !important; animation: none !important; }
  .btn:hover, .inquiry__action button:hover { transform: none; }
  .compare__item:hover .phone { transform: none; }
  .brand-mug:hover img { transform: none; }
  .brand-mug:hover { transform: rotate(-2deg); }
  .hero__visual:hover img { transform: none; }
  .feature:hover .feature__icon { transform: none; }
  .site-nav { transition: none !important; }
}