@charset "UTF-8";
/* ==========================================================================
   Glass Verandas UK - page components
   Each section uses a distinct layout family. No family repeats on a page.
   ========================================================================== */

/* --- 1. hero: asymmetric split ------------------------------------------ */
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 6rem); }
.hero__grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  align-items: center;
}
.hero__title {
  /* Sized so the headline lands on exactly two lines at desktop. */
  font-size: clamp(2.3rem, 4vw, 3.1rem);
  text-wrap: balance;
  margin-bottom: 1.1rem;
}
.hero__lede { max-width: 44ch; margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.hero__figure { position: relative; }
.hero__figure .media { aspect-ratio: 4 / 3.4; box-shadow: var(--shadow-md); }

/* Guide-price sticker, echoing the reference board's circular badge. */
.hero__badge {
  position: absolute; right: -.75rem; bottom: -1.25rem;
  width: clamp(112px, 13vw, 148px); aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  background: var(--highlight); color: #22280A;
  border-radius: 50%; box-shadow: var(--shadow-md);
  padding: 1rem;
}
.hero__badge b { display: block; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.1; }
.hero__badge span { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { order: -1; }
  .hero__badge { right: 0; bottom: -1rem; }
}

/* --- 2. assurance strip (distinct family: inline row, no cards) ---------- */
.assurance { border-block: 1px solid var(--line); background: var(--surface-2); }
.assurance__grid {
  display: grid; gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 1.9rem;
}
.assurance__item { display: flex; gap: .8rem; align-items: flex-start; }
.assurance__item svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--brand); margin-top: .1rem; }
.assurance__item b { display: block; font-size: .95rem; font-weight: 600; }
.assurance__item span {
  font-size: .87rem; color: var(--fg-2);
  display: block; max-width: 25ch;   /* wraps all four onto two lines */
}
.assurance__item > div { min-height: 3.4rem; }
@media (max-width: 900px) { .assurance__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .assurance__grid { grid-template-columns: 1fr; } }

/* --- 3. ranges bento (distinct family: asymmetric tile grid) ------------- */
/* Seven ranges, seven cells. Cell count always matches content count. */
.bento {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(210px, auto);
}
.range-tile {
  position: relative; overflow: hidden;
  border-radius: var(--r); background: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.5rem; color: #fff; text-decoration: none;
  isolation: isolate;
}
.range-tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.range-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 20, 12, .88) 0%, rgba(8, 20, 12, .45) 42%, rgba(8, 20, 12, .1) 100%);
}
.range-tile:hover img { transform: scale(1.05); }
.range-tile h3 { color: #fff; margin-bottom: .3rem; }
.range-tile p { color: rgba(255, 255, 255, .82); font-size: .92rem; margin: 0 0 .9rem; max-width: 34ch; }
.range-tile__from { font-size: .82rem; font-weight: 600; color: var(--highlight); }

/* asymmetric rhythm: 3 wide, 2 wide, 2 wide, then a 3-up row, then a full band */
.range-tile:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.range-tile:nth-child(2) { grid-column: span 2; }
.range-tile:nth-child(3) { grid-column: span 2; }
.range-tile:nth-child(4) { grid-column: span 2; }
.range-tile:nth-child(5) { grid-column: span 2; }
.range-tile:nth-child(6) { grid-column: span 2; }
.range-tile:nth-child(7) { grid-column: span 6; min-height: 200px; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .range-tile:nth-child(n) { grid-column: span 2; grid-row: auto; }
}

/* --- 4. dark spec panel (distinct family: tinted bubbles on dark) -------- */
.spec-panel { border-radius: var(--r); padding: clamp(2rem, 4vw, 3.5rem); }
.spec-panel__head { max-width: 46ch; margin-bottom: 2.5rem; }
.bubbles { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.bubble {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.2rem 1.3rem;
  border: 1.5px solid rgba(255, 255, 255, .26);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
}
.bubble svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--highlight); margin-top: .15rem; }
.bubble p { margin: 0; font-size: .93rem; color: rgba(255, 255, 255, .86); }
@media (max-width: 860px) { .bubbles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .bubbles { grid-template-columns: 1fr; } }

/* --- 5. process (distinct family: numbered horizontal rail) -------------- */
.process { display: grid; gap: 1.75rem; grid-template-columns: repeat(5, 1fr); counter-reset: step; }
.process__step { border-top: 2px solid var(--line-strong); padding-top: 1.1rem; }
.process__step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: "Playfair Display", serif;
  font-size: 1.9rem; color: var(--accent); line-height: 1; margin-bottom: .5rem;
}
.process__step h3 { font-family: "Geist", sans-serif; font-size: 1.02rem; font-weight: 600; letter-spacing: 0; margin-bottom: .35rem; }
.process__step p { font-size: .9rem; color: var(--fg-2); margin: 0; }
@media (max-width: 960px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* --- 6. gallery (distinct family: masonry columns) ---------------------- */
/* Homepage preview: an even grid, so the block ends on a straight edge. */
.gallery-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.gallery-grid a, .gallery-grid img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r);
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }

