/* =====================================================================
   DIPL website: one stylesheet for every page.
   Mobile-first: the plain rules are for phones (360 px and up).
   The @media (min-width: ...) blocks further down widen the layout
   for tablets (768 px) and laptops (1024 px and up).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Fonts (self-hosted in assets/fonts/)
   --------------------------------------------------------------------- */

@font-face {
  font-family: "Unbounded";
  src: url("../assets/fonts/unbounded-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/jost-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------
   2. Brand settings (change a value here and it changes everywhere)
   --------------------------------------------------------------------- */

:root {
  /* Brand colours (from the DIPL brand guidelines) */
  --clay: #94533A;
  --offwhite: #F7F1EA;
  --charcoal: #2B2522;
  --white: #FFFFFF;

  /* Tints: only for borders and hover states */
  --clay-dark: #7A4430;       /* button hover */
  --clay-tint: #EADBD1;       /* light borders, outline-button hover */
  --charcoal-tint: #D9D1CA;   /* thin dividers on light backgrounds */
  --charcoal-line: #4A413C;   /* thin dividers on charcoal */

  /* Fonts */
  --font-display: "Unbounded", "Arial Black", sans-serif; /* headlines and project names only */
  --font-body: "Jost", "Segoe UI", Arial, sans-serif;     /* everything else */

  /* Spacing scale */
  --space-1: 0.25rem;  /*  4 px */
  --space-2: 0.5rem;   /*  8 px */
  --space-3: 0.75rem;  /* 12 px */
  --space-4: 1rem;     /* 16 px */
  --space-5: 1.5rem;   /* 24 px */
  --space-6: 2rem;     /* 32 px */
  --space-7: 3rem;     /* 48 px */
  --space-8: 4.5rem;   /* 72 px */

  /* Layout */
  --max-width: 1200px;     /* widest the content ever gets */
  --gutter: 20px;          /* space at the left and right edge of the screen */
  --section-space: 4rem;   /* space above and below each section (phones) */
  --radius: 14px;          /* rounded corners on cards and images */
  --header-height: 72px;
  --bottom-bar-height: 64px;

  /* Shadows */
  --shadow: 0 1px 2px rgba(43, 37, 34, 0.06), 0 4px 16px rgba(43, 37, 34, 0.06);
  --shadow-lift: 0 2px 4px rgba(43, 37, 34, 0.08), 0 14px 32px rgba(43, 37, 34, 0.14);

  /* Motion: subtle, 0.2 to 0.5 seconds */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed: 0.3s;
}


/* ---------------------------------------------------------------------
   3. Base styles
   --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* When a link jumps to a section, leave room for the sticky header */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;  /* 17 px: easy to read on phones */
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word; /* long words (like email addresses) wrap instead of overflowing */
  /* Room for the sticky Call / WhatsApp bar on phones */
  padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
  color: var(--charcoal);
}

/* Headlines use Unbounded */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.75rem, 6vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 4.5vw, 2.25rem);
}

/* Smaller headings stay in Jost */
h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-4);
}

address {
  font-style: normal; /* browsers put addresses in italics by default */
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--clay);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--clay-dark);
}

/* A clear outline when moving around the page with the keyboard */
:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}

.on-dark :focus-visible,
.site-footer :focus-visible,
.band :focus-visible {
  outline-color: var(--white);
}

/* Text that only screen readers announce */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link: appears only when reached with the keyboard */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--clay);
  color: var(--white);
  border-radius: 8px;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-2);
  color: var(--white);
}


/* ---------------------------------------------------------------------
   4. Layout helpers
   --------------------------------------------------------------------- */

