/* Shivapuri Dristi Engineering: warm architectural editorial on a naksa grid */

/* Metric-matched fallbacks.
   Big Shoulders Display is ~76% narrower than a default sans, so before the
   webfont arrives every headline reflowed and the page shifted (CLS 0.245 on
   a throttled mobile load). Each fallback below is size-adjusted to the real
   font's measured width, so the pre-swap render is nearly the same size and
   the swap barely moves anything. Ratios measured against the live page. */
@font-face {
  font-family: "Display Fallback";
  src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Nimbus Sans Narrow");
  size-adjust: 69.4%;
  font-weight: 600 800;
}
@font-face {
  font-family: "Display Fallback Wide";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 56.9%;
  font-weight: 600 800;
}
@font-face {
  font-family: "Body Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 104.7%;
}

/* Palette: limestone, morning light, concrete, brick, moss, charcoal.
   Brick is the action colour (buttons, numerals, the strip under the hero,
   the CTA band). Moss is wayfinding (eyebrows, tags, the drafting grid) and
   the hero board. Every small-text pair below clears WCAG AA (4.5:1). The
   two colours that do not on cream, --muted (3.1:1) and --accent (3.6:1),
   are only ever used for rules, fills and type at 24px or larger. */
:root {
  --bg: #f3f0e9;            /* main background */
  --bg-alt: #e9e5dc;        /* alternate bands */
  --card: #faf9f6;          /* cards and image frames */
  --ink: #292927;           /* headings */
  --text: #66645f;          /* body copy, small labels (5.2:1 on --bg) */
  --muted: #8b8881;         /* rules and large muted type only */
  --line: #d5d0c6;
  --line-strong: #b9b3a6;
  --accent: #b66a3c;        /* brick: rules, numbers, large type, hover fills */
  --accent-text: #96522c;   /* brick as SMALL text on cream (5.2:1) */
  --dark: #242522;          /* the one charcoal band, and the footer */
  --dark-text: #cfcbc1;
  --dark-muted: #9b9891;
  --dark-accent: #c98a5e;   /* brick as small text on charcoal (5.4:1) */
  --moss: #4a6350;          /* moss as small text on cream (5.8:1): eyebrows, tags */
  --moss-wash: #e6e8df;     /* cream + 8% moss */
  --moss-deep: #2b4437;     /* the hero board (--bg 9.3:1, --dark-text 6.5:1) */
  --moss-label: #d9a07a;    /* brick lightened for small text on --moss-deep (4.7:1) */
  --moss-em: #c27f50;       /* brick for the hero's em word on --moss-deep (3.25:1, large text only) */
  --display: "Big Shoulders Display", "Display Fallback", "Display Fallback Wide", sans-serif;
  --body: "Schibsted Grotesk", "Body Fallback", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 1rem;
  /* faint drafting grid */
  background-image:
    linear-gradient(rgba(74,99,80,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,99,80,.09) 1px, transparent 1px);
  background-size: 56px 56px;
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .15em; }
a:hover { text-decoration-color: currentColor; }

h1, h2, h3 { color: var(--ink); }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bg);
  padding: .7rem 1.1rem; z-index: 100;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }
:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .85rem;
  padding-bottom: .85rem;
  flex-wrap: wrap;
}
.brand { text-decoration: none; line-height: 1.1; }
.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}
.brand-name span { color: var(--accent); }
.brand-sub {
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}
nav.main-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
nav.main-nav a {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
  text-decoration: none;
  color: var(--text);
  padding: .45rem .7rem .35rem;
  border-bottom: 2px solid transparent;
}
nav.main-nav a:hover { color: var(--ink); }
nav.main-nav a.active { color: var(--ink); border-bottom-color: var(--moss); }

/* Facebook + language chips, top right of the header. The uncle asked for the
   Facebook page at the top (2026-09-07). On desktop it is a solid brick chip
   at the end of the nav; on a phone the pair drops into the empty right half
   of the brand row and Facebook loses its word, so the header gains no rows. */
