/* ==========================================================================
   Northmere - theme-forge "lumex" theme
   Archetype kit: Advisory Grotesk (cool eucalyptus + slate, one warm amber).
   DNA: notched top-right-corner cards, amber circular arrow-pill controls,
   gray pill eyebrows + duotone word-split headings, amber circular-check lists
   on dashed dividers, strict two-tone band alternation, one dark photo CTA band.
   Fonts: Epilogue (display 700/800, tight tracking) + Public Sans (body).
   All color flows from :root role tokens. Zero external requests at runtime.
   ========================================================================== */

/* ---- self-hosted fonts (variable latin subset) ---- */
@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/epilogue-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
}

/* ---- tokens ---- */
:root {
  /* role palette (named hex) */
  --paper: #f4f7f7;      /* near-white band */
  --mist: #e6efee;       /* eucalyptus-mist base band */
  --ink: #232f34;        /* deep slate-teal ink */
  --muted: #5b666d;      /* muted steel (5.03:1 on mist per art-director gate) */
  --accent: #f0a63c;     /* single warm amber accent */
  --dark: #202a2f;       /* dark slate-teal (CTA bands + footer strip) */

  /* supports (all derived from the roles above) */
  --accent-deep: #e0912a;
  --accent-soft: #f7d9a6;
  --line: #c8d4d3;       /* dashed divider on mist */
  --line-soft: #d7e0df;
  --card-mist: #e6efee;  /* card fill when band is near-white */
  --card-paper: #f4f7f7; /* card fill when band is mist */
  --steel-2: #79858c;    /* lighter steel for disabled rows (lifted one step per gate note) */
  --on-dark: #eef3f3;    /* text on dark bands */
  --on-dark-muted: #9fb0b3;
  --pill-gray: #cdd8d7;  /* gray eyebrow pill */
  --pill-gray-ink: #4d585d;

  /* fonts */
  --font-display: "Epilogue", system-ui, -apple-system, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;

  /* type scale (heavy geometric grotesque feel; hero ~88px) */
  --fs-hero: clamp(2.9rem, 1.0rem + 6.9vw, 5.5rem);   /* 46-88 */
  --fs-h1:   clamp(2.3rem, 1.35rem + 3.4vw, 3.5rem);  /* 37-56 */
  --fs-h2:   clamp(1.85rem, 1.15rem + 2.5vw, 2.75rem);/* 30-44 */
  --fs-h3:   clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem); /* 19-23 */
  --fs-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.05rem);/* 16-17 */
  --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);/* 17-19 */
  --fs-small: 0.8rem;
  --fs-kicker: 0.72rem;
  --fs-price: clamp(2.8rem, 1.8rem + 3.6vw, 4rem);    /* pricing figure */

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* geometry */
  --notch: 30px;         /* card top-right clipped corner */
  --notch-sm: 22px;
  --r-pill: 999px;
  --r-sm: 6px;

  /* shadows (soft, cool) */
  --sh-1: 0 1px 2px rgba(32,42,47,.04), 0 6px 20px rgba(32,42,47,.05);
  --sh-2: 0 2px 8px rgba(32,42,47,.06), 0 22px 48px rgba(32,42,47,.09);
  --sh-accent: 0 10px 24px rgba(240,166,60,.32);

  /* motion */
  --t-fast: 160ms;
  --t-base: 280ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --wrap: 1300px;
}

/* ---- reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; margin: 0; letter-spacing: -0.03em; text-wrap: balance; color: var(--ink); }
h3 { line-height: 1.1; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--ink); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

/* ---- layout primitives ---- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.section { padding: var(--s9) 0; }
.section--tight { padding: var(--s8) 0; }
.section--mist { background: var(--mist); }
.section--paper { background: var(--paper); }
/* vertical two-tone band: mist left half, paper right half, edge to edge
   (reference signature: the intro column sits in its own colour field) */
