/* ==========================================================================
   NEELACHANDRA INTERIORS — "Architectural Elegance" Design System
   Modern Premium Minimalism · Editorial publishing × architectural precision
   --------------------------------------------------------------------------
   This stylesheet carries the design tokens, typographic scale, component
   primitives and motion language. Tailwind (CDN) handles layout utilities;
   this file owns everything Tailwind cannot express as cleanly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ------------------------------------------------------------------------
     SURFACES — TWO BACKGROUNDS ONLY. This is a hard rule.
     ------------------------------------------------------------------------
     The site previously used four flat section backgrounds (#fff8f6, #fff1ec,
     #ffffff and the charcoal) plus a mint-green panel. Alternating near-identical
     peach tints section after section read as sloppy rather than layered, so the
     palette is now exactly two:

         --nc-surface           #fff8f6  warm off-white   (all light sections)
         --nc-inverse-surface   #3e2c26  charcoal         (all dark bands)

     Separation between light sections is achieved with 1px `rule-top` hairlines
     and vertical rhythm, NOT with tint changes. The hero is exempt: it is a
     photograph with a flat scrim.

     The Material container ramp below is deliberately ALIASED to --nc-surface
     rather than deleted, so any existing `surface-container-*` reference
     resolves to the single light background instead of silently reintroducing a
     tint. Do not give these distinct values again.
     --------------------------------------------------------------------- */
  --nc-surface: #fff8f6;
  --nc-surface-dim: #fff8f6;
  --nc-surface-bright: #fff8f6;
  --nc-surface-container-lowest: #fff8f6;
  --nc-surface-container-low: #fff8f6;
  --nc-surface-container: #fff8f6;
  --nc-surface-container-high: #fff8f6;
  --nc-surface-container-highest: #fff8f6;
  --nc-surface-variant: #fff8f6;

  /* Content */
  --nc-on-surface: #271812;
  --nc-on-surface-variant: #5b4137;
  --nc-inverse-surface: #3e2c26;
  --nc-inverse-on-surface: #ffede7;

  /* Lines */
  --nc-outline: #8f7065;
  --nc-outline-variant: #e4beb1;

  /* Brand */
  --nc-surface-tint: #a73a00;
  --nc-primary: #a73a00;
  --nc-on-primary: #ffffff;
  --nc-primary-container: #ff5c00;
  --nc-on-primary-container: #521800;
  --nc-inverse-primary: #ffb59a;

  /* --nc-secondary is the deep green from the original spec. It is retained
     because it is a specified brand token, but it is NOT used as a background
     anywhere — the mint --nc-secondary-container that used to fill .form-note
     has been removed. */
  --nc-secondary: #466557;
  --nc-on-secondary: #ffffff;

  /* TERTIARY (bright blue #0096fd) AND THE MINT CONTAINER ARE DELETED.
     Neither appeared in the design spec, neither was used by any rule, and a
     saturated blue plus a mint green in a warm terracotta/charcoal palette is
     exactly the incoherent-accent problem this pass removed. Do not re-add:
     the only accents on this site are --nc-primary (#a73a00),
     --nc-primary-container (#ff5c00) and --nc-error for form failures. */

  --nc-error: #ba1a1a;
  --nc-on-error: #ffffff;
  --nc-error-container: #ffdad6;
  --nc-on-error-container: #93000a;

  --nc-background: #fff8f6;
  --nc-on-background: #271812;

  /* Structure */
  --nc-container-max: 1440px;
  --nc-gutter: 32px;
  --nc-margin-desktop: 80px;
  --nc-margin-mobile: 24px;
  --nc-section-gap: 160px;
  --nc-baseline: 8px;
  --nc-radius: 0px;

  /* Motion */
  --nc-ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --nc-duration-slow: 1200ms;
  --nc-duration-base: 700ms;
  --nc-duration-fast: 240ms;
}

/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: var(--nc-radius); /* Shape language: strictly sharp. */
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--nc-background);
  color: var(--nc-on-background);
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* `body.nav-open` REMOVED. It locked scroll behind the old full-screen mobile
   drawer. The supplied navbar uses a dropdown panel that does not cover the
   viewport, so nothing sets that class any more. */

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

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--nc-primary-container);
  color: #ffffff;
}