/* Centres content and stops it getting wider than about 1200 px */
.container {
  width: 100%;
  max-width: calc(var(--max-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
}

.section--white {
  background: var(--white);
}

/* Safeguard: items in a grid may shrink to the screen width. Without this,
   wide content (a long table, a big image) can stretch its column and push
   the whole page wider than a phone screen. */
.project-grid > *,
.contact-grid > *,
.plans-grid > *,
.plan-thumbs > *,
.footer-grid > *,
.numbered > *,
.spec-grid > *,
.facts > * {
  min-width: 0;
}

/* Section pattern: small spaced-capital label, then a large heading */
.section-head {
  margin-bottom: var(--space-6);
  max-width: 46rem;
}

.label {
  display: block;
  margin: 0 0 var(--space-3);
  color: var(--clay);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.on-dark .label,
.band .label {
  color: var(--white); /* clay text would be invisible on clay or dark backgrounds */
}

.lead {
  font-size: 1.125rem;
  margin-top: var(--space-4);
}


/* ---------------------------------------------------------------------
   5. Placeholders: "[TBD: ...]" boxes for content still to come
   --------------------------------------------------------------------- */

.tbd {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 2px dashed var(--clay);
  border-radius: 8px;
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

/* Small placeholder that sits inside a sentence */
.tbd--inline {
  display: inline;
  padding: 0.1em var(--space-2);
  border-width: 1.5px;
  border-radius: 6px;
  font-size: 0.9375rem;
  /* if it wraps onto two lines, draw the dashed box on both lines */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Larger placeholder used in place of a headline */
.tbd--heading {
  font-size: 1.125rem;
  padding: var(--space-4) var(--space-5);
}

/* Placeholders on clay or charcoal backgrounds */
.on-dark .tbd,
.band .tbd,
.site-footer .tbd {
  border-color: var(--white);
  color: var(--white);
}


/* ---------------------------------------------------------------------
   6. Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;           /* big enough to tap comfortably */
  padding: 0 var(--space-5);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Solid clay: the main action */
.btn--primary {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--clay-dark);
  border-color: var(--clay-dark);
  color: var(--white);
}

/* Light outline with an icon: the second action */
.btn--outline {
  background: transparent;
  border-color: var(--clay);
  color: var(--clay);
}

.btn--outline:hover {
  background: var(--clay-tint);
  color: var(--clay-dark);
}

/* White versions for clay or charcoal backgrounds */
.btn--white {
  background: var(--white);
  border-color: var(--white);
  color: var(--clay);
}

.btn--white:hover {
  background: var(--offwhite);
  border-color: var(--offwhite);
  color: var(--clay-dark);
}

.btn--outline-white {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}

.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

.btn--small {
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: 0.9375rem;
}

/* A button whose link is not ready yet (for example WhatsApp before
   the number is confirmed). The dashed border marks it as a placeholder. */
.btn.is-tbd {
  border-style: dashed;
}

.btn .tbd-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Two buttons side by side, wrapping onto two lines on small phones */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}


/* ---------------------------------------------------------------------
   7. Header and navigation
   --------------------------------------------------------------------- */

/* No line under the header at the top of the page; main.js adds
   "is-scrolled" once the page moves, and a faint line fades in. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--offwhite);
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--charcoal-tint);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height);
}

/* Logo link: the padding keeps the "2X" empty space around the logo */
.site-logo {
  display: block;
  flex-shrink: 0;
  padding-block: 18px;
  padding-right: 18px;
}

.site-logo img {
  width: 160px;   /* never smaller than 160 px */
  height: auto;
}

/* Desktop links are hidden on phones; the menu button shows instead */
.site-nav {
  display: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  color: var(--charcoal);
  font-weight: 500;
  text-decoration: none;
  padding-block: var(--space-2);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--clay);
}

.header-call {
  display: none; /* phones use the bottom bar instead */
}

/* Menu button (phones only) */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  margin-right: -8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
}

.menu-toggle svg {
  width: 26px;
  height: 26px;
}

.menu-toggle .icon-close,
.menu-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* The menu panel that drops down under the header on phones */
.mobile-menu {
  border-top: 1px solid var(--charcoal-tint);
  background: var(--offwhite);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu ul {
  margin: 0;
  /* top and bottom only: the left/right space comes from .container,
     so the links line up with the logo and the rest of the page */
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
  list-style: none;
}

.mobile-menu a {
  display: block;
  padding: var(--space-3) 0;
  color: var(--charcoal);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--charcoal-tint);
}

.mobile-menu li:last-child a {
  border-bottom: 0;
}

/* Sticky Call / WhatsApp bar at the bottom of phone screens */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--charcoal-tint);
  box-shadow: 0 -4px 16px rgba(43, 37, 34, 0.06);
}

.bottom-bar .btn {
  width: 100%;
  padding: 0 var(--space-3);
}

/* Breadcrumb (project page) */
.breadcrumb {
  padding-top: var(--space-5);
  font-size: 0.9375rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin: 0 var(--space-2);
  color: var(--charcoal);
}

.breadcrumb a {
  color: var(--charcoal);
}

