/* ============================================================
   SAMAHI GROUP - stylesheet
   ------------------------------------------------------------
   WHAT IS WHERE (search for the heading in capitals)

     TOKENS .............. all colours, fonts and sizes, one place
     BUTTONS ............. .btn, .btn--primary, .btn--ghost
     HEADER .............. top contact bar, logo, nav, mobile menu
     HERO ................ the dark opening band and capability panel
     CAPABILITY STRIP .... the solid blue four-column band
     WIND REGION ......... the A/B/C/D classification chart
     PHOTOGRAPHY ......... .shot / .gallery image frames
     DOME WIDTH RANGE .... the 6m to 16m chip row
     CARDS AND GRIDS ..... .card, .grid--3, .grid--4
     OWNERSHIP ........... buy / lease / rent-to-own cards
     PROCESS ............. the six numbered steps
     PROJECTS ............ .docket, the job title blocks
     SECTORS ............. the "Built for" chips
     FAQ ................. the expanding questions
     ENQUIRY ............. the form and contact panel
     FOOTER .............. closing CTA and footer
     SOCIAL LINKS ........ Facebook and Instagram buttons
     ADDRESS AUTOCOMPLETE  the Site location suggestion list

   To change a colour, edit TOKENS at the top. Every component reads
   from those, so one edit changes the whole site consistently.
   ============================================================ */

/* ============================================================
   SAMAHI GROUP
   Light-dominant corporate industrial. Dark and solid-blue bands
   used deliberately for emphasis, not as the default ground.
   Colour is scoped by band via .on-dark / .on-brand token blocks,
   so every component reads from the same token set as its surface.
   ============================================================ */
:root{
  color-scheme: light;

  /* light ground (default) */
  --ink:        #0E1620;   /* headings */
  --body:       #46586B;   /* running text */
  --body-2:     #63748A;   /* secondary */
  --line:       #DFE6EE;
  --line-2:     #C6D3E0;
  --surface:    #FFFFFF;   /* panels and cards */
  --surface-2:  #F4F6F9;   /* grey band ground */

  --brand:      #005FA5;   /* logo blue, solid fills */
  --brand-fg:   #005FA5;   /* brand used as type colour on this surface */
  --brand-dark: #004476;
  --brand-tint: #EAF2F9;


  --dark:       #0B121B;
  --dark-2:     #121C28;

  --maxw: 1180px;
  --display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* band-scoped token overrides */
.on-dark{
  --ink: #EEF3F8;
  --body: #A7B8C9;
  --body-2: #8598AB;
  --line: rgba(255,255,255,.13);
  --line-2: rgba(255,255,255,.24);
  --surface: #121C28;
  --brand-fg: #6CB8EC;
  color: var(--ink);
}
.on-brand{
  --ink: #FFFFFF;
  --body: rgba(255,255,255,.86);
  --body-2: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.26);
  --line-2: rgba(255,255,255,.36);
  --surface: rgba(255,255,255,.08);
  --brand-fg: #C6E1F5;
  color: var(--ink);
}

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