/* Visible, architectural focus ring — no rounding. */
:focus-visible {
  outline: 2px solid var(--nc-primary-container);
  outline-offset: 3px;
}

.nc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--nc-on-surface);
  color: var(--nc-inverse-on-surface);
  padding: 12px 24px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.nc-skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIC SCALE
   -------------------------------------------------------------------------- */
.display-xl {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 64px;
  line-height: 60px;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}

.headline-lg {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: 0.02em;
  font-weight: 400;
  margin: 0;
}

.headline-md {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 36px;
  line-height: 38px;
  letter-spacing: 0.02em;
  font-weight: 400;
  margin: 0;
}

.headline-sm {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 28px;
  line-height: 30px;
  letter-spacing: 0.03em;
  font-weight: 400;
  margin: 0;
}

.numeral-xl {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 56px;
  line-height: 52px;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.subheader-lg {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.subheader-md {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

.label-caps {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.body-lg {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  margin: 0;
}

.body-md {
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  margin: 0;
}

@media (min-width: 768px) {
  .display-xl {
    font-size: 120px;
    line-height: 110px;
    letter-spacing: -0.02em;
  }
  .headline-lg {
    font-size: 80px;
    line-height: 80px;
    letter-spacing: 0.02em;
  }
  .headline-md {
    font-size: 56px;
    line-height: 56px;
  }
  .headline-sm {
    font-size: 34px;
    line-height: 36px;
  }
  .numeral-xl {
    font-size: 72px;
    line-height: 66px;
  }
}

/* --------------------------------------------------------------------------
   4. STRUCTURE — container, section rhythm, editorial rules
   -------------------------------------------------------------------------- */
/* The single layout primitive. Every section wrapper uses this and nothing
   else — full available width up to 1440px, 24px gutters on mobile, 80px on
   desktop. Never add a narrower max-w-* utility on a section wrapper. */
.nc-container {
  width: 100%;
  max-width: var(--nc-container-max);
  margin-inline: auto;
  padding-inline: var(--nc-margin-mobile);
  zoom: normal;          /* guard: no inherited scaling */
  transform: none;       /* guard: no inherited scaling */
}

@media (min-width: 768px) {
  .nc-container {
    padding-inline: var(--nc-margin-desktop);
  }
}

/* Regression guard. A stray `zoom` or `transform: scale()` on a page-level
   wrapper makes a full desktop layout render as a narrow centred column with
   dead space either side. Nothing above section level may scale. */
html,
body,
main {
  zoom: normal;
  transform: none;
  width: auto;
  max-width: none;
  min-width: 0;
}

.section-pad {
  padding-block: 88px;
}

@media (min-width: 768px) {
  .section-pad {
    padding-block: var(--nc-section-gap);
  }
}

.section-pad-tight {
  padding-block: 64px;
}

@media (min-width: 768px) {
  .section-pad-tight {
    padding-block: 112px;
  }
}

.rule-top {
  border-top: 1px solid var(--nc-outline-variant);
}

.rule-bottom {
  border-bottom: 1px solid var(--nc-outline-variant);
}

/* Eyebrow: label-caps preceded by a 4px brand-orange square. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--nc-on-surface-variant);
}

.eyebrow::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--nc-primary-container);
  flex: 0 0 auto;
}

.eyebrow--light {
  color: var(--nc-inverse-on-surface);
}

/* --------------------------------------------------------------------------
   5. NAVIGATION — MOVED OUT OF THIS FILE
   --------------------------------------------------------------------------
   The previous custom header lived here: .nc-header (sticky, backdrop-blur),
   .nav-link with its animated ::after underline, the full-screen
   .nc-mobile-nav drawer, .mobile-nav-link, and the .nc-wordmark text lockup
   with its __name / __sub spans.

   ALL DELETED. The client-supplied navbar replaced them wholesale and its
   styling lives in css/nav.css. Keeping these would have been actively
   harmful, not merely dead weight:

     - `.nav-link` collided by name with the supplied navbar's own .nav-link,
       and this version's `position:relative` + ::after underline fought the
       supplied solid-border current state.
     - `.nc-header`'s backdrop-filter blur is a glassmorphism effect, which the
       design rules for this project prohibit outright.

   The old .nc-logo sizing block that followed has also been removed; see the
   note immediately below.
   -------------------------------------------------------------------------- */

/* LOGO IMAGE — ALSO REMOVED.
   The old `.nc-logo` sizing block (height 26/32px, max-height cap, max-width
   cap, plus `.nc-wordmark--light .nc-logo` brightness/invert for the dark
   footer band) is gone with the header it served.

   The supplied navbar sizes its own mark via `.nc-logo-img` in css/nav.css,
   using `width: clamp(150px, 14vw, 270px)`, and the supplied footer uses the
   separate `images/footer.webp` lockup rather than an inverted copy of the
   header SVG. Nothing references `.nc-logo` or `.nc-wordmark` any more.

   Worth knowing if the logo ever looks wrong again: an SVG with NO viewBox is
   assumed by browsers to be 300x150, which is what made the old mark render
   oversized. images/logo.svg must keep its viewBox. */

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--nc-duration-fast) ease,
    color var(--nc-duration-fast) ease, border-color var(--nc-duration-fast) ease;
}

/* Primary — solid Brand Orange, inverts on hover. Never a shadow lift. */
.btn-primary {
  background-color: var(--nc-primary-container);
  color: #ffffff;
  border-color: var(--nc-primary-container);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: transparent;
  color: var(--nc-primary);
  border-color: var(--nc-primary);
}

/* Secondary — 1px charcoal border, no fill. */
.btn-secondary {
  background-color: transparent;
  color: var(--nc-on-surface);
  border-color: var(--nc-on-surface);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--nc-on-surface);
  color: var(--nc-inverse-on-surface);
}

.btn-ghost-light {
  background-color: transparent;
  color: var(--nc-inverse-on-surface);
  border-color: rgba(255, 237, 231, 0.5);
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
  background-color: var(--nc-inverse-on-surface);
  color: var(--nc-on-surface);
  border-color: var(--nc-inverse-on-surface);
}

/* Text link with a travelling arrow — motion via position, not shadow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nc-primary);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--nc-outline-variant);
  transition: border-color var(--nc-duration-fast) ease;
}

.link-arrow .material-symbols-outlined {
  font-size: 18px;
  transition: transform var(--nc-duration-fast) var(--nc-ease-editorial);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  border-bottom-color: var(--nc-primary);
}

.link-arrow:hover .material-symbols-outlined,
.link-arrow:focus-visible .material-symbols-outlined {
  transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   7. FORM CONTROLS — single 1px bottom rule, thickens to 2px on focus
   -------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nc-on-surface-variant);
}

.field-input,
.field-textarea,
.field-select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--nc-on-surface);
  padding: 0 0 12px 0;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--nc-on-surface);
  transition: border-color var(--nc-duration-fast) ease,
    border-width var(--nc-duration-fast) ease;
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--nc-outline);
  opacity: 1;
}

.field-input:focus,
.field-textarea:focus,
.field-select:focus {
  outline: none;
  border-bottom-width: 2px;
  border-bottom-color: var(--nc-primary-container);
  padding-bottom: 11px;
}

.field-textarea {
  resize: vertical;
  min-height: 96px;
}

.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b4137' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
  padding-right: 24px;
  cursor: pointer;
}

.field-error {
  color: var(--nc-error);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 18px;
  min-height: 18px;
}

.field-input[aria-invalid="true"],
.field-textarea[aria-invalid="true"],
.field-select[aria-invalid="true"] {
  border-bottom-color: var(--nc-error);
  border-bottom-width: 2px;
}

/* Form / info note. Previously a mint-green panel (#c5e7d6) with green text —
   a third hue with no other presence on the site. Now the single light surface
   with a brand-orange rule, so emphasis comes from the 4px bar, not from a new
   background colour. */
.form-note {
  background: var(--nc-surface);
  color: var(--nc-on-surface);
  border: 1px solid var(--nc-outline-variant);
  border-left: 4px solid var(--nc-primary);
  padding: 16px 20px;
}

/* Consent checkbox — square, sharp, brand orange when checked. */
.nc-check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--nc-on-surface);
  background: transparent;
  flex: 0 0 auto;
  margin-top: 3px;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--nc-duration-fast) ease,
    border-color var(--nc-duration-fast) ease;
}