.breadcrumb [aria-current="page"] {
  color: var(--clay);
  font-weight: 500;
}


/* ---------------------------------------------------------------------
   8. Images, captions and cards
   --------------------------------------------------------------------- */

figure {
  margin: 0;
}

/* Small grey line under renders, plans and specifications (legal wording) */
.caption {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--charcoal);
}

.band .caption,
.on-dark .caption {
  color: var(--white);
}

.render {
  max-width: 870px; /* renders are about 870 px wide: never show them wider */
}

.render img {
  width: 100%;
  border-radius: var(--radius);
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}


/* ---------------------------------------------------------------------
   9. Homepage: hero
   --------------------------------------------------------------------- */

.hero {
  padding-top: var(--space-7);
  padding-bottom: var(--section-space);
}

.hero__text {
  max-width: 44rem;
}

.hero__text .tbd--heading {
  margin-top: var(--space-3);
}

.hero__visuals {
  margin-top: var(--space-7);
}

/* The clay line drawing that draws itself on page load, full width.
   On short laptop screens it is also kept low enough that the whole
   building fits on the first screen (it then sits centred). */
.hero__drawing svg {
  width: 100%;
  height: auto;
  max-height: max(280px, calc(100vh - 400px));
}

/* Line thickness. The drawing file uses four line weights (0.45, 0.6, 1.1
   and 1.4). On a phone the drawing is small, so the lines would be almost
   invisible; these values make them a little thicker while keeping the
   thin/medium/thick difference. Numbers are in the drawing's own units
   (the drawing is 992 units wide). */
.hero__drawing [stroke-width="0.45"] { stroke-width: 1.5; }
.hero__drawing [stroke-width="0.6"]  { stroke-width: 2; }
.hero__drawing [stroke-width="1.1"]  { stroke-width: 3.4; }
.hero__drawing [stroke-width="1.4"]  { stroke-width: 4.2; }

/* Before the drawing animation starts, hide the lines so they don't flash.
   (The "js" class is only added when JavaScript is running, so without
   JavaScript the drawing simply shows straight away.) */
.js .draw-on-load {
  opacity: 0;
}

.js .draw-on-load.is-ready {
  opacity: 1;
}


/* ---------------------------------------------------------------------
   10. Homepage: numbered points, project cards, steps, FAQ
   --------------------------------------------------------------------- */

/* Numbered items: 01 / 02 / 03 */
.numbered {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbered li {
  padding-top: var(--space-4);
  border-top: 1px solid var(--charcoal-tint);
}

.numbered__title {
  margin-bottom: var(--space-2);
}

.numbered__num {
  display: block;
  margin-bottom: var(--space-3);
  color: var(--clay);
  font-family: var(--font-body);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Project cards */
.project-grid {
  display: grid;
  gap: var(--space-5);
}

.project-card {
  display: flex;
  flex-direction: column;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.project-card__image img {
  width: 100%;
  aspect-ratio: 868 / 521;
  object-fit: cover;
}

.project-card__image .caption {
  margin: 0;
  padding: var(--space-2) var(--space-5) 0;
}

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-5);
}

.project-card__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
}

.project-card__facts {
  margin: 0;
  font-weight: 500;
}

/* "STATUS" label always on its own line above the status text, so it sits
   at the same height in every card */
.project-card__status {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.project-card__status strong {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* The whole card opens the project: the "View project" link is stretched
   (invisibly) over the entire card, so a tap anywhere on it works.
   There is still only one link per card for keyboards and screen readers. */
.project-card {
  position: relative;
}

.project-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
  .project-card:has(.project-card__link) {
    cursor: pointer;
  }

  /* Hovering anywhere on the card also darkens the button */
  .project-card:hover .project-card__link {
    background: var(--clay-dark);
    border-color: var(--clay-dark);
  }
}

/* "Coming soon" card for project 2: no details on purpose */
.project-card--soon {
  justify-content: center;
  align-items: center;
  min-height: 16rem;
  padding: var(--space-6);
  background: transparent;
  border: 1.5px solid var(--charcoal-tint);
  box-shadow: none;
  text-align: center;
}

.project-card--soon .project-card__name {
  color: var(--clay);
}

/* Cards lift slightly on hover, on laptops with a mouse only */
@media (hover: hover) and (pointer: fine) {
  .project-card:not(.project-card--soon):hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
}

/* FAQ: tap a question to open its answer */
.faq {
  border-top: 1px solid var(--charcoal-tint);
}

.faq details {
  border-bottom: 1px solid var(--charcoal-tint);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
}

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

/* The plus sign that turns into a minus when open */
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--clay);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--speed) var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding-bottom: var(--space-5);
}