body{
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{ margin: 0; color: var(--ink); font-family: var(--display); text-wrap: balance; }
h1{ font-size: clamp(2.1rem, 5.1vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
h2{ font-size: clamp(1.65rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1.14; letter-spacing: -.022em; }
h3{ font-size: clamp(1.08rem, 2vw, 1.3rem); font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
h4{ font-size: 1rem; font-weight: 700; line-height: 1.4; letter-spacing: -.008em; }
p{ margin: 0; }
a{ color: var(--brand-fg); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
strong{ font-weight: 700; color: var(--ink); }
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- scaffold ---------- */
.wrap{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.band{ padding-block: clamp(64px, 8.5vw, 112px); background: var(--surface); }
.band--grey{ background: var(--surface-2); border-block: 1px solid var(--line); }
.band--dark{ background: var(--dark); }
.band--brand{ background: var(--brand); }

.eyebrow{
  display: flex; align-items: center; gap: 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-fg); margin-bottom: 18px;
}
.eyebrow::before{ content:""; width: 30px; height: 2px; background: currentColor; flex: none; }

.lede{ color: var(--body); font-size: clamp(1.02rem, 1.6vw, 1.15rem); max-width: 62ch; }
.section-head{ max-width: 64ch; margin-bottom: clamp(36px, 4.8vw, 56px); }
.section-head p{ margin-top: 18px; }

/* ---------- buttons: squared, not pills ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  padding: 14px 26px; border-radius: 3px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{ text-decoration: none; }
.btn--primary{ background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover{ background: var(--brand-dark); border-color: var(--brand-dark); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover{ border-color: var(--brand); color: var(--brand-fg); }
.on-dark .btn--ghost:hover, .on-brand .btn--ghost:hover{ border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,.08); }
.on-brand .btn--primary{ background: #fff; color: var(--brand); border-color: #fff; }
.on-brand .btn--primary:hover{ background: var(--brand-tint); border-color: var(--brand-tint); }
.btn--lg{ font-size: 16px; padding: 17px 32px; }

/* ---------- header ---------- */
.util{ background: var(--brand-dark); color: rgba(255,255,255,.88); font-size: 13px; }
.util__in{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-block: 9px; }
.util__in ul{ display: flex; flex-wrap: wrap; gap: 6px 22px; }
.util__in li{ display: flex; align-items: center; gap: 8px; }
.util svg{ width: 14px; height: 14px; opacity: .8; flex: none; }
.util a{ color: #fff; }
@media (max-width: 640px){ .util__cred{ display: none; } }

.hdr{ position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); }
.hdr__in{ display: flex; align-items: center; gap: 20px; height: 76px; }
.brand{ display: flex; align-items: center; text-decoration: none; flex: none; color: var(--brand); }
.brand:hover{ text-decoration: none; }
.logo{ width: clamp(146px, 16vw, 182px); height: auto; display: block; }
.on-dark .brand{ color: #FFFFFF; }
.ftr .logo{ width: 178px; }

.nav{ display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink); font-size: 15px; font-weight: 500; padding: 10px 11px;
  text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.nav__ext{ width: 12px; height: 12px; opacity: .55; flex: none; }
.nav a:hover .nav__ext{ opacity: 1; }
.menu a svg.nav__ext{ width: 13px; height: 13px; margin-left: 7px; vertical-align: -1px; opacity: .5; }
.nav a:hover{ color: var(--brand); border-bottom-color: var(--brand); text-decoration: none; }
.hdr .btn{ margin-left: 14px; padding: 12px 22px; font-size: 14.5px; }

.burger{
  display: none; margin-left: auto; background: transparent; border: 1px solid var(--line-2);
  border-radius: 3px; width: 44px; height: 40px; color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger svg{ width: 19px; height: 19px; }
.menu{ display: none; border-top: 1px solid var(--line); background: #fff; }
.menu[data-open="true"]{ display: block; }
.menu ul{ display: flex; flex-direction: column; padding-block: 8px 18px; }
.menu a{ display: block; padding: 13px 2px; color: var(--ink); font-weight: 600; font-size: 16px; border-bottom: 1px solid var(--line); text-decoration: none; }
.menu .btn{ margin-top: 18px; width: 100%; }
@media (max-width: 1140px){
  .nav, .hdr__in > .btn{ display: none; }
  .burger{ display: inline-flex; }
}

/* ---------- hero ---------- */
.hero{ position: relative; background: var(--dark); padding-block: clamp(58px, 7.5vw, 96px); overflow: hidden; }
.hero__bg{ position: absolute; inset: 0; overflow: hidden; }
.hero__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero__bg::after{
  content:""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(7,12,19,.97) 0%, rgba(7,12,19,.94) 40%, rgba(7,12,19,.70) 78%, rgba(7,12,19,.62) 100%),
    radial-gradient(80% 90% at 10% 0%, rgba(0,95,165,.42), transparent 62%);
}
@media (max-width: 1000px){
  .hero__bg::after{ background: linear-gradient(180deg, rgba(7,12,19,.95) 0%, rgba(7,12,19,.93) 60%, rgba(7,12,19,.88) 100%), radial-gradient(80% 60% at 20% 0%, rgba(0,95,165,.42), transparent 65%); }
}
.hero .wrap{ position: relative; z-index: 1; }
.hero__grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
@media (max-width: 1000px){ .hero__grid{ grid-template-columns: 1fr; } }
.kicker{
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--brand); padding: 7px 14px; border-radius: 2px;
}
.hero h1{ margin-top: 24px; max-width: 16ch; }
.hero h1 em{ font-style: normal; color: var(--brand-fg); }
.hero__lede{ margin-top: 24px; max-width: 58ch; }
.hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.trustbar{ display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.trustbar li{ display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--body); }
.trustbar svg{ width: 16px; height: 16px; color: var(--brand-fg); flex: none; }

/* capability plate: a data sheet, not a terminal */
.plate{ border: 1px solid var(--line-2); border-radius: 3px; background: rgba(18,28,40,.93); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 1000px){ .plate{ max-width: 460px; } }
.plate__head{ padding: 15px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.04); }
.plate__head strong{ display: block; font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.plate__head span{ display: block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-fg); margin-top: 5px; }
.plate__rows{ margin: 0; }
.plate__rows div{ display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.plate__rows dt{ font-size: 14px; color: var(--body); }
.plate__rows dd{ margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.plate__foot{ padding: 18px 22px 20px; }
.plate__foot span{ display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-fg); margin-bottom: 9px; }
.plate__foot p{ font-size: 14px; line-height: 1.6; color: var(--body); }

/* ---------- brand capability strip ---------- */
.strip ul{ display: grid; grid-template-columns: repeat(4, 1fr); }
.strip li{ padding: 30px 28px; border-left: 1px solid var(--line); }
.strip li:first-child{ border-left: 0; padding-left: 0; }
.strip li:last-child{ padding-right: 0; }
.strip dt{ font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.strip dd{ margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
@media (max-width: 860px){
  .strip ul{ grid-template-columns: repeat(2, 1fr); }
  .strip li{ padding: 24px; border-top: 1px solid var(--line); }
  .strip li:first-child{ padding-left: 24px; }
  .strip li:nth-child(3){ border-left: 0; }
  .strip li:nth-child(-n+2){ border-top: 0; }
  .strip li:last-child{ padding-right: 24px; }
}
@media (max-width: 480px){
  .strip ul{ grid-template-columns: 1fr; }
  .strip li{ border-left: 0 !important; padding-inline: 0 !important; }
}

/* ---------- wind region classification ---------- */
.wind{ margin-top: 40px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); overflow: hidden; }
.wind__head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.wind__head strong{ font-family: var(--display); font-size: 15px; font-weight: 700; }
.wind__head span{ font-size: 13.5px; color: var(--body-2); }
.wind__body{ padding: clamp(20px, 3vw, 28px); }
.scale{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.scale__cell{ min-width: 0; padding: 18px 18px 20px; background: var(--surface-2); border-top: 4px solid var(--line-2); }
.scale__cell--on{ background: var(--brand-tint); border-top-color: var(--brand); }
.scale__k{ font-family: var(--display); font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; line-height: 1; color: var(--body-2); }
.scale__cell--on .scale__k{ color: var(--brand); }
.scale__v{ margin-top: 10px; font-size: clamp(12.5px, 1.5vw, 14px); line-height: 1.45; color: var(--body); overflow-wrap: anywhere; }
.scale__legend{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 10px; }
.scale__legend span{
  grid-column: 3 / span 2; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--brand); padding: 8px 12px; border-radius: 2px;
}
@media (max-width: 620px){
  .scale, .scale__legend{ grid-template-columns: repeat(2, 1fr); }
  .scale__legend span{ grid-column: 1 / span 2; }
}
.wind__note{ margin-top: 24px; font-size: 15px; color: var(--body); max-width: 74ch; }

/* ---------- grids & cards ---------- */
.grid{ display: grid; gap: 2px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px){ .grid--3, .grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .grid--3, .grid--4{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid var(--line); background: var(--surface);
  padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 11px;
  border-top: 3px solid var(--line-2);
  transition: border-top-color .18s ease;
}
.card:hover{ border-top-color: var(--brand); }
.card p{ color: var(--body); font-size: 15px; line-height: 1.6; }
.card__k{ font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-fg); }

/* included checklist */
.incl li{ display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.incl li:first-child{ border-top: 1px solid var(--line); }
.incl svg{ width: 18px; height: 18px; color: var(--brand-fg); flex: none; margin-top: 5px; }
.incl b{ display: block; font-weight: 700; font-size: 15.5px; color: var(--ink); }
.incl span{ color: var(--body); font-size: 14.5px; }

.split{ display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 66px); align-items: start; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }

/* ---------- ownership ---------- */
.own{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
@media (max-width: 860px){ .own{ grid-template-columns: 1fr; } }
.own__card{ border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
.own__top{ padding: 24px 26px; border-bottom: 1px solid var(--line); background: var(--brand); color: #fff; }
.own__top h3{ color: #fff; margin-bottom: 4px; }
.own__top span{ font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.own__body{ padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.own__body p{ color: var(--body); font-size: 15px; }
.own__body ul{ display: flex; flex-direction: column; gap: 10px; }
.own__body li{ display: flex; gap: 12px; font-size: 14.5px; color: var(--body); }
.own__body li::before{ content:""; width: 6px; height: 6px; background: var(--brand); flex: none; margin-top: 9px; }

/* ---------- process ---------- */
.step{
  display: grid; grid-template-columns: 108px 1fr; gap: clamp(18px, 3vw, 40px);
  padding: clamp(26px, 3vw, 36px) 0; border-top: 1px solid var(--line);
}
.step:last-child{ border-bottom: 1px solid var(--line); }
.step__n{ font-family: var(--display); font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; line-height: .9; color: var(--brand); letter-spacing: -.03em; }
.step__b h3{ margin-bottom: 10px; }
.step__b p{ color: var(--body); max-width: 68ch; font-size: 15.5px; }
.step__b .hint{ margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--brand-fg); letter-spacing: .01em; }
@media (max-width: 560px){ .step{ grid-template-columns: 1fr; gap: 10px; } }

/* ---------- projects ---------- */
.docket{ border: 1px solid var(--line); background: var(--surface); }
.docket + .docket{ margin-top: 20px; }
.docket__title{ display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.docket__title div{ padding: 17px 22px; border-left: 1px solid var(--line); }
.docket__title div:first-child{ border-left: 0; }
.docket__title dt{ font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--body-2); }
.docket__title dd{ margin: 6px 0 0; font-size: 15.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px){
  .docket__title{ grid-template-columns: repeat(2, 1fr); }
  .docket__title div{ border-top: 1px solid var(--line); }
  .docket__title div:nth-child(-n+2){ border-top: 0; }
  .docket__title div:nth-child(3){ border-left: 0; }
}
@media (max-width: 430px){
  .docket__title{ grid-template-columns: 1fr; }
  .docket__title div{ border-left: 0 !important; border-top: 1px solid var(--line); }
  .docket__title div:first-child{ border-top: 0; }
}
.docket__body{ padding: clamp(24px, 3vw, 32px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 46px); }
@media (max-width: 820px){ .docket__body{ grid-template-columns: 1fr; } }
.docket h3{ margin-bottom: 14px; }
.docket__list li{ display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 10px 0; font-size: 15px; color: var(--body); border-bottom: 1px solid var(--line); }
.docket__list li:last-child{ border-bottom: 0; }
.docket__list .b{ color: var(--brand-fg); font-weight: 700; font-size: 13px; padding-top: 2px; font-variant-numeric: tabular-nums; }
.docket__sub{ font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--body-2); margin-bottom: 10px; }
.docket__gallery{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
@media (max-width: 480px){ .docket__gallery{ grid-template-columns: 1fr; } }
.docket__photos{ padding: 0 clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px); }
.docket__photos .docket__gallery{ grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
@media (max-width: 820px){ .docket__photos .docket__gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .docket__photos .docket__gallery{ grid-template-columns: 1fr; } }

/* ---------- photography ---------- */
figure{ margin: 0; }
.shot{ position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.shot img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--p{ aspect-ratio: 3 / 4; }
.shot--w{ aspect-ratio: 16 / 9; }
.media-stack{ display: grid; gap: 8px; }
.gallery{ display: grid; gap: 8px; }
.gallery--2{ grid-template-columns: repeat(2, 1fr); }
.gallery--3{ grid-template-columns: repeat(3, 1fr); }
.gallery--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .gallery--3, .gallery--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .gallery--2, .gallery--3, .gallery--4{ grid-template-columns: 1fr; } }

/* ---------- dome width range ---------- */
.sizes{ margin-top: 26px; border: 1px solid var(--line); border-top: 3px solid var(--brand); background: var(--surface); padding: clamp(20px, 2.6vw, 26px); }
.sizes__head strong{ display: block; font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); }
.sizes__head span{ display: block; font-size: 14px; color: var(--body-2); margin-top: 4px; }
.sizes__row{ display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.sizes__row li{ font-family: var(--display); font-size: 16px; font-weight: 700; color: #fff; background: var(--brand); padding: 9px 16px; border-radius: 2px; font-variant-numeric: tabular-nums; }
.sizes__row li:last-child{ background: transparent; color: var(--brand); border: 1px solid var(--brand); font-size: 14px; font-weight: 600; padding: 9px 15px; }
.sizes p{ margin-top: 16px; font-size: 14.5px; color: var(--body); max-width: 62ch; }

/* ---------- sectors ---------- */
.sectors{ display: flex; flex-wrap: wrap; gap: 2px; }
.sectors li{
  font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--brand); padding: 13px 20px;
}

/* ---------- FAQ ---------- */
.faq{ border-top: 1px solid var(--line); max-width: 88ch; }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.1rem);
  color: var(--ink); letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content:""; position: absolute; right: 10px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after{ transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover{ color: var(--brand); }
.faq .a{ padding: 0 44px 24px 0; color: var(--body); font-size: 15.5px; }

/* ---------- enquiry ---------- */
.enq{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 54px); align-items: start; }
@media (max-width: 900px){ .enq{ grid-template-columns: 1fr; } }
.form{ display: grid; gap: 16px; }
.field{ display: flex; flex-direction: column; gap: 7px; position: relative; }
.field label{ font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--body-2); }
.field input, .field select, .field textarea{
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: 2px;
  padding: 12px 14px; width: 100%; transition: border-color .15s ease;
}
.field textarea{ min-height: 96px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder{ color: #97A6B6; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brand); outline: none; }
.field select{ appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--body) 50%), linear-gradient(135deg, var(--body) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .form__row{ grid-template-columns: 1fr; } }
.form__actions{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
.out{ margin-top: 20px; border: 1px solid var(--line); background: #fff; }
.out__head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--body-2); background: var(--surface-2); }
.out textarea{ width: 100%; border: 0; background: transparent; color: var(--body); resize: vertical; font-family: var(--sans); font-size: 14px; line-height: 1.7; padding: 16px; min-height: 210px; }
.out textarea:focus{ outline: none; }
.mini{ background: #fff; border: 1px solid var(--line-2); color: var(--ink); font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border-radius: 2px; cursor: pointer; }
.mini:hover{ border-color: var(--brand); color: var(--brand); }

.contact{ border: 1px solid var(--line); border-top: 3px solid var(--brand); background: #fff; padding: clamp(24px, 3vw, 32px); }
.contact dl{ margin: 0; display: flex; flex-direction: column; }
.contact dl > div{ padding: 15px 0; border-bottom: 1px solid var(--line); }
.contact dl > div:last-child{ border-bottom: 0; padding-bottom: 0; }
.contact dt{ font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--body-2); margin-bottom: 7px; }
.contact dd{ margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }

/* ---------- closing CTA ---------- */
.close h2{ max-width: 17ch; }
.close .lede{ margin-top: 20px; color: var(--body); }
.close__cta{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- footer ---------- */
.ftr{ background: var(--dark); padding-block: 56px 36px; }
.ftr__top{ display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px){ .ftr__top{ grid-template-columns: 1fr; gap: 28px; } }
.ftr h4{ font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--body-2); margin-bottom: 16px; }
.ftr li{ margin-bottom: 11px; }
.ftr li a{ color: var(--body); font-size: 14.5px; }
.ftr li a:hover{ color: var(--ink); }
.ftr__blurb{ color: var(--body); font-size: 14.5px; max-width: 42ch; margin-top: 18px; }
.ftr__bot{ display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; padding-top: 26px; font-size: 13px; color: var(--body-2); }

@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

/* ============================================================
   SOCIAL LINKS
   ============================================================ */
.social{ display: flex; gap: 8px; margin-top: 22px; }
.social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: 2px;
  color: var(--body); text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.social a:hover{ color: #fff; background: var(--brand); border-color: var(--brand); text-decoration: none; }
.social svg{ width: 19px; height: 19px; }
.contact__social{ display: flex; gap: 16px; }
.contact__social a{ font-size: 15px; font-weight: 600; }

/* ============================================================
   ADDRESS AUTOCOMPLETE
   The suggestion list under the "Site location" field. Suggestions come from
   /api/places, which is the Cloudflare function in functions/api/places.js.
   If that endpoint is not reachable the list simply never opens and the field
   behaves as an ordinary text input.
   ============================================================ */
.ac{
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin: 0;
  background: #fff; border: 1px solid var(--brand); border-top: 0;
  box-shadow: 0 18px 34px -20px rgba(14,22,32,.5);
  max-height: 264px; overflow-y: auto;
}
.ac li{
  padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--line);
  transition: background-color .1s ease;
}
.ac li:last-child{ border-bottom: 0; }
.ac li:hover, .ac li[aria-selected="true"]{ background: var(--brand-tint); }
.ac b{ display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ac span{ display: block; font-size: 13px; color: var(--body-2); margin-top: 2px; }
.ac__note{
  padding: 9px 14px; font-size: 12px; color: var(--body-2);
  background: var(--surface-2); border-top: 1px solid var(--line); cursor: default;
}
.ac__note:hover{ background: var(--surface-2); }