.nc-check::after {
  content: "";
  width: 6px;
  height: 6px;
  background: #ffffff;
  transform: scale(0);
  transition: transform var(--nc-duration-fast) var(--nc-ease-editorial);
}

.nc-check:checked {
  background: var(--nc-primary-container);
  border-color: var(--nc-primary-container);
}

.nc-check:checked::after {
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   8. MEDIA — image reveal & gallery behaviour
   -------------------------------------------------------------------------- */
.media-frame {
  position: relative;
  overflow: hidden;
  background-color: var(--nc-surface-container-high);
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image reveal: clip + scale settle. Understated, gallery-like. */
.image-reveal img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path var(--nc-duration-slow) var(--nc-ease-editorial),
    transform 1600ms var(--nc-ease-editorial);
}

.image-reveal.is-visible img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* Fade-up entrance for section content. */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--nc-duration-base) var(--nc-ease-editorial),
    transform var(--nc-duration-base) var(--nc-ease-editorial);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up[data-delay="1"] { transition-delay: 100ms; }
.fade-up[data-delay="2"] { transition-delay: 200ms; }
.fade-up[data-delay="3"] { transition-delay: 300ms; }
.fade-up[data-delay="4"] { transition-delay: 400ms; }
.fade-up[data-delay="5"] { transition-delay: 500ms; }