/* ---------------------------------------------------------------------
   11. Contact section and enquiry form
   --------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--space-6);
}

.form-card {
  padding: var(--space-5);
}

.form-row {
  margin-bottom: var(--space-4);
}

.form-row label,
.form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: 500;
}

.form-row .optional {
  font-weight: 400;
  font-size: 0.875rem;
}

.form-row input,
.form-row select,
.form-row textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--charcoal-tint);
  border-radius: 10px;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1rem; /* 16 px stops iPhones zooming in when typing */
  line-height: 1.4;
}

.form-row textarea {
  min-height: 7rem;
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--clay);
  outline: 2px solid var(--clay);
  outline-offset: 0;
}

/* Highlight a field the visitor still needs to fill in */
.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea {
  border-color: var(--clay);
  border-width: 2px;
}

.field-error {
  display: block;
  margin-top: var(--space-1);
  color: var(--clay);
  font-size: 0.875rem;
  font-weight: 500;
}

.field-error:empty {
  display: none;
}

/* Consent tick box */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.consent input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--clay);
}

.consent label {
  margin: 0;
  font-weight: 400;
}

/* Web3Forms spam trap: hidden from people, filled in only by robots */
.honeypot {
  display: none !important;
}

.form-card .btn {
  width: 100%;
  margin-top: var(--space-2);
}

/* Message shown after pressing "Send" */
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--offwhite);
  border-left: 4px solid var(--clay);
}

.form-status[hidden] {
  display: none;
}

.form-status a {
  font-weight: 600;
}

/* Contact details next to the form */
.contact-list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
}

.contact-list dt {
  margin-bottom: var(--space-1);
}

.contact-list dd {
  margin: 0;
  overflow-wrap: anywhere; /* lets the long email address wrap on small phones */
}

.contact-list .phone-link {
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
}


/* ---------------------------------------------------------------------
   12. Clay band (closing call to action, project enquiry prompt)
   --------------------------------------------------------------------- */

.band {
  position: relative;
  overflow: hidden;
  background: var(--clay);
  color: var(--white);
  padding-block: var(--space-8);
}

/* The white line drawing, faint, in the background */
.band__drawing {
  position: absolute;
  right: -10%;
  bottom: 0;
  width: 120%;
  max-width: none;
  opacity: 0.16;
  pointer-events: none;
}

.band__inner {
  position: relative; /* sits above the drawing */
}

.band h2 {
  color: var(--white);
}

.band .btn-row {
  margin-top: var(--space-5);
}

.band__caption {
  margin-top: var(--space-6);
}


/* ---------------------------------------------------------------------
   13. Footer
   --------------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal);
  color: var(--offwhite);
  padding-top: var(--space-7);
  padding-bottom: var(--space-6);
  font-size: 0.9375rem;
}

.site-footer a {
  color: var(--white);
}

.site-footer a:hover {
  color: var(--clay-tint);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
}

/* Footer logo: the "2X" empty space is kept by the padding */
.footer-logo {
  display: inline-block;
  padding: 18px 18px 18px 0;
}

.footer-logo img {
  height: auto;
}

/* Wide tagline logo on wide screens, primary logo on phones */
.footer-logo__wide {
  display: none;
  width: 300px;
}

.footer-logo__narrow {
  width: 160px;
}

.footer-about {
  margin-top: var(--space-3);
  max-width: 24rem;
}

.footer-heading {
  margin: 0 0 var(--space-3);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li + li {
  margin-top: var(--space-2);
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--charcoal-line);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.footer-legal p {
  margin-bottom: var(--space-4);
}


/* ---------------------------------------------------------------------
   14. Project page
   --------------------------------------------------------------------- */

.project-hero {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.project-hero h1 {
  margin-bottom: var(--space-5);
}

.project-hero .tbd,
.project-hero .lead {
  max-width: 44rem;
}

/* Key facts strip */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--charcoal-tint);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Thin lines to the right of and below each fact (the outer edges are
   trimmed by the rounded box, so only the inner lines show) */
.facts > div {
  padding: var(--space-4);
  box-shadow: 1px 0 0 var(--charcoal-tint), 0 1px 0 var(--charcoal-tint);
}

.facts dt {
  margin-bottom: var(--space-1);
  color: var(--clay);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
}

/* Long facts (configuration) take the full row on phones */
.facts .facts__wide {
  grid-column: 1 / -1;
}

/* Tables (areas, room sizes) */
.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.data-table caption {
  padding-bottom: var(--space-3);
  text-align: left;
  font-weight: 600;
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--charcoal-tint);
  vertical-align: top;
}