.centred { display: flex; justify-content: center; }

/* Hidden filter results must not reserve a grid cell. */
.gallery-grid a[hidden] { display: none; }

/* Small print sitting under a gallery. */
.gallery-note {
  margin: 1.75rem auto 0; text-align: center;
  font-size: .84rem; color: var(--fg-3); max-width: 60ch;
}

/* Gallery page keeps masonry: 30 images of mixed proportion. */
.masonry { columns: 3; column-gap: 1rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
.masonry img { width: 100%; height: auto; border-radius: var(--r); }
@media (max-width: 900px) { .masonry { columns: 2; } }
@media (max-width: 560px) { .masonry { columns: 1; } }

.gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.gallery-filters button {
  padding: .55rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: transparent;
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--fg-2); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.gallery-filters button:hover { color: var(--fg); border-color: var(--fg-3); }
.gallery-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }

/* --- 7. FAQ (distinct family: disclosure list) -------------------------- */
/* Full width so the FAQ lines up with every other section on the page. */
.faq { max-width: none; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: 1.06rem; font-weight: 500; color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background:
    linear-gradient(var(--fg-2), var(--fg-2)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--fg-2), var(--fg-2)) center / 1.5px 11px no-repeat;
  transition: transform .3s var(--ease), border-color .2s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(135deg); border-color: var(--accent);
  background:
    linear-gradient(var(--accent), var(--accent)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 11px no-repeat;
}
.faq details > div { padding-bottom: 1.5rem; }
.faq details p { color: var(--fg-2); margin: 0; max-width: 70ch; }

/* --- 8. CTA band (distinct family: dark full-bleed with inset form) ------ */
.cta-band { border-radius: var(--r); padding: clamp(2.25rem, 4vw, 3.5rem); }
/* Three curated photos are portrait (1200x1799). Without a ratio here they
   stretch the whole band to roughly 1800px tall. */
.cta-band .media { aspect-ratio: 16 / 11; }
.cta-band__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 860px) { .cta-band__grid { grid-template-columns: 1fr; } }

/* --- forms -------------------------------------------------------------- */
/* align-content:start stops a field with fewer rows (no hint line) from
   stretching its control to match a taller neighbour in the same row. That
   was making the range select taller than the input beside it. */