/* --------------------------------------------------------------------------
   9. COMPONENTS
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Numbered index row. Replaces the icon-card grid that used to list the six
   disciplines on the homepage.

   WHY THIS EXISTS: the .discipline card below was being reused in four separate
   sections, which is the templated-card-grid pattern the brief forbids. This
   gives the homepage list its own shape.

   The rule is on the TOP edge, not the bottom, so the first row in each column
   is capped and the list reads as a set of entries rather than a stack of
   cards. No fill, no border on the sides, no shadow: the hairline and the
   ordinal do all the work. Do not add a background here to make the rows
   "pop" - that reintroduces a third surface colour (see SURFACES note above).
   -------------------------------------------------------------------------- */
.nc-index-list {
  /* Suppress the browser's own numbering: the ordinals are typeset as real
     elements so they can use the label-caps token. */
  list-style: none;
  counter-reset: none;
}

.nc-index-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 0;
  border-top: 1px solid var(--nc-outline-variant);
}

.nc-index-row__ord {
  /* Accent-coloured ordinal. This is the only coloured element in the row,
     taking over the role the Material icon used to play, at a fraction of the
     visual weight and while actually conveying position in the list. */
  color: var(--nc-primary);
  margin: 0;
}

/* Comfortable measure for the prose without needing a utility on every row. */
.nc-index-row > .body-md {
  max-width: 46ch;
}

@media (min-width: 768px) {
  /* Two columns: give the right column breathing room from the left. */
  .nc-index-list > .nc-index-row:nth-child(even) {
    padding-left: 0;
  }
}

/* Discipline (service) entry — no chrome, only a bottom rule.
   STILL IN USE, but now in ONE place only: the three utility tiles on
   contact.php (call / mail / hours), where the icon is functional wayfinding
   rather than decoration. Do not reintroduce this component elsewhere without
   re-reading anti-slop rule 1. */
.discipline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0;
  border-bottom: 1px solid var(--nc-outline-variant);
  transition: border-color var(--nc-duration-fast) ease;
}

.discipline:hover {
  border-bottom-color: var(--nc-primary-container);
}

.discipline__icon {
  color: var(--nc-primary);
  font-size: 32px;
  transition: color var(--nc-duration-fast) ease,
    transform var(--nc-duration-base) var(--nc-ease-editorial);
}