.data-table tr:last-child th,
.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table thead th {
  color: var(--clay);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.data-table tbody th {
  font-weight: 500;
}

.data-table td {
  white-space: nowrap;
}

.area-table {
  max-width: 34rem;
}

/* Day / dusk comparison slider */
.compare {
  position: relative;
  max-width: 870px;
  aspect-ratio: 868 / 521;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;      /* let the page still scroll up and down */
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
  background: var(--charcoal);
}

.compare picture,
.compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The day image sits on top; only its left part shows */
.compare__top {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

/* The day render is a little taller than the dusk one (797 x 533 against
   868 x 521) but frames the building the same way across its width.
   Pinning it to the top trims only the extra strip at the bottom, so the
   two buildings line up. */
.compare__top img {
  object-position: 50% 0;
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
}

/* The thin white line */
.compare__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

/* The round grip in the middle */
.compare__grip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--clay);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.compare__grip svg {
  width: 22px;
  height: 22px;
}

.compare__handle:focus-visible {
  outline: none;
}

.compare__handle:focus-visible .compare__grip {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* "Day" and "Dusk" labels in the corners */
.compare__tag {
  position: absolute;
  top: var(--space-3);
  z-index: 1;
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.compare__tag--day {
  left: var(--space-3);
}

.compare__tag--dusk {
  right: var(--space-3);
}

/* Floor plans */
.plans-grid {
  display: grid;
  gap: var(--space-6);
}

.plan-thumbs {
  display: grid;
  gap: var(--space-5);
}

.plan {
  padding: var(--space-4);
}

.plan h3 {
  margin-bottom: var(--space-3);
}

.plan__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--charcoal-tint);
  border-radius: 10px;
  background: var(--white);
  cursor: zoom-in;
  overflow: hidden;
}

.plan__open img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--white);
}

.plan .btn-row {
  margin-top: var(--space-4);
}

/* Projects with a single portrait (tall) plan, like Godavari Residency:
   one column, plan not too wide */
.plans-grid.plans-grid--stacked {
  grid-template-columns: 1fr;
}

.plan-thumbs.plan-thumbs--single {
  grid-template-columns: 1fr;
  max-width: 560px;
}

.plan__open--portrait img {
  aspect-ratio: auto;
}

/* Small tables that must fit a phone without scrolling: allow wrapping */
.data-table--fit td {
  white-space: normal;
}

.plans-caption {
  margin-top: var(--space-5);
}

/* Specifications grid */
.spec-grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.spec {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.spec__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--offwhite);
  color: var(--clay); /* the icons use currentColor, so they turn clay */
}

.spec__icon svg {
  width: 28px;
  height: 28px;
}

.spec h3 {
  margin-bottom: var(--space-1);
  font-size: 1.0625rem;
}

.spec p {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.spec-caption {
  margin-top: var(--space-5);
}

/* Google Maps embed: squarer on phones so the map is big enough to use */
.map-frame {
  display: block;
  width: 100%;
  max-width: 870px;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
}

@media (min-width: 768px) {
  .map-frame {
    aspect-ratio: 16 / 10;
  }
}


/* ---------------------------------------------------------------------
   15. Floor plan viewer (lightbox)
   --------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(43, 37, 34, 0.94); /* charcoal, almost solid */
  color: var(--white);
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--gutter);
}

.lightbox__title {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}

.lightbox__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.lightbox__close svg {
  width: 28px;
  height: 28px;
}

/* The area that holds the plan; pinch or scroll to zoom, drag to move */
.lightbox__stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  touch-action: none; /* we handle pinch and drag ourselves */
}

.lightbox__img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: calc(100% - 2 * var(--gutter));
  max-height: calc(100% - 2 * var(--space-4));
  width: auto;
  height: auto;
  background: var(--white);
  border-radius: 6px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.lightbox__foot {
  padding: var(--space-3) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  font-size: 0.875rem;
  text-align: center;
}