.field { display: grid; gap: .45rem; margin-bottom: 1.1rem; align-content: start; }
.field label { font-size: .88rem; font-weight: 600; color: var(--fg); }
.field .hint { font-size: .8rem; color: var(--fg-3); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font: inherit; font-size: .96rem;
  line-height: 1.4;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

/* The native select renders at its own height and baseline, which made it sit
   out of line with the text input next to it. Reset it and draw our own
   chevron so both controls match exactly. */
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234C5A4C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 16px;
  cursor: pointer;
}
.field select::-ms-expand { display: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 130px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: #C0392B; }
.field .err { font-size: .82rem; color: #C0392B; font-weight: 500; }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .84rem; color: var(--fg-3); }
.on-dark .field label { color: var(--on-dark); }
.on-dark .field .hint, .on-dark .form-note { color: var(--on-dark-2); }
.on-dark .field input, .on-dark .field select, .on-dark .field textarea {
  background: rgba(255, 255, 255, .07); color: var(--on-dark);
  border-color: rgba(255, 255, 255, .28);
}
.on-dark .field input::placeholder, .on-dark .field textarea::placeholder { color: rgba(255, 255, 255, .55); }

.alert { border-radius: var(--r); padding: 1rem 1.25rem; margin-bottom: 1.5rem; font-size: .94rem; }
.alert--ok { background: var(--brand-soft); border: 1px solid var(--brand); color: var(--brand); }
.alert--bad { background: #FBE9E7; border: 1px solid #C0392B; color: #8E2A1E; }

/* --- range detail page -------------------------------------------------- */
.crumbs { font-size: .85rem; color: var(--fg-3); padding-block: 1.25rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.crumbs span { margin-inline: .4rem; }

.range-hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr 1.15fr; align-items: center; }
.range-hero__grid .media { aspect-ratio: 16 / 11; }
@media (max-width: 880px) { .range-hero__grid { grid-template-columns: 1fr; } }

/* Spec cards, not a hairline spec table (long-list rule). */
.specs { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.spec-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.5rem; }
.spec-card dt { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .5rem; }
.spec-card dd { margin: 0; font-size: 1.02rem; color: var(--fg); }
@media (max-width: 620px) { .specs { grid-template-columns: 1fr; } }

.suits { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.suits li {
  list-style: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.35rem 1.5rem;
}
.suits b { display: block; margin-bottom: .3rem; }
.suits p { font-size: .9rem; color: var(--fg-2); margin: 0; }
@media (max-width: 800px) { .suits { grid-template-columns: 1fr; } }

.range-strip { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.range-strip a { text-decoration: none; }
.range-strip .media { aspect-ratio: 4 / 3; margin-bottom: .7rem; }
.range-strip b { font-size: .98rem; }
.range-strip span { display: block; font-size: .85rem; color: var(--fg-2); }
@media (max-width: 860px) { .range-strip { grid-template-columns: repeat(2, 1fr); } }

/* --- lightbox ----------------------------------------------------------- */
/* A closed <dialog> is display:none from the UA sheet. Setting display on
   the element itself would override that and leave the close button floating
   on the page, so the grid layout is scoped to [open]. */
.lightbox { display: none; }
.lightbox[open] {
  position: fixed; inset: 0; z-index: 100;
  max-width: 100%; max-height: 100%; width: 100%; height: 100%;
  background: rgba(6, 14, 9, .93);
  display: grid; place-items: center; padding: 4vmin;
  border: 0;
}
.lightbox::backdrop { background: rgba(6, 14, 9, .93); }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; border-radius: var(--r); }
.lightbox__close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .26); }

/* --- inner page hero (distinct from the home split hero) ---------------- */
.page-hero { padding-block: clamp(1rem, 2vw, 2rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.4rem); max-width: 18ch; }

/* --- three-way chooser -------------------------------------------------- */
.chooser { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.chooser__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.5rem, 2.4vw, 2rem);
  display: flex; flex-direction: column;
}
.chooser__card h3 { margin-bottom: .6rem; }
.chooser__card p { font-size: .95rem; color: var(--fg-2); }
.chooser__links { margin-top: auto; margin-bottom: 0; font-weight: 600; color: var(--fg); }
.chooser__links a { color: var(--brand); text-decoration: none; border-bottom: 1px solid currentColor; }
.chooser__links a:hover { color: var(--accent); }
@media (max-width: 900px) { .chooser { grid-template-columns: 1fr; } }

/* --- rich range cards (ranges hub) -------------------------------------- */
.range-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
.range-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.range-card__media { display: block; aspect-ratio: 16 / 9; border-radius: 0; }
.range-card__body { padding: clamp(1.4rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.range-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.range-card__head h3 { margin: 0; }
.range-card__head h3 a { text-decoration: none; }
.range-card__head h3 a:hover { color: var(--brand); }
.range-card__tagline { font-size: .88rem; font-weight: 600; color: var(--brand); margin-bottom: .9rem; }
.range-card p { font-size: .95rem; color: var(--fg-2); }
.range-card__specs { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.range-card__specs li { font-size: .89rem; color: var(--fg-2); padding-left: 1.1rem; position: relative; }
.range-card__specs li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg);
}
.range-card__specs b { color: var(--fg); font-weight: 600; }
.range-card__body > p:last-child { margin-top: auto; }
@media (max-width: 800px) { .range-grid { grid-template-columns: 1fr; } }

/* --- contact page split -------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1.1fr .9fr; align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-details { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.1rem; }
.contact-details li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-details svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--brand); margin-top: .2rem; }
.contact-details b { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: .1rem; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { color: var(--brand); }

.next-steps { counter-reset: ns; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.next-steps li { display: flex; gap: .9rem; align-items: flex-start; font-size: .95rem; color: var(--fg-2); }
.next-steps li::before {
  counter-increment: ns; content: counter(ns);
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
}


/* --- about page ---------------------------------------------------------- */
/* Reversed split, so the first two sections of the About page zigzag. */
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.split--image-left { grid-template-columns: 1fr 1.05fr; }
.split--image-left .media { aspect-ratio: 4 / 3; }
.split__body p:last-child { margin-bottom: 0; }
@media (max-width: 880px) {
  .split--image-left { grid-template-columns: 1fr; }
  .split--image-left .media { order: -1; }
}

.heading-centred { text-align: center; }
.heading-centred + .lede { margin-inline: auto; text-align: center; }

/* Coverage: hairline rows plus area pills. Deliberately NOT a card grid and
   NOT a dark panel, both of which already appear on this page. */
.coverage { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr 1.15fr; align-items: start; }
@media (max-width: 860px) { .coverage { grid-template-columns: 1fr; } }

.coverage-rows { margin: 0; border-top: 2px solid var(--ink); }
.coverage-rows > div {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.coverage-rows dt { font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); margin: 0; }
.coverage-rows dd { margin: 0; font-weight: 600; text-align: right; }


/* Small uppercase field label. Not an eyebrow: it sits inside a block rather
   than above a section headline, so it is outside the eyebrow budget. */
.label {
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-3);
}

.area-pills { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.area-pills li {
  font-size: .88rem; color: var(--fg-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: .4rem .85rem; border-radius: var(--r-pill);
}
.area-pills li.is-base { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* --- sitemap page -------------------------------------------------------- */
.sitemap { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(3, 1fr); }
.sitemap__group h2 {
  font-family: "Geist", sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3);
  padding-bottom: .75rem; margin-bottom: 0; border-bottom: 2px solid var(--ink);
}
.sitemap__group ul { list-style: none; margin: 0; padding: 0; }
.sitemap__group li { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.sitemap__group a { font-weight: 600; text-decoration: none; }
.sitemap__group a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.sitemap__group span { display: block; font-size: .87rem; color: var(--fg-2); margin-top: .15rem; }
@media (max-width: 860px) { .sitemap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sitemap { grid-template-columns: 1fr; } }