.discipline:hover .discipline__icon {
  color: var(--nc-primary-container);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Team member entry. Used by the "Our team" grid on about.php.

   2:3 PORTRAIT (client-specified). Was 1/1 square. A 2:3 upright crop is the
   editorial portrait proportion - it gives the standing figure vertical room
   instead of cropping tight to the head, which is what a square forces.

   Flat, no radius, no shadow, consistent with the rest of the system. The photo
   is deliberately NOT circular: circular avatar grids are the exact templated
   pattern the anti-slop rules call out.

   ⚠️ aspect-ratio governs the BOX only. object-fit: cover then scales the file
   to fill that box and crops the overflow, anchored by object-position.

   MEASURED source dimensions (do not guess these - they were read off the
   actual files, and the crop direction differs per portrait):
     chandrashekar  636x848   ratio 0.750  -> sides cropped, loses 11.1% width
     naveenkumar    731x1021  ratio 0.716  -> sides cropped, loses  6.9% width
     sushma         901x1600  ratio 0.563  -> TOP/BOTTOM cropped, loses 15.5% height
     vinay         1024x1536  ratio 0.667  -> exact 2:3, no crop at all

   So object-position must be handled in two groups, NOT globally:
   - The side-cropped files keep 50% horizontally (subjects are centred), and the
     vertical value is irrelevant because no height is discarded.
   - Sushma is the only top/bottom crop. Her head sits 23-45% down the frame, so
     an upward bias would slice it. She is anchored low instead, taking the 15.5%
     off the bottom (empty seat/floor) and keeping the face safe.

   If a portrait is ever replaced, RE-MEASURE it - the safe object-position
   depends entirely on the new file's ratio.

   The width/height attributes on about.php's <img> tags are 320x480 to match
   this ratio; if the ratio changes, change those too or the browser reserves the
   wrong space and the grid shifts as the images load.
   -------------------------------------------------------------------------- */
.nc-person__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  /* Default: centre. Correct for the side-cropped and exact-fit portraits. */
  object-position: 50% 50%;
  /* Placeholder tone while the portrait loads, so the grid does not flash. */
  background: var(--nc-outline-variant);
}

/* Sushma's portrait is 901x1600 (9:16), the only source taller than the 2:3 box,
   so it is the only one cropped vertically (-15.5% of height).

   MEASURED from the source file: her hair starts 23% down, chin at 45%, and the
   bottom 15% is plain desk surface. So the crop should come almost entirely off
   the BOTTOM while leaving her generous headroom intact.

   object-position: 50% 0 does exactly that - anchor the top edge of the image to
   the top of the box, discard the excess from the bottom. An earlier value of
   18% pulled the frame upward and needlessly ate into her headroom. */
.nc-person__photo--tall {
  object-position: 50% 0;
}

/* --------------------------------------------------------------------------
   HEADROOM MODIFIER - for source files that are framed tight to the top.

   ⚠️ THIS IS NOT A CROPPING PROBLEM AND object-position CANNOT FIX IT.
   Naveen Kumar's source file (731x1021) has his hair starting 0.5% from the top
   edge: the tight framing is baked into the photograph, and at 2:3 it loses 0%
   of its height, so there is nothing being cropped away to recover. No CSS can
   invent headroom that does not exist in the file.

   The honest fix is to letterbox rather than fill: object-fit: contain shows the
   ENTIRE photograph inside the 2:3 box, on the placeholder tone, so nothing is
   clipped and the top of his head is safely inside the frame. The trade-off is
   thin bands at the sides, which reads as deliberate matting against the flat
   background and is far better than a sliced head.

   ✅ THE REAL FIX is a reshoot or a re-crop of the source file with proper
   headroom, after which this modifier should be removed from about.php.
   -------------------------------------------------------------------------- */
.nc-person__photo--contain {
  object-fit: contain;
  object-position: 50% 50%;
}

/* Portfolio card — borderless; the image is the entire component.

   ⚠️ SCOPE NOTE: no page currently renders .project-card. portfolio.php was
   deleted (its ten projects were invented) and the homepage project grid was
   replaced with the construction-foundation list. These rules, and .filter-chip
   below, are retained for the real portfolio that will be built once there are
   photographed, client-approved interiors projects. Do not delete them, and do
   not reuse them to dress up placeholder work. */