.section--split2 { background: linear-gradient(90deg, var(--mist) 0 50%, var(--paper) 50% 100%); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

/* dark promo bands (photo CTA, questions strip, page head) keep white headings */
.photocta h1, .photocta h2, .qstrip h1, .qstrip h2, .pagehead h1, .pagehead h2 { color: #fff; }
.photocta .arrowlink, .qstrip .arrowlink, .pagehead .arrowlink { color: #fff; }

/* duotone word split */
.hl { color: var(--muted); }
.section--dark .hl, .photocta .hl, .qstrip .hl, .pagehead .hl { color: var(--on-dark-muted); }

/* gray pill eyebrow */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--pill-gray-ink);
  background: var(--pill-gray);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.section--dark .eyebrow { background: rgba(255,255,255,.14); color: #dbe4e4; }

.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.6; }
.section--dark .lead { color: var(--on-dark-muted); }

/* asymmetric section header: giant left heading + right tagline/link */
.sec-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end; margin-bottom: 60px; }
.sec-head h2 { font-size: var(--fs-h2); }
.sec-head__right { text-align: right; }
.sec-head__tag { color: var(--muted); font-size: var(--fs-lead); display: block; margin-bottom: 16px; }
.sec-head--center { display: block; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: 56px; }
.sec-head--center .lead { margin-top: 18px; }

/* ==========================================================================
   THE CONTROL SHAPE - arrow pills
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  padding: 9px 9px 9px 26px;
  border-radius: var(--r-pill);
  border: 0; cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn__ico {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.btn__ico svg { width: 16px; height: 16px; display: block; }

/* primary = solid amber pill, dark trailing circle w/ amber arrow */
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary .btn__ico { background: var(--ink); color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); box-shadow: var(--sh-accent); }
.btn--primary:hover .btn__ico { transform: translate(2px,2px); }

/* ghost = pale pill (mist), amber trailing circle w/ ink arrow */
.btn--ghost { background: var(--card-mist); color: var(--ink); }
.section--paper .btn--ghost { background: var(--mist); }
.section--mist .btn--ghost { background: var(--paper); }
.section--split2 .btn--ghost { background: var(--paper); }
/* a ghost pill sitting INSIDE a card must not inherit the card's own fill,
   or the pill shape disappears. Cards invert the band, so the pill inverts back. */
