/* Trade-grounded visual refinement layered over the original Handco design. */
:root {
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --brand: 'Space Grotesk', Arial, sans-serif;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .018) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 68%, rgba(255, 255, 255, .012) 0 1px, transparent 1.5px);
  background-size: 17px 17px, 23px 23px;
}

.logo,
.mark,
.footer-word {
  font-family: var(--brand);
}

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(4.7rem, 9.2vw, 8.6rem);
  line-height: .86;
  letter-spacing: -.025em;
  margin: 32px 0 46px;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(3rem, 4.7vw, 4.5rem);
  line-height: .95;
  letter-spacing: -.02em;
}

.example-intro h3 {
  font: 700 3rem/1 var(--display);
  letter-spacing: -.02em;
}

.service-row h3 {
  font: 700 1.7rem/1.1 var(--display);
  letter-spacing: -.015em;
}

.process h3 {
  font: 700 2rem/1 var(--display);
  letter-spacing: -.015em;
}

.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
  pointer-events: none;
}

.hero-art img {
  object-position: center 53%;
  filter: saturate(.82) contrast(1.04);
}

.workflow-example {
  background: #1b1e1b;
  color: var(--ink);
  border: 1px solid var(--line);
}

.example-intro .eyebrow,
.step-number {
  color: var(--lime);
}

.example-intro > p:not(.eyebrow) {
  color: var(--muted);
}

.example-label {
  color: var(--ink);
}

.flow li {
  background: #282c27;
  border-color: #3c4239;
}

.flow p {
  color: #b9c0b2;
}

.flow li.human {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--bg);
}

.flow .human p {
  color: #39421c;
}

.check {
  color: var(--bg);
}

.closing-grid h2 {
  font-size: clamp(3.4rem, 5.9vw, 5.6rem);
}

dialog h2 {
  font-size: 3.2rem;
}

.button-arrow {
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1700px) {
  .hero h1 { font-size: 9rem; }
}

@media (max-width: 1000px) {
  .example-intro h3 { font-size: 2.6rem; }
  .service-row h3 { font-size: 1.55rem; }
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(3.6rem, 15vw, 5.5rem);
    line-height: .88;
    letter-spacing: -.02em;
  }

  h2 { font-size: 3rem; }
  .example-intro h3 { font-size: 2.7rem; }
  .service-row h3 { font-size: 1.5rem; }
  .closing-grid h2 { font-size: 3.4rem; }
  dialog h2 { font-size: 2.8rem; }
}

/* Warm neutrals carry the page; navy restores the original section contrast. */
:root {
  --sand: #e5dcce;
  --sand-light: #f4efe7;
  --sand-mid: #cfc2b0;
  --navy: #20344b;
  --navy-deep: #192a3b;
  --charcoal: #292a29;
  --bg: var(--sand);
  --panel: var(--sand-light);
  --lime: var(--navy);
  --ink: var(--charcoal);
  --muted: #625f59;
  --line: #b9ad9e;
}

body { background: var(--sand); color: var(--charcoal); }

/* Low-contrast flecks and fibers give the warm surfaces a worn-paper feel. */
.intro-surface,
.approach:not(.difference),
.deliverables-surface,
.closing-surface {
  background-image:
    radial-gradient(circle, rgba(43, 38, 32, .028) .6px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 6px);
  background-size: 23px 23px, auto;
}