.project-card {
  display: block;
  position: relative;
}

.project-card__frame {
  position: relative;
  overflow: hidden;
  background-color: var(--nc-surface-container-high);
}

.project-card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--nc-ease-editorial);
}

.project-card:hover .project-card__frame img,
.project-card:focus-visible .project-card__frame img {
  transform: scale(1.04);
}

.project-card__veil {
  position: absolute;
  inset: 0;
  background: rgba(39, 24, 18, 0.34);
  opacity: 0;
  transition: opacity var(--nc-duration-fast) ease;
}

.project-card:hover .project-card__veil,
.project-card:focus-visible .project-card__veil {
  opacity: 1;
}

.project-card__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 32px;
  color: var(--nc-inverse-on-surface);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--nc-duration-fast) ease,
    transform var(--nc-duration-base) var(--nc-ease-editorial);
}

.project-card:hover .project-card__overlay,
.project-card:focus-visible .project-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Below-image caption sits asymmetrically, with generous padding. */
.project-card__caption {
  padding: 24px 0 0 0;
}

@media (min-width: 768px) {
  .project-card__caption {
    padding: 28px 40px 0 0;
  }
}

.project-card.is-hidden {
  display: none;
}

/* Filter chips — sharp, underline-driven.

   ⚠️ SCOPE NOTE (same as .project-card above): nothing renders these. The chip
   bar lived on portfolio.php (deleted) and on the homepage project grid
   (replaced by the #foundation construction list). js/main.js
   initPortfolioFilter() still drives them and still exits cleanly when the
   selectors are absent — see the note there. Retained together with
   .project-card for a future portfolio built from real, photographed,
   client-approved projects. */
.filter-chip {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nc-on-surface-variant);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 8px 0;
  cursor: pointer;
  transition: color var(--nc-duration-fast) ease,
    border-color var(--nc-duration-fast) ease;
}

.filter-chip:hover {
  color: var(--nc-primary);
  border-bottom-color: var(--nc-primary-container);
}

.filter-chip.is-active {
  color: var(--nc-primary);
  border-bottom-color: var(--nc-primary-container);
}

/* Process step — numeral led, divided by a hairline. */
.process-step {
  display: grid;
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--nc-outline-variant);
}

@media (min-width: 768px) {
  .process-step {
    grid-template-columns: 120px 1fr 1fr;
    gap: 48px;
    padding: 56px 0;
  }
}

.process-step__num {
  color: var(--nc-outline-variant);
  transition: color var(--nc-duration-base) ease;
}

.process-step:hover .process-step__num {
  color: var(--nc-primary-container);
}

/* Bullet lists — 4px brand orange squares, hairline dividers. */
.nc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nc-list > li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--nc-outline-variant);
}

.nc-list > li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--nc-primary-container);
  flex: 0 0 auto;
  margin-top: 10px;
}

.nc-list--light > li {
  border-bottom-color: rgba(255, 237, 231, 0.18);
}

/* Testimonial — quiet, no card chrome. */
.testimonial {
  display: none;
  flex-direction: column;
  gap: 32px;
}

.testimonial.is-active {
  display: flex;
  animation: nc-quiet-in 600ms var(--nc-ease-editorial) both;
}

@keyframes nc-quiet-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.testimonial__quote {
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0.015em;
  color: var(--nc-on-surface);
  margin: 0;
}

@media (min-width: 768px) {
  .testimonial__quote {
    font-size: 44px;
    line-height: 52px;
  }
}

.carousel-dot {
  width: 28px;
  height: 2px;
  background: var(--nc-outline-variant);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--nc-duration-fast) ease;
}

.carousel-dot.is-active {
  background: var(--nc-primary-container);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--nc-on-surface);
  background: transparent;
  color: var(--nc-on-surface);
  cursor: pointer;
  transition: background-color var(--nc-duration-fast) ease,
    color var(--nc-duration-fast) ease;
}

.icon-btn:hover {
  background: var(--nc-on-surface);
  color: var(--nc-inverse-on-surface);
}