.lightbox__hint {
  display: block;
  margin-top: var(--space-1);
  opacity: 0.85;
}

/* Stop the page behind the viewer from scrolling */
body.no-scroll {
  overflow: hidden;
}


/* ---------------------------------------------------------------------
   16. Simple text pages (privacy notice, 404)
   --------------------------------------------------------------------- */

.prose {
  max-width: 44rem;
}

.prose h1 {
  margin-bottom: var(--space-6);
}

.prose h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: clamp(1.125rem, 3.5vw, 1.375rem);
}

.prose ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--space-1);
}

.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
}


/* ---------------------------------------------------------------------
   17. Fade-up on scroll
   Sections marked "reveal" start slightly lower and invisible, then
   fade up when they scroll into view (main.js adds "is-visible").
   --------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* ---------------------------------------------------------------------
   18. Tablets: 768 px and wider
   --------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-space: 5.5rem;
  }

  /* No bottom bar on tablets and laptops */
  body {
    padding-bottom: 0;
  }

  .bottom-bar,
  .menu-toggle,
  .mobile-menu {
    display: none !important;
  }

  .site-nav {
    display: block;
  }

  .header-call {
    display: inline-flex;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .hero {
    padding-top: var(--space-6);
  }

  .hero__visuals {
    margin-top: var(--space-6);
  }

  /* Drawing is about twice as wide here, so the lines need less help */
  .hero__drawing [stroke-width="0.45"] { stroke-width: 0.85; }
  .hero__drawing [stroke-width="0.6"]  { stroke-width: 1.1; }
  .hero__drawing [stroke-width="1.1"]  { stroke-width: 2; }
  .hero__drawing [stroke-width="1.4"]  { stroke-width: 2.5; }

  .numbered {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .project-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Side-by-side project cards share the same rows (picture, name,
     description, facts, status, button), so each line sits at the same
     height in both cards even when one description is longer. */
  .project-card:not(.project-card--soon) {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: var(--space-3);
  }

  .project-card:not(.project-card--soon) .project-card__body {
    display: contents; /* its children join the card's shared rows */
  }

  .project-card:not(.project-card--soon) .project-card__body > * {
    margin-inline: var(--space-5);
    align-self: start; /* each line sits at the top of its shared row */
  }

  .project-card:not(.project-card--soon) .project-card__name {
    margin-top: var(--space-3);
  }

  .project-card:not(.project-card--soon) .btn {
    justify-self: start;
    align-self: end;
    margin-top: var(--space-2);
    margin-bottom: var(--space-5);
  }

  .form-card {
    padding: var(--space-6);
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-grid .footer-office {
    grid-column: 1 / -1;
  }

  .footer-logo__wide {
    display: block;
  }

  .footer-logo__narrow {
    display: none;
  }

  /* 12 facts in 3 columns = 4 full rows */
  .facts {
    grid-template-columns: repeat(3, 1fr);
  }

  .facts .facts__wide {
    grid-column: auto;
  }

  .spec-grid {
    grid-template-columns: 1fr 1fr;
  }

  .plan-thumbs {
    grid-template-columns: 1fr 1fr;
  }

  .compare__tag {
    top: var(--space-4);
  }
}


/* ---------------------------------------------------------------------
   19. Laptops: 1024 px and wider
   --------------------------------------------------------------------- */

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-space: 7rem;
  }

  /* Full-width drawing on laptops: close to the file's own line weights */
  .hero__drawing [stroke-width="0.45"] { stroke-width: 0.6; }
  .hero__drawing [stroke-width="0.6"]  { stroke-width: 0.8; }
  .hero__drawing [stroke-width="1.1"]  { stroke-width: 1.4; }
  .hero__drawing [stroke-width="1.4"]  { stroke-width: 1.8; }

  .contact-grid {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  }

  .footer-grid .footer-office {
    grid-column: auto;
  }

  .spec-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Plans on the left, room-size table on the right */
  .plans-grid {
    grid-template-columns: 1.7fr 1fr;
    align-items: start;
  }

  .band__drawing {
    right: -5%;
    width: 70%;
  }
}


/* ---------------------------------------------------------------------
   20. Reduced motion: if the visitor's phone or computer asks for less
   movement, switch off every animation and transition.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .draw-on-load {
    opacity: 1;
    transform: none;
  }

  .project-card:hover {
    transform: none !important;
  }
}