.nav-utils { display: flex; align-items: center; gap: .4rem; margin-left: .6rem; }
nav.main-nav a.nav-fb {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .82rem;
  padding: .38rem .7rem;
  border: 1px solid var(--accent-text);
  background: var(--accent-text);
  color: var(--card);
  align-self: center;
}
nav.main-nav a.nav-fb:hover { background: var(--ink); border-color: var(--ink); color: var(--card); }
/* Small screens: the header was 164px tall at 375px wide (brand, a row of
   links, and the language switch alone on a third row) and it was sticky, so
   a quarter of every screen was chrome. Below 760px the switch sits on the
   brand row, the five links share one row, and the header scrolls away: the
   fixed .mobile-cta bar below carries the persistent action instead. */
@media (max-width: 760px) {
  .site-header { position: static; }
  .site-header .wrap { position: relative; row-gap: .5rem; padding-top: .6rem; padding-bottom: .45rem; }
  /* room for the two chips parked at the right of the brand row */
  .brand { padding-right: 7.2rem; }
  .brand-sub { font-size: .58rem; letter-spacing: .09em; line-height: 1.4; }
  nav.main-nav { width: 100%; justify-content: space-between; gap: 0; }
  /* 44px rows: at .4rem of padding the links were 35px tall, under every
     touch-target guideline. The height comes out of the header elsewhere. */
  nav.main-nav a {
    font-size: .85rem; letter-spacing: .05em;
    min-height: 2.75rem; padding: 0 .2rem;
    display: inline-flex; align-items: center;
  }
  .nav-utils { position: absolute; top: .55rem; right: 1.25rem; margin: 0; gap: .3rem; }
  nav.main-nav a.nav-fb {
    width: 2.5rem; height: 2.5rem; min-height: 0;
    padding: 0; justify-content: center;
  }
  nav.main-nav a.nav-fb .ico { width: 1.3rem; height: 1.3rem; }
  .nav-fb-label { display: none; } /* the aria-label carries the name */
  nav.main-nav a.lang-switch { margin: 0; padding: 0 .5rem; height: 2.5rem; min-height: 0; }
}

/* ---------- hero ---------- */
/* The hero is a deep moss board with the drafting grid in cream over it.
   Type goes cream; the accent word and the kicker use the lightened brick. */
.hero {
  padding: 4.5rem 0 4rem;
  color: var(--dark-text);
  background-color: var(--moss-deep);
  background-image:
    linear-gradient(rgba(243,240,233,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,240,233,.10) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero h1 { color: var(--bg); }
.hero :focus-visible { outline-color: var(--moss-label); }
.hero .btn-solid { background: var(--accent-text); border-color: var(--accent-text); color: var(--card); }
.hero .btn-solid:hover { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.hero .btn-ghost, .hero .btn-dark { border-color: rgba(243,240,233,.6); color: var(--bg); }
.hero .btn-ghost:hover, .hero .btn-dark:hover { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--moss-label);
  margin-bottom: 1.4rem;
}
.hero-kicker::before { content: ""; width: 2rem; height: 1px; background: var(--moss-label); }
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.15rem, 7.5vw, 5.2rem);
  line-height: .95;
  letter-spacing: .01em;
  /* em, not ch: Chrome resolves ch against whichever face is active when
     styles first resolve, and the size-adjusted fallback's zero is a third
     narrower than Big Shoulders', so 16ch came out at either 174px or 260px
     at 375px wide depending on the font race, and the h1 gained a line.
     7.6em is 16 Big Shoulders zeros. Body copy widths elsewhere are
     Schibsted zeros (0.611em) for the same reason: its fallback is 5%
     narrower. */
  max-width: 7.6em;
}
.hero h1 em { font-style: normal; color: var(--moss-em); } /* darker than the kicker; 3.25:1 on moss, large text only */
.hero p.lede { margin-top: 1.5rem; max-width: 28.1em; font-size: 1.1rem; }
.hero-ctas { margin-top: 2.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* home hero: copy aligned to the content column, photograph bleeding to the
   right edge of the viewport. The two middle tracks add up to .wrap's 1100px
   so the copy's left edge lines up with every section below it. */
.hero-home { padding: 0; }
.hero-split {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [copy-start] minmax(0, 600px)
    [copy-end shot-start] minmax(0, 500px)
    minmax(1.25rem, 1fr) [full-end];
  align-items: stretch;
}
.hero-copy { grid-column: copy-start / copy-end; padding: 5rem 3rem 4rem 0; }
.hero-shot { grid-column: shot-start / full-end; margin: 0; position: relative; }
/* the render keeps its cream sheet: a drawing pinned to the green board */
.hero-shot { background: var(--bg); border-left: 1px solid rgba(243,240,233,.15); }
.hero-shot img {
  display: block; width: 100%; height: 100%;
  min-height: 560px; object-fit: cover;
}
/* the concept render is near-white; multiply grades it into the cream.
   Only on .is-render, so a photograph of real work is never tinted. */
.hero-shot.is-render img { mix-blend-mode: multiply; object-position: 72% 50%; }
.hero-shot figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  background: var(--moss-deep);
  color: var(--bg);
  padding: .4rem .7rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* the drawing-title strip is a brick band, edge to edge: the wrap gives up its
   width and the strip takes it */
.hero-home > .wrap { max-width: none; padding: 0; background: var(--accent-text); }
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-copy { grid-column: 1; padding: 2.5rem 1.25rem 2.5rem; }
  .hero-shot { grid-column: 1; }
  .hero-shot img { min-height: 0; aspect-ratio: 4 / 3; }
}