.masthead-surface,
.hero-surface,
.footer-surface { background: var(--navy-deep); color: #f1e9de; }
.masthead-surface .header { border-color: #65717c; }
.masthead-surface .mark { background: var(--sand); color: var(--navy-deep); }
.masthead-surface .logo-dot,
.footer-word span { color: var(--sand-mid); }
.masthead-surface nav a { color: #e2d9cd; }
.masthead-surface nav a:hover { color: #fff; }

.hero { display: flow-root; padding-bottom: 36px; }
.hero-copy > p.hero-summary {
  color: #e2d9cd;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.48;
  max-width: 460px;
  margin: 0 0 30px;
}
.hero-art .art-caption { font-size: .76rem; font-weight: 600; letter-spacing: .08em; }
.hero-top .eyebrow,
.hero h1 span { color: #dfcbb2; }
.hero .muted,
.hero .edition,
.hero .cta-note,
.hero .trade-strip > span { color: #c9c0b5; }
.hero .trade-strip { border-color: #65717c; }
.hero .trade-strip b { color: #a8a69f; }
.hero-art { background: #243b52; border-color: #65717c; }
.hero-art::after { box-shadow: inset 0 0 0 1px rgba(229, 220, 206, .08); }

.button { background: var(--navy); color: #f4efe7; }
.button:hover { background: #334e69; }
.masthead-surface .button,
.hero-surface .button { background: var(--sand); color: var(--navy-deep); }
.masthead-surface .button:hover,
.hero-surface .button:hover { background: #f4efe7; }
.button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.intro-surface { position: relative; z-index: 3; background-color: var(--sand); }
.intro-surface::before,
.approach:not(.difference)::before,
.intro-surface::after,
.approach:not(.difference)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -33px;
  height: 64px;
  pointer-events: none;
  -webkit-mask: url('torn-edge-mask.svg') center / 100% 100% no-repeat;
  mask: url('torn-edge-mask.svg') center / 100% 100% no-repeat;
}
.intro-surface::before,
.approach:not(.difference)::before {
  background: rgba(43, 38, 32, .16);
  filter: blur(4px);
  transform: translateY(3px);
}
.intro-surface::after,
.approach:not(.difference)::after {
  background-color: var(--tear-color);
  background-image: radial-gradient(circle, rgba(43, 38, 32, .04) .5px, transparent 1px);
  background-size: 17px 17px;
}
.intro-surface { --tear-color: var(--sand); }
.intro-surface .section-label,
.deliverables-surface .section-label { color: #625f59; }
.intro-grid > p,
.service-row p { color: #5c5953; }
.workflow-example { background: var(--navy); color: #f1e9de; border-color: #425870; }
.workflow-example .example-intro .eyebrow { color: #dfcbb2; }
.workflow-example .example-intro > p:not(.eyebrow) { color: #d0c7bb; }
.workflow-example .example-label { color: #e8ded1; }
.flow li { background: var(--sand-light); border-color: #d1c5b5; color: var(--charcoal); }
.flow .step-number { color: var(--navy); }
.flow h4 { color: var(--charcoal); }
.flow p { color: #5c5953; }
.flow li.human { background: var(--sand-mid); border-color: var(--sand-mid); color: var(--charcoal); }
.flow .human p { color: #504d49; }
.flow .check { color: var(--navy); }

.approach:not(.difference) { --tear-color: #cfc2b0; position: relative; z-index: 2; background-color: #cfc2b0; color: var(--charcoal); }
.approach:not(.difference) .section-label { color: #5b574f; }
.approach:not(.difference) .approach-heading h2 span,
.approach:not(.difference) .process article > span { color: var(--navy); }
.approach:not(.difference) .approach-heading p,
.approach:not(.difference) .process p { color: #4e4c49; }
.approach:not(.difference) .process article { border-color: #958878; }

.deliverables-surface { background-color: var(--sand-light); }
.deliverables .service-num { color: var(--navy); font-weight: 700; }
.deliverables .more-workflows > .eyebrow { color: #625f59; }
.deliverables .extra-services { color: var(--charcoal); }

.difference.approach { background: var(--navy); color: #f1e9de; }
.difference .section-label,
.difference .eyebrow { color: #c9c0b5; }
.difference .approach-heading h2 span,
.difference .difference-grid > div:last-child .eyebrow,
.difference .difference-grid > div:last-child li::before { color: #dfcbb2; }
.difference .approach-heading p { color: #d1c8bd; }
.difference .difference-grid > div { border-color: #788798; }
.difference .difference-grid li::before { color: #bec3c4; }

.closing-surface { background-color: var(--sand); }
.closing .eyebrow { color: var(--navy); }
.closing .booking-note { color: #625f59; }
.closing .contact a { border-color: #a69989; }
.closing .contact a:hover { color: var(--navy); }

.footer-surface footer { padding-top: 26px; }
.footer-top,
.footer-bottom { border-color: #65717c; color: #c9c0b5; }
.footer-top a:hover { color: #fff; }

dialog { background: var(--sand-light); color: var(--charcoal); border-color: #a99d8d; box-shadow: 0 30px 120px rgba(25, 42, 59, .3); }
dialog::backdrop { background: rgba(25, 42, 59, .65); }
dialog .close { color: var(--charcoal); }