/* Card surface. This used to be pure white (#ffffff) sitting on a peach tint —
   one of the extra backgrounds removed in the two-colour pass. It now shares the
   single light surface with the section around it, so the card is defined ENTIRELY
   by its 1px outline-variant border, which is the same separation device used
   between sections. Do not give this a distinct fill to make it "pop": that
   reintroduces a third background. */
.elevated-flat {
  border: 1px solid var(--nc-outline-variant);
  background: var(--nc-surface);
}

/* Stat cell in the hero credential strip. */
.stat-cell {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 237, 231, 0.24);
}

@media (min-width: 768px) {
  .stat-cell {
    border-top: 0;
    border-left: 1px solid rgba(255, 237, 231, 0.24);
    padding: 0 0 0 28px;
  }
}

/* FAQ — hairline separated disclosure, no chrome. */
.faq-item {
  border-bottom: 1px solid var(--nc-outline-variant);
}

.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .faq-icon {
  color: var(--nc-primary);
  transition: transform var(--nc-duration-fast) var(--nc-ease-editorial);
  flex: 0 0 auto;
}

.faq-item[open] summary .faq-icon {
  transform: rotate(45deg);
}

.faq-item__body {
  padding: 0 0 28px 0;
  max-width: 68ch;
  color: var(--nc-on-surface-variant);
}

/* `.social-link` REMOVED with the old footer. The supplied footer styles its
   own circular social buttons via `.footer-socials a` in css/site-footer.css,
   and the supplied top bar uses `.top-social-bar a` in css/nav.css. */

.footer-link {
  color: var(--nc-inverse-on-surface);
  opacity: 0.78;
  transition: opacity var(--nc-duration-fast) ease, color var(--nc-duration-fast) ease;
}

.footer-link:hover {
  opacity: 1;
  color: var(--nc-inverse-primary);
}

/* Material Symbols axis defaults. */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  user-select: none;
}

.ms-fill {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* --------------------------------------------------------------------------
   10. PAGE-LEVEL PIECES
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--nc-inverse-surface);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.08);
}

.hero.is-ready .hero__media img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path 1500ms var(--nc-ease-editorial),
    transform 2400ms var(--nc-ease-editorial);
}

/* Flat scrim, architectural rather than a gradient panel effect on the design
   itself. This is the DEFAULT (dark) scrim, kept for any future hero that wants
   light type. The homepage now overrides it with a WHITE overlay: see the
   HERO OVERLAY block in css/pages.css. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: rgba(39, 24, 18, 0.52);
}

.hero__content {
  position: relative;
  width: 100%;
  padding-block: 120px 48px;
}

@media (min-width: 768px) {
  .hero__content {
    padding-block: 160px 64px;
  }
}

/* Inner-page hero. Uses the single light surface; the 1px bottom hairline is
   what separates it from the section beneath, not a tint change. */
.page-hero {
  background-color: var(--nc-surface);
  border-bottom: 1px solid var(--nc-outline-variant);
  padding-block: 72px;
}

@media (min-width: 768px) {
  .page-hero {
    padding-block: 120px;
  }
}

.breadcrumb-sep {
  color: var(--nc-outline);
  padding-inline: 10px;
}

/* Inverse (charcoal) band. */
.band-inverse {
  background-color: var(--nc-inverse-surface);
  color: var(--nc-inverse-on-surface);
}

.band-inverse .body-md,
.band-inverse .body-lg {
  color: rgba(255, 237, 231, 0.82);
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up {
    opacity: 1;
    transform: none;
  }
  .image-reveal img,
  .hero__media img {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   12. PRINT
   -------------------------------------------------------------------------- */
@media print {
  /* Selectors updated for the supplied header and footer. The old
     .nc-header / .nc-mobile-nav / .social-link hooks no longer exist, so the
     previous list silently stopped hiding the navigation on print. */
  .top-social-bar,
  .navbar-no-shadow,
  .section-9,
  .footer-socials,
  .btn {
    display: none !important;
  }
  body {
    background: #ffffff;
    color: #000000;
  }
}