.btn {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1.05rem;
  text-decoration: none;
  padding: .85rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-solid { background: var(--accent-text); border-color: var(--accent-text); color: var(--card); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-ghost:hover { background: var(--accent-text); border-color: var(--accent-text); color: var(--card); }
.btn-dark:hover { background: var(--ink); color: var(--bg); }

/* drawing-title block, like a drawing sheet's title box */
.dwg-strip {
  max-width: 1100px;
  margin: 0 auto;
  padding: .8rem 1.25rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--accent-text);
  color: var(--card);
}
.dwg-strip b { color: var(--card); font-weight: 600; }

/* ---------- sections ---------- */
section { padding: 4.5rem 0; }
.section-head { margin-bottom: 2.4rem; }
.section-num {
  font-family: var(--display);
  color: var(--moss);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .2em;
  margin-bottom: .5rem;
}
.section-num::before {
  content: ""; display: inline-block; width: 1.4rem; height: 2px;
  background: currentColor; vertical-align: middle; margin-right: .6rem;
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.005em;
}
.section-head p { max-width: 36.7em; margin-top: .9rem; }

/* ---------- service index (home): a numbered list, not a card grid ---------- */
.svc-index { list-style: none; border-top: 1px solid var(--accent); }
.svc-index li { border-bottom: 1px solid var(--line); }
.svc-index a {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.25fr) 2rem;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  text-decoration: none;
  transition: background .15s ease;
}
.svc-index a:hover { background: var(--bg-alt); }
.svc-no {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .1em;
  color: var(--accent);
}
.svc-name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1;
  color: var(--ink);
}
.svc-name small {
  display: inline-block;
  margin-left: .6rem;
  font-family: var(--body);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--moss);
  vertical-align: .25em;
}
.svc-desc { font-size: .95rem; color: var(--text); }
.svc-arrow {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--accent);
  justify-self: end;
  transition: transform .15s ease;
}
.svc-index a:hover .svc-arrow { transform: translateX(4px); }
@media (max-width: 760px) {
  .svc-index a { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: .6rem 1rem; padding: 1.25rem 0; }
  .svc-desc { grid-column: 2 / 3; }
}

/* ---------- service list page ---------- */
.svc { border-top: 1px solid var(--line); padding: 2.2rem 0; display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; }
.svc:last-of-type { border-bottom: 1px solid var(--line); }
.svc h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.05;
}
.svc h3 small { display: block; font-size: .7rem; letter-spacing: .18em; color: var(--moss); margin-bottom: .4rem; font-family: var(--body); font-weight: 400; }
.svc p { max-width: 37.9em; }
.svc ul { margin-top: .6rem; padding-left: 1.1rem; }
@media (max-width: 640px) { .svc { grid-template-columns: 1fr; gap: .6rem; } }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.about-office { display: grid; grid-template-columns: minmax(0,320px) 1fr; gap: 2rem; align-items: start; }
@media (max-width: 700px) { .about-office { grid-template-columns: 1fr; gap: 1.4rem; } }