.section--paper .card .btn--ghost,
.section--paper .price .btn--ghost,
.section--paper .post .btn--ghost { background: var(--paper); }
.section--mist .card .btn--ghost,
.section--mist .price .btn--ghost,
.section--mist .post .btn--ghost { background: var(--mist); }
.btn--ghost .btn__ico { background: var(--accent); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ghost:hover .btn__ico { transform: translate(2px,2px); }

/* solid amber on dark bands */
.btn--solid { background: var(--accent); color: var(--ink); }
.btn--solid .btn__ico { background: var(--ink); color: var(--accent); }
.btn--solid:hover { background: var(--accent-deep); box-shadow: var(--sh-accent); }
.btn--solid:hover .btn__ico { transform: translate(2px,2px); }

.btn--block { display: flex; justify-content: center; width: 100%; }

/* tertiary = bare label + amber arrow, no pill */
.arrowlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  color: var(--ink);
}
.arrowlink svg { width: 15px; height: 15px; color: var(--accent); transition: transform var(--t-base) var(--ease); }
.arrowlink:hover svg { transform: translate(3px,3px); }
.section--dark .arrowlink { color: #fff; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header { background: var(--mist); position: relative; z-index: 60; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 800; font-size: 1.42rem; letter-spacing: -0.03em; color: var(--ink); }
.brand__mark { width: 26px; height: 26px; flex: 0 0 26px; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav__link { font-family: var(--font-body); font-weight: 500; font-size: 0.98rem; color: var(--ink); position: relative; padding: 6px 0; }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width var(--t-base) var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.header-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: 26px; height: 26px; }

/* transparent-over-hero variant (home only) */
.site-header--over { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.site-header--over .brand, .site-header--over .nav__link, .site-header--over .nav-toggle { color: #f2f6f6; }
.site-header--over .brand__mark path:first-child { stroke: #f2f6f6; }

.mobile-panel { position: fixed; inset: 0; background: var(--paper); z-index: 120; transform: translateX(100%); transition: transform var(--t-base) var(--ease); display: flex; flex-direction: column; padding: 22px 26px; overflow-y: auto; }
.mobile-panel.open { transform: translateX(0); }
.mobile-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mobile-panel__close { background: none; border: 0; width: 44px; height: 44px; color: var(--ink); cursor: pointer; }
.mobile-panel__close svg { width: 26px; height: 26px; }
.mobile-panel nav { display: flex; flex-direction: column; gap: 4px; }
.mobile-panel nav a { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.mobile-panel nav a.btn { border-bottom: 0; margin-top: 18px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; }

/* ==========================================================================
   HERO (full-viewport cinematic, dark teal grade, subject right)
   ========================================================================== */
.hero { position: relative; background: var(--dark); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__photo { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(24,32,36,.94) 0%, rgba(24,32,36,.86) 26%, rgba(24,32,36,.55) 52%, rgba(24,32,36,.12) 78%, rgba(24,32,36,.02) 100%),
    linear-gradient(180deg, rgba(24,32,36,.55) 0%, rgba(24,32,36,0) 22%, rgba(24,32,36,0) 58%, rgba(24,32,36,.62) 100%); }
.hero__wrap { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 0 114px; }
.hero__copy { max-width: 660px; }
.hero__mark { width: 46px; height: 46px; color: var(--on-dark); opacity: .9; margin-bottom: 18px; }
.hero__mark svg { width: 100%; height: 100%; stroke-width: 1.3; }
.hero__kick { font-family: var(--font-body); font-weight: 500; color: var(--on-dark-muted); font-size: 1rem; margin-bottom: 22px; letter-spacing: 0.01em; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -0.045em; line-height: 0.94; color: #f2f6f6; }
.hero h1 .hl { color: rgba(226,235,235,.42); }
.hero__lead { margin-top: 28px; max-width: 430px; font-size: var(--fs-lead); color: #d3dcdc; line-height: 1.58; }
.hero__rule { width: 150px; height: 0; border-top: 2px dashed rgba(226,235,235,.32); margin: 34px 0 32px; }
.hero__cta { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.hero__cta .arrowlink { color: #f2f6f6; }

/* floating translucent stat cards, bottom-right */
.hero__stats { position: absolute; right: 0; bottom: 78px; z-index: 3; display: flex; flex-direction: column; gap: 16px; width: min(340px, 42vw); }
.statcard { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: rgba(23,31,35,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226,235,235,.12); border-radius: 14px; padding: 22px 26px; }
.statcard__label { font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: #e6eded; line-height: 1.2; }
.statcard__label span { color: var(--accent); }
.statcard__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3rem); color: #f2f6f6; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.statcard__num em { color: var(--accent); font-style: normal; }
.hero__stats-note { font-size: 0.7rem; color: rgba(226,235,235,.4); text-align: right; letter-spacing: 0.02em; margin-top: 2px; }

/* scroll cue, right edge */
.hero__scroll { position: absolute; right: 34px; bottom: 78px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; color: rgba(226,235,235,.6); }
.hero__scroll-txt { writing-mode: vertical-rl; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
.hero__mouse { width: 20px; height: 32px; border: 1.5px solid rgba(226,235,235,.5); border-radius: 12px; position: relative; }
.hero__mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; border-radius: 2px; background: var(--accent); transform: translateX(-50%); animation: heroScroll 1.6s var(--ease) infinite; }
@keyframes heroScroll { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 9px); } 100% { opacity: 0; transform: translate(-50%, 9px); } }

/* ==========================================================================
   NOTCHED CARD (the reusable card shape)
   ========================================================================== */
.notch-media { position: relative; display: block; }
.notch-media img, .card, .price, .team__photo, .post__img {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  background: var(--card-paper);
  padding: 40px 34px 34px;
  display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.section--paper .card, .section--paper .price { background: var(--card-mist); }
/* min-heights keep the dashed dividers, check lists and CTAs of a card ROW on one
   baseline even when one title wraps to two lines (reference cards all align) */
.card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--ink); line-height: 1.12; margin-bottom: 16px; min-height: 2.24em; }
.card__desc { color: var(--muted); margin-bottom: 24px; min-height: 6.48em; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

/* dashed hairline divider */
.divider { border: 0; border-top: 1.5px dashed var(--line); margin: 24px 0; }

/* amber circular-check list */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.checks li { display: flex; align-items: center; gap: 13px; color: var(--ink); font-size: 0.98rem; }
.check-ico { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; }
.check-ico svg { width: 13px; height: 13px; }
.checks li.off { color: var(--steel-2); }
.checks li.off .check-ico { background: var(--line-soft); color: var(--steel-2); }
.card .btn { margin-top: auto; }

/* ==========================================================================
   COLLABORATION / ICON-LIST FEATURE
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.split__intro { position: sticky; top: 40px; align-self: start; }
.split__intro h2 { font-size: var(--fs-h2); margin-bottom: 22px; }
.split__intro p { color: var(--muted); margin-bottom: 30px; max-width: 420px; }
.split__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.featlist { display: flex; flex-direction: column; gap: 56px; text-align: center; }
.featlist__item { }
.featlist__ico { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--ink); }
.featlist__ico svg { width: 100%; height: 100%; stroke-width: 1.3; }
.featlist__item h3 { font-size: 1.28rem; margin-bottom: 12px; }
.featlist__item p { color: var(--muted); max-width: 320px; margin: 0 auto; }

/* ==========================================================================
   ABOUT band (heading + quote card + notched portrait bleed)
   ========================================================================== */
/* Full-bleed band: the copy column stays aligned to the site container while the
   photo runs edge to edge on the right and the full height of the band.
   Percentages resolve against this element's own width, so no 100vw scrollbar trap. */
.section--about { padding: 0; background: var(--paper); }
.about {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--wrap) / 2 - 32px)) 1fr;
  column-gap: 64px;
  align-items: stretch;
  padding-left: max(32px, calc(50% - (var(--wrap) / 2) + 32px));
}
.about__copy { padding: 96px 0; align-self: center; }
.about__copy h2 { font-size: var(--fs-h2); margin-bottom: 26px; }
.about__copy > p { color: var(--muted); max-width: 460px; margin-bottom: 40px; }
.quote { display: grid; grid-template-columns: 132px 1fr; gap: 24px; align-items: start; }
.quote__ava { width: 132px; height: 150px; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); box-shadow: var(--sh-1); }
.quote__mark { color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; }
.quote__by { font-weight: 700; color: var(--ink); margin: 10px 0 8px; }
.quote__by span { color: var(--muted); font-weight: 400; }
.quote__text { font-family: var(--font-display); font-weight: 500; font-style: italic; color: var(--ink); font-size: 1.15rem; line-height: 1.4; letter-spacing: -0.01em; }
.about__media { position: relative; min-height: 620px; }
.about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%); }

/* ==========================================================================
   DARK PHOTO CTA band (full-bleed, photo bleeds right)
   ========================================================================== */
.photocta { position: relative; background: var(--dark); color: var(--on-dark); overflow: hidden; }
.photocta__media { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; }
.photocta__media img { width: 100%; height: 100%; object-fit: cover; }
.photocta__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--dark) 0%, rgba(32,42,47,.75) 34%, rgba(32,42,47,.15) 100%); }
.photocta__inner { position: relative; z-index: 2; max-width: 560px; padding: 96px 0; }
.photocta__mark { width: 46px; height: 46px; color: #fff; margin-bottom: 14px; }
.photocta__kick { color: var(--on-dark-muted); font-weight: 500; font-size: 0.95rem; margin-bottom: 24px; }
.photocta h2 { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.2rem); letter-spacing: -0.045em; line-height: 0.98; }
.photocta__lead { margin-top: 26px; max-width: 400px; color: var(--on-dark-muted); }
.photocta__rule { width: 120px; border-top: 2px dashed rgba(255,255,255,.28); margin: 32px 0 30px; }
.photocta__cta { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* ==========================================================================
   PRICING (3 notched cards, amber-check lists)
   ========================================================================== */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.price { background: var(--card-paper); padding: 42px 36px 36px; display: flex; flex-direction: column; }
.price__name { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; margin-bottom: 20px; }
.price__fig { font-family: var(--font-display); font-weight: 800; color: var(--ink); display: flex; align-items: baseline; gap: 4px; margin-bottom: 18px; letter-spacing: -0.03em; }
.price__cur { font-size: 1.6rem; align-self: flex-start; margin-top: 8px; }
.price__amt { font-size: var(--fs-price); line-height: 0.9; }
.price__per { font-size: 0.9rem; color: var(--muted); font-family: var(--font-body); font-weight: 400; align-self: flex-end; }
.price__desc { color: var(--muted); margin-bottom: 4px; min-height: 4.86em; }
.price .btn { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   TEAM (4 notched square headshots)
   ========================================================================== */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.team__photo { width: 100%; aspect-ratio: 1/1.06; object-fit: cover; margin-bottom: 20px; }
.member__name { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.01em; }
.member__role { color: var(--muted); font-size: 0.95rem; margin-top: 4px; }

/* ==========================================================================
   BLOG cards (notched image + category chip, author row, ghost pill)
   ========================================================================== */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post { background: var(--card-paper); display: flex; flex-direction: column; }
.section--mist .post { background: var(--paper); }
.post__media { position: relative; }
.post__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post__chip { position: absolute; top: 18px; left: 18px; background: var(--ink); color: #fff; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 15px; border-radius: var(--r-pill); }
.post__body { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 0.85rem; }
.post__meta .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; color: var(--muted); }
.section--mist .post__meta .dot { background: var(--mist); }
.post__meta .dot svg { width: 13px; height: 13px; }
.post__title { font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; line-height: 1.12; letter-spacing: -0.015em; margin: 18px 0 12px; min-height: 2.24em; }
.post__excerpt { color: var(--muted); font-size: 0.95rem; margin-bottom: 24px; }
.post .btn { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   QUESTIONS strip (short dark band)
   ========================================================================== */
.qstrip { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.qstrip__bg { position: absolute; inset: 0; }
.qstrip__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.qstrip__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dark) 20%, rgba(32,42,47,.6) 100%); }
.qstrip__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 66px 0; flex-wrap: wrap; }
.qstrip h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); letter-spacing: -0.04em; }
.qstrip__cta { display: flex; align-items: center; gap: 30px; }

/* ==========================================================================
   PAGEHEAD (inner-page dark breadcrumb hero)
   ========================================================================== */
.pagehead { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.pagehead__bg { position: absolute; inset: 0; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.pagehead__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,42,47,.75) 0%, rgba(32,42,47,.9) 100%); }
.pagehead__inner { position: relative; z-index: 2; padding: 118px 0 108px; max-width: 780px; }
.crumb { display: inline-flex; gap: 8px; color: var(--on-dark-muted); font-size: 0.85rem; margin-bottom: 24px; background: rgba(255,255,255,.1); padding: 7px 16px; border-radius: var(--r-pill); }
.crumb a:hover { color: #fff; }
.pagehead h1 { font-size: var(--fs-h1); letter-spacing: -0.04em; line-height: 1; }
.pagehead__lead { margin-top: 22px; color: var(--on-dark-muted); font-size: var(--fs-lead); max-width: 560px; }

/* ==========================================================================
   FEATURE row (service detail / about)
   ========================================================================== */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature--rev .feature__media { order: 2; }
.feature__media img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.feature h2 { font-size: var(--fs-h2); margin-bottom: 22px; }
.feature__body { color: var(--muted); margin-bottom: 20px; }
.feature .checks { margin: 26px 0 30px; }

/* process phases */
.phases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.phase { background: var(--card-paper); padding: 34px 32px; }
.section--paper .phase { background: var(--card-mist); }
.phase__ico { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; margin-bottom: 20px; }
.phase__ico svg { width: 22px; height: 22px; }
.phase h3 { margin-bottom: 12px; }
.phase p { color: var(--muted); }

/* big quote (case result) */
.bigquote { max-width: 820px; margin: 0 auto; text-align: center; }
.bigquote__stars { display: flex; justify-content: center; gap: 4px; color: var(--accent); margin-bottom: 24px; }
.bigquote__stars svg { width: 22px; height: 22px; }
.bigquote blockquote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 28px; }
.bigquote__by { display: flex; align-items: center; justify-content: center; gap: 14px; }
.bigquote__ava { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

/* stat strip (case detail) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.4rem); color: var(--ink); letter-spacing: -0.03em; }
.section--dark .stat__num { color: var(--accent); }
.stat__label { color: var(--muted); margin-top: 8px; }
.section--dark .stat__label { color: var(--on-dark-muted); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.contact-info h2 { font-size: var(--fs-h2); margin: 16px 0; }
.contact-rows { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-rows li { display: flex; gap: 16px; align-items: flex-start; }
.ci { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; }
.ci svg { width: 21px; height: 21px; }
.contact-rows dt { font-weight: 700; color: var(--ink); }
.contact-rows dd { margin: 3px 0 0; color: var(--muted); }
.formcard { background: var(--card-mist); padding: 42px 40px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: var(--r-sm);
  padding: 13px 15px; transition: border-color var(--t-fast) var(--ease); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 166, 60, 0.25); }
.form__consent { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.form__success { display: none; padding: 20px; background: var(--accent-soft); border-radius: var(--r-sm); color: var(--ink); line-height: 1.55; }
.form__success.show { display: block; }

/* newsletter (footer) */
.news { position: relative; max-width: 430px; }
/* pill field + trailing amber circle, same control kit as the arrow pills */
.news input { width: 100%; font-family: var(--font-body); font-size: 0.98rem; background: var(--paper); border: 1.5px solid var(--line-soft); border-radius: var(--r-pill); padding: 16px 68px 16px 24px; color: var(--ink); }
.news input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 166, 60, 0.25); }
.news button { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: var(--accent); color: var(--ink); border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast); }
.news button:hover { background: var(--accent-deep); }
.news button svg { width: 20px; height: 20px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--paper); }
.footer__top { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr; gap: 40px; padding: 84px 0 64px; }
.footer__brand .brand { margin-bottom: 26px; }
.footer__news-label { font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.footer__nav h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-family: var(--font-body); font-weight: 600; margin-bottom: 18px; }
.footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer__nav a { color: var(--ink); font-weight: 500; }
.footer__nav a:hover { color: var(--accent-deep); }
.footer__mid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr; gap: 40px; padding: 48px 0; border-top: 1px solid var(--line-soft); }
.footer__social { display: flex; gap: 12px; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.footer__social a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.footer__social svg { width: 18px; height: 18px; }
.footer__office h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 12px; }
.footer__office p { color: var(--muted); font-size: 0.92rem; margin-bottom: 12px; }
.footer__office a { font-weight: 700; color: var(--ink); }
.footer__bottom { padding: 26px 0 34px; border-top: 1px solid var(--line-soft); }
.footer__legal { color: var(--muted); font-size: 0.8rem; line-height: 1.6; }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1040px) {
  .cards3, .pricing, .posts, .phases, .stats { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .split { gap: 44px; }
}
@media (max-width: 860px) {
  .nav, .header-cta .btn { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .site-header .wrap { height: 74px; }
  .about, .feature, .split, .contact-grid { grid-template-columns: 1fr; }
  .hero__photo { object-position: 66% 28%; }
  .hero__scrim { background: linear-gradient(180deg, rgba(24,32,36,.5) 0%, rgba(24,32,36,.18) 30%, rgba(24,32,36,.74) 70%, rgba(24,32,36,.96) 100%); }
  .hero__wrap { justify-content: flex-end; padding: 120px 0 48px; }
  .hero__copy { max-width: none; }
  .hero__lead { max-width: 460px; }
  .hero__stats { position: static; width: 100%; margin-top: 40px; }
  .hero__stats-note { text-align: left; }
  .hero__scroll { display: none; }
  .feature--rev .feature__media { order: 0; }
  .about { grid-template-columns: 1fr; column-gap: 0; padding-left: 0; }
  .about__copy { padding: 64px 32px 44px; }
  .about__media { min-height: 380px; }
  .split__intro { position: static; }
  .section--split2 { background: var(--paper); }
  .section--split2 .btn--ghost { background: var(--mist); }
  .featlist { margin-top: 44px; }
  .sec-head { grid-template-columns: 1fr; gap: 18px; }
  .sec-head__right { text-align: left; }
  .photocta__media { width: 100%; opacity: .5; }
  .photocta__media::after { background: linear-gradient(180deg, rgba(32,42,47,.55) 0%, var(--dark) 78%); }
  .photocta__inner { padding: 72px 0; }
  .qstrip__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
  .footer__top, .footer__mid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .section { padding: var(--s8) 0; }
  .cards3, .pricing, .posts, .phases, .stats, .team { grid-template-columns: 1fr; }
  .about__copy { padding: 56px 20px 40px; }
  .card__title, .post__title, .card__desc, .price__desc { min-height: 0; }
  .quote { grid-template-columns: 96px 1fr; gap: 16px; }
  .quote__ava { width: 96px; height: 112px; }
  .formcard { padding: 30px 24px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}