/* ---------- photographs ---------- */
.shot { margin: 0; border: 1px solid var(--line); background: var(--card); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.shot figcaption {
  padding: .7rem .9rem;
  border-top: 1px solid var(--line);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.shot figcaption b { display: block; color: var(--ink); letter-spacing: .04em; }
.project-feature .shot { border: 0; border-right: 1px solid var(--line); }
.project-feature .shot img { aspect-ratio: auto; height: 100%; min-height: 320px; }
@media (max-width: 760px) {
  .project-feature .shot { border-right: 0; border-bottom: 1px solid var(--line); }
  .project-feature .shot img { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------- project feature ---------- */
.project-feature {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--card);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.project-body { padding: 2.2rem; }
.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 700px) { .feature-strip { gap: .5rem; } }
.feature-strip .shot figcaption { display: none; }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.rel-card {
  display: block;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  transition: background .15s ease;
}
.rel-card:hover { background: var(--bg-alt); }
.rel-card b {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.05;
  color: var(--ink);
}
.rel-card span { display: block; margin-top: .5rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }

.project-note { border: 1px solid var(--line); background: var(--card); padding: 2.2rem; max-width: 37.9em; }
.project-note h3, .project-body h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
}
.scope-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.2rem; }
.scope-tags span {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--moss);
  color: var(--bg);
  padding: .25rem .55rem;
}
@media (max-width: 760px) { .project-feature { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat { border-top: 1px solid var(--ink); padding: .8rem 0 .4rem; }
.stat b { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; display: block; color: var(--ink); }
.stat span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- the one charcoal band ---------- */
.band-dark { background: var(--dark); color: var(--dark-text); padding: 5rem 0; }
.band-dark .wrap { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 3rem; align-items: end; }
.band-dark .section-num { color: var(--dark-accent); }
.band-dark h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  color: var(--bg);
}
.band-dark p { max-width: 35.5em; margin-top: 1rem; }
.big-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--bg);
}
.big-num span { color: var(--dark-accent); }
.big-num + small {
  display: block;
  margin-top: .8rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dark-muted);
}
.area-pins { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.area-pins span {
  border: 1px solid rgba(243,240,233,.35);
  padding: .35rem .8rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg);
}
.area-pins span.pri { background: var(--accent-text); color: var(--card); border-color: var(--accent-text); font-weight: 600; }
@media (max-width: 760px) { .band-dark .wrap { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.contact-card {
  border: 1px solid var(--line-strong);
  padding: 1.6rem 1.4rem;
  background: var(--card);
  text-decoration: none;
  display: block;
  transition: background .15s ease, border-color .15s ease;
}
.contact-card:hover { background: var(--bg-alt); border-color: var(--ink); }
.contact-card .label {
  font-family: var(--display);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: .85rem;
  color: var(--accent-text);
}
.contact-card .value { font-size: 1.25rem; font-weight: 600; margin-top: .3rem; overflow-wrap: anywhere; color: var(--ink); } /* anywhere, not break-all: the email may split, real words wrap at spaces */

/* PLACEHOLDER marker. Currently unused: every frame now holds a real image.
   Kept for future drafting. Replace class + text before launch if reused. */
.todo-placeholder { background: #ffe8a3; outline: 2px dashed #b98900; padding: 0 .3em; }

/* ---------- CTA band: solid brick, full strength. Brick tinted toward cream
   reads as pink next to the moss, so it is never diluted; this band matches
   the strip under the home hero. Cream on --accent-text is 5.2:1. */
.cta-band { background: var(--accent-text); color: var(--card); }
.cta-band h2 { color: var(--card); }
.cta-band p { color: var(--card); }
.cta-band .btn-solid { background: var(--card); border-color: var(--card); color: var(--ink); }
.cta-band .btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.cta-band .btn-ghost { border-color: rgba(250,249,246,.6); color: var(--card); }
.cta-band .btn-ghost:hover { background: var(--card); border-color: var(--card); color: var(--ink); }
.cta-band h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  max-width: 8.8em; /* 20 Big Shoulders 700 zeros; see .hero h1 */
}
/* nothing dark or brick-toned clears 3:1 on brick, so the em word is underlined cream */
.cta-band h2 em { font-style: normal; color: var(--card); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .1em; text-decoration-color: rgba(250,249,246,.7); }
.cta-band p { margin-top: 1rem; max-width: 36.7em; }
.cta-band .hero-ctas { margin-top: 1.8rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--dark-muted); padding: 2.75rem 0; font-size: .85rem; border-top: 4px solid var(--accent-text); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.site-footer a { color: var(--dark-text); text-decoration: none; }
.site-footer a:hover { color: var(--dark-accent); }
.footer-nav { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- prose ---------- */
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0; padding-left: 1.2rem; }
.prose li + li { margin-top: .45rem; }
.prose ul + p { margin-top: 1rem; }
.prose { max-width: 41.6em; }
.prose strong { color: var(--ink); }

/* ---------- icons: inline SVG, single colour, sized to the text ---------- */
.ico { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.ico-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-card .label { display: inline-flex; align-items: center; gap: .5em; }
.contact-card .label .ico { width: 1.35em; height: 1.35em; }
.footer-nav a { display: inline-flex; align-items: center; gap: .35em; }
@media (max-width: 760px) {
  .mobile-cta a { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
}

/* ---------- FAQ: a definition list on hairlines, not an accordion ---------- */
.faq { max-width: 41.6em; border-top: 1px solid var(--line); margin: 0; }
.faq dt {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.25rem;
  line-height: 1.05;
  color: var(--ink);
  padding-top: 1.4rem;
}
.faq dd { margin: .55rem 0 0; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
html[lang="ne"] .faq dt { text-transform: none; font-size: 1.3rem; line-height: 1.3; }

/* ---------- reveal on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero-ctas, .hero-kicker { animation: rise .6s ease both; }
  .hero .lede { animation-delay: .12s; }
  .hero-ctas { animation-delay: .22s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- fixed contact bar, small screens only ----------
   The site has no form: enquiries are a WhatsApp message or a call. On a
   phone those two actions stay one tap away on every page. Body padding
   keeps the footer clear of the bar. */
.mobile-cta { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 3.4rem; }
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--card);
    border-top: 1px solid var(--line-strong);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-cta a {
    font-family: var(--display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 1.05rem;
    text-decoration: none;
    text-align: center;
    padding: .95rem .5rem .85rem;
    color: var(--ink);
  }
  .mobile-cta a:first-child { background: var(--accent-text); color: var(--card); }
}
@media print { .mobile-cta { display: none; } }

/* ---------- small-screen refinements ----------
   Measured on a 320px viewport (iPhone SE) on 2026-09-07. Each rule below
   fixes something that only goes wrong at that width. */
@media (max-width: 760px) {
  /* A fixed background repaints on every scroll frame on mobile browsers and
     iOS resolves it against the whole document, so the grid drifted. The grid
     scrolling with the page looks the same and costs nothing. */
  body { background-attachment: scroll; }

  /* .22em of tracking pushed the four place names onto three ragged lines
     with the leading rule stranded in the middle of the block. */
  .hero-kicker { letter-spacing: .12em; font-size: .72rem; margin-bottom: 1.1rem; }
  .hero-kicker::before { display: none; }

  /* the email is 24 characters: at 1.25rem it broke mid-word twice */
  .contact-card { padding: 1.25rem 1.1rem; }
  .contact-card .value { font-size: 1.05rem; }

  /* footer links were 22px tall */
  .footer-nav { gap: .3rem 1.1rem; }
  .footer-nav a { min-height: 2.5rem; }
}

/* ---------- language switch ---------- */
nav.main-nav a.lang-switch {
  margin-left: .35rem;
  border: 1px solid var(--line-strong);
  padding: .3rem .6rem;
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
  align-self: center;
}
nav.main-nav a.lang-switch:hover { border-color: var(--ink); }
nav.main-nav a.lang-switch[lang="ne"] {
  font-family: "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
  font-weight: 600;
}

/* ---------- Nepali pages (/ne/) ----------
   Big Shoulders Display and Schibsted Grotesk carry no Devanagari, so the
   Nepali pages swap both roles for Mukta (Ek Type, drawn for Nepali and
   Hindi). Devanagari needs headroom for the shirorekha and the matras above
   and below it, so every tight Latin line-height is loosened, and the
   tracking the Latin small caps rely on is removed: letter-spacing pulls
   Devanagari conjuncts apart. Mukta is not condensed, so the display sizes
   come down a step to keep the same line breaks. */
html[lang="ne"] {
  --display: "Mukta", "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
  --body: "Mukta", "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
}
html[lang="ne"] body { line-height: 1.8; }
html[lang="ne"] .brand-name { font-size: 1.35rem; letter-spacing: 0; }
html[lang="ne"] .brand-sub { font-size: .74rem; letter-spacing: 0; }
html[lang="ne"] nav.main-nav a { font-size: 1rem; letter-spacing: 0; }
html[lang="ne"] .hero h1 {
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.2;
  letter-spacing: 0;
  max-width: 10.7em; /* 18 Mukta zeros; see the Latin .hero h1 */
}
html[lang="ne"] .hero p.lede { font-size: 1.12rem; }
html[lang="ne"] .section-head h2,
html[lang="ne"] .band-dark h2,
html[lang="ne"] .cta-band h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.7rem);
  line-height: 1.25;
  letter-spacing: 0;
}
html[lang="ne"] .cta-band h2 { max-width: 11.9em; } /* 20 Mukta zeros */
html[lang="ne"] .svc-name { font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.3; }
html[lang="ne"] .svc h3 { font-size: 1.35rem; line-height: 1.3; }
html[lang="ne"] .project-note h3,
html[lang="ne"] .project-body h3 { font-size: 1.6rem; line-height: 1.3; }
html[lang="ne"] .rel-card b { line-height: 1.3; }
html[lang="ne"] .stat b { line-height: 1.1; }
html[lang="ne"] .btn { line-height: 1.3; letter-spacing: 0; }
html[lang="ne"] .mobile-cta a { letter-spacing: 0; line-height: 1.3; }
html[lang="ne"] .hero-kicker,
html[lang="ne"] .section-num,
html[lang="ne"] .dwg-strip,
html[lang="ne"] .svc h3 small,
html[lang="ne"] .svc-name small,
html[lang="ne"] .shot figcaption,
html[lang="ne"] .shot figcaption b,
html[lang="ne"] .hero-shot figcaption,
html[lang="ne"] .scope-tags span,
html[lang="ne"] .stat span,
html[lang="ne"] .big-num + small,
html[lang="ne"] .area-pins span,
html[lang="ne"] .contact-card .label,
html[lang="ne"] .rel-card span,
html[lang="ne"] .svc-no { letter-spacing: 0; }
html[lang="ne"] .hero-kicker,
html[lang="ne"] .section-num { font-size: .9rem; }
html[lang="ne"] .dwg-strip,
html[lang="ne"] .shot figcaption,
html[lang="ne"] .scope-tags span,
html[lang="ne"] .stat span,
html[lang="ne"] .big-num + small,
html[lang="ne"] .area-pins span,
html[lang="ne"] .svc h3 small,
html[lang="ne"] .rel-card span { font-size: .84rem; }
/* Uppercase is a no-op on Devanagari but shouts the odd Latin word
   (WhatsApp) inside a Nepali headline. Buttons keep it. */
html[lang="ne"] .hero h1,
html[lang="ne"] .section-head h2,
html[lang="ne"] .band-dark h2,
html[lang="ne"] .cta-band h2,
html[lang="ne"] .svc h3,
html[lang="ne"] .svc-name,
html[lang="ne"] .project-note h3,
html[lang="ne"] .project-body h3,
html[lang="ne"] .rel-card b,
html[lang="ne"] .contact-card .label { text-transform: none; }

/* Nepali header on a phone. The switch reads "English", 18px wider than
   नेपाली, and Mukta sets the legal name a step larger than Schibsted, so the
   second line of the company name ran under the Facebook chip at 320px. */
@media (max-width: 760px) {
  html[lang="ne"] .brand { padding-right: 8.6rem; }
  html[lang="ne"] .brand-name { font-size: 1.25rem; }
  html[lang="ne"] .brand-sub { font-size: .6rem; line-height: 1.5; }
}