/* ==========================================================================
   S Sivakumar Rolling Shutters — design system

   Palette: light olive green + cement, in gradients.
   Olive carries structure; cement is the panel ground. Warm gold means one
   thing only — "click this to reach us". Nothing decorative is ever gold,
   so the Call button is always the loudest thing on the screen.

   Built against Steve Krug, "Don't Make Me Think, Revisited":
   - Ch.3  clearly defined areas, strong visual hierarchy, obvious clickability
   - Ch.10 affordances must stay visible (buttons are NOT flat)
   - Ch.12 text must resize with the browser's Text Size setting
   - Ch.13 visited links stay distinct; no small low-contrast type
   ========================================================================== */

:root {
  /* Olive green — structure. Named by role, not by hue. */
  --brand-900: #2C3620;   /* deepest: footer, headings */
  --brand-800: #465529;   /* hover */
  --brand-700: #5F7238;   /* primary: header, hero, links */
  --brand-300: #A3B18A;   /* light olive */
  --brand-100: #E3E9D6;   /* pale tint */
  --brand-50:  #F4F5EF;   /* cement panel ground */

  /* Cement */
  --cement-600: #8A8C80;
  --cement-400: #B3B5A8;
  --cement-200: #D5D7CA;
  --cement-100: #E7E8DF;

  /* Warm gold — reserved for calls to action, nothing else */
  --cta:      #D98E04;
  --cta-dark: #B37203;
  --cta-pale: #FBF1D9;

  /* Ink and line */
  --ink:      #23281B;
  --slate-700:#3F4733;
  --slate-600:#5B6250;
  --slate-400:#8A8F7F;
  --line:     #D5D7CA;
  --line-soft:#E7E8DF;
  --white:    #FFFFFF;

  /* Semantic */
  --whatsapp: #25D366;
  --go:       #147A45;
  --stop:     #B3261E;
  --visited:  #7A5A9E;

  /* Gradients: olive into cement */
  --grad-hero:  linear-gradient(150deg, #6E8442 0%, #3A4726 55%, #2C3620 100%);
  --grad-cta:   linear-gradient(115deg, #5F7238 0%, #2C3620 100%);
  --grad-panel: linear-gradient(180deg, #F7F8F3 0%, #EAEBE1 100%);
  --grad-head:  linear-gradient(180deg, #FFFFFF 0%, #F7F8F3 100%);

  /* Type. System stack only: a webfont costs a network round-trip, and page
     speed is the lever that moves Google Ads cost-per-click. Tamil renders
     from the system's own Noto Sans Tamil on Android and iOS. */
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Tamil", sans-serif;

  --wrap: 1140px;
  --gutter: 20px;
  --radius: 5px;

  --shadow-1: 0 1px 2px rgba(44, 54, 32, 0.09);
  --shadow-2: 0 4px 14px rgba(44, 54, 32, 0.14);
  --shadow-3: 0 16px 44px rgba(44, 54, 32, 0.20);

  /* Rolling-shutter lath motif, for dark grounds only */
  --laths: repeating-linear-gradient(
      180deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 11px);
}

/* --------------------------------------------------------------- Reset -- */

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

/* Krug Ch.12: never pin the root size in px, or the browser's Text Size
   setting does nothing — his three-second accessibility test. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

/* ----------------------------------------------------------- Typography -- */

h1, h2, h3, h4 {
  color: var(--brand-900);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Krug Ch.3: headings must not float. More space above than below, so a
   heading visibly belongs to the section it introduces. */
h1 { font-size: clamp(1.85rem, 5.5vw, 3.1rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.4rem, 3.6vw, 2.15rem); margin: 2.2em 0 0.55em; }
h3 { font-size: clamp(1.08rem, 2.2vw, 1.28rem); margin: 1.8em 0 0.4em; letter-spacing: -0.01em; }
h4 { font-size: 1rem; margin: 1.6em 0 0.4em; }

:where(section, .card, .prose) > :is(h1, h2, h3):first-child { margin-top: 0; }

p { margin: 0 0 1.05em; }

/* Krug Ch.13: keep the visited/unvisited distinction. It tells people which
   options they have already tried. */
a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--visited); }
a:hover { color: var(--brand-800); }

:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Krug Ch.3: bulleted lists beat paragraphs, and list items need a little
   extra space between them to stay scannable. */
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--brand-700); }

strong { font-weight: 700; color: var(--brand-900); }

.ta { font-size: 0.92em; color: var(--slate-400); font-weight: 600; }

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 0.7em;
}
.on-dark .eyebrow, .band--dark .eyebrow, .hero .eyebrow { color: var(--cta); }

.lede {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--slate-600);
  max-width: 60ch;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cta);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- Layout -- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 780px; }

/* Krug Ch.3: break pages into clearly defined areas. Alternating grounds do
   that more bluntly than whitespace alone — but kept light, so the page
   reads open rather than heavy. */
.band { padding: 52px 0; }
.band--tight { padding: 34px 0; }
.band--zinc { background: var(--grad-panel); border-block: 1px solid var(--line); }
.band--dark {
  background: var(--brand-700);
  color: var(--brand-100);
  background-image: var(--laths);
}
.band--dark :is(h1, h2, h3, h4) { color: var(--white); }
.band--dark .lede { color: var(--brand-100); }
.band--dark a { color: var(--cta); }
.band--dark a:visited { color: #F0D48A; }

@media (min-width: 940px) { .band { padding: 72px 0; } }

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

.grid { display: grid; gap: 18px; }
@media (min-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------ Buttons -- */
/* Krug Ch.10: flat design strips the affordances that tell people something
   is clickable. These keep an edge and a shadow on purpose. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-1); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--call {
  background: var(--cta);
  color: var(--ink);
  border-bottom: 3px solid var(--cta-dark);
}
.btn--call:hover, .btn--call:visited { background: #FFCE33; color: var(--ink); }

.btn--wa {
  background: var(--whatsapp);
  color: #04351A;
  border-bottom: 3px solid #1CA750;
}
.btn--wa:hover, .btn--wa:visited { background: #34E074; color: #04351A; }

.btn--dark {
  background: var(--brand-700);
  color: var(--white);
  border-bottom: 3px solid var(--brand-900);
}
.btn--dark:hover, .btn--dark:visited { background: var(--brand-800); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  box-shadow: none;
  border: 2px solid rgba(255,255,255,0.55);
}
.btn--ghost:hover, .btn--ghost:visited { background: rgba(255,255,255,0.14); color: var(--white); }

.btn--lg { padding: 17px 30px; font-size: 1.06rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* -------------------------------------------------------------- Topbar -- */
/* Krug Ch.6: Utilities sit above the Sections and read slightly quieter. */

.topbar { background: var(--brand-900); color: var(--brand-300); font-size: 0.83rem; }
.topbar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px 20px; min-height: 38px; padding-block: 7px;
}
.topbar a { color: var(--white); font-weight: 700; text-decoration: none; }
.topbar a:visited { color: var(--white); }
.topbar a:hover { color: var(--cta); text-decoration: underline; }
.topbar-hide { display: none; }
@media (min-width: 760px) {
  .topbar .wrap { justify-content: space-between; }
  .topbar-hide { display: inline; }
}

.open-badge { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: #6FE0A8; }
.open-badge::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #35C97F;
  box-shadow: 0 0 0 3px rgba(53,201,127,0.25);
}

/* ------------------------------------------------------------- Header -- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--grad-head);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.header-bar { display: flex; align-items: center; gap: 14px; min-height: 68px; }

/* Krug Ch.6+7: Site ID top-left, with the tagline attached to it. */
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--radius);
  background: var(--brand-700);
  display: grid; place-items: center;
}
.logo-mark svg { width: 24px; height: 24px; }
.logo-name {
  display: block;
  font-size: 1.02rem; font-weight: 800;
  color: var(--brand-900);
  letter-spacing: -0.01em; line-height: 1.15;
}
.tagline {
  display: block;
  font-size: 0.72rem; font-weight: 600;
  color: var(--brand-700);
  line-height: 1.3; margin-top: 2px;
}

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 44px; padding: 0 11px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px;
  background: var(--brand-900);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white);
  border-bottom: 3px solid var(--brand-700);
  box-shadow: var(--shadow-2);
  padding: 8px var(--gutter) 18px;
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; border-bottom: 1px solid var(--line-soft); }
.site-nav a {
  display: block; padding: 14px 4px;
  font-weight: 700; color: var(--slate-700);
  text-decoration: none;
}
.site-nav a:visited { color: var(--slate-700); }
.nav-cta { margin-top: 14px; border: 0 !important; }

/* Krug Ch.6: the "You are here" marker fails when it is subtle. Two
   distinctions at once — colour AND a solid bar. */
.site-nav a.is-current {
  color: var(--brand-700);
  background: var(--brand-100);
  box-shadow: inset 4px 0 0 var(--brand-700);
}

.header-actions { display: none; }

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; position: static; border: 0; box-shadow: none; padding: 0; }
  .site-nav ul { display: flex; align-items: center; gap: 2px; }
  .site-nav li { border: 0; }
  .site-nav a { padding: 24px 13px; font-size: 0.95rem; border-bottom: 4px solid transparent; }
  .site-nav a:hover { color: var(--brand-700); background: var(--brand-50); }
  .site-nav a.is-current {
    color: var(--brand-700);
    background: transparent;
    box-shadow: none;
    border-bottom-color: var(--brand-700);
  }
  .nav-cta { display: none; }
  .header-actions { display: flex; align-items: center; gap: 10px; }
}

/* --------------------------------------------------------------- Hero -- */

.hero {
  background: var(--brand-700);
  background-image: var(--laths),
    linear-gradient(150deg, rgba(30,53,102,0.55) 0%, rgba(18,32,64,0.68) 55%, rgba(11,22,51,0.82) 100%),
    url('/assets/img/texture/shutter-lath.jpg');
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, center;
  background-repeat: repeat, no-repeat, no-repeat;
  color: var(--brand-100);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(720px 380px at 84% 10%, rgba(255,193,7,0.18), transparent 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; padding-block: 44px 50px; }
.hero h1 { color: var(--white); margin-bottom: 0.4em; }
.hero h1 em { font-style: normal; color: var(--cta); }
.hero-sub {
  font-size: 1.14rem; line-height: 1.5;
  color: #CBDDF4;
  max-width: 46ch; margin-bottom: 1.5em;
}

.hero-trust {
  list-style: none;
  margin: 26px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.hero-trust li {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 0.92rem; font-weight: 700; color: var(--white);
}
.hero-trust svg { width: 17px; height: 17px; flex: none; color: var(--cta); }

@media (min-width: 940px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px; align-items: start;
    padding-block: 66px 72px;
  }
  .hero-trust { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- Lead form -- */

.quote-card {
  background: var(--white);
  color: var(--ink);
  border-radius: 8px;
  border-top: 5px solid var(--cta);
  padding: 24px 22px 26px;
  box-shadow: var(--shadow-3);
}
.quote-card h2 { font-size: 1.32rem; margin: 0 0 4px; }
.quote-card .form-note { font-size: 0.9rem; color: var(--slate-600); margin-bottom: 16px; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 0.86rem; font-weight: 800;
  color: var(--brand-900);
  margin-bottom: 5px;
}
.field .opt { font-weight: 500; color: var(--slate-400); }

/* Krug Ch.13: never put labels inside form fields. */
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid #B9C4D3;
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-700);
  box-shadow: 0 0 0 3px var(--brand-100);
}
.field textarea { resize: vertical; min-height: 80px; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-legal { font-size: 0.78rem; color: var(--slate-400); margin: 11px 0 0; text-align: center; }
.form-status { display: none; padding: 12px 14px; border-radius: var(--radius); font-weight: 700; margin-bottom: 14px; }
.form-status.is-error { display: block; background: #FCEBEA; color: var(--stop); }

/* --------------------------------------------------------- Product photo -- */

.product-photo {
  aspect-ratio: 16 / 8;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  margin-bottom: 6px;
}
.product-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
}
.product-photo-caption {
  font-size: 0.78rem; color: var(--slate-400);
  margin: 8px 0 0;
}

/* --------------------------------------------------------------- Card -- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 20px;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
/* Krug Ch.3: make it obvious what's clickable. A whole card that links
   lifts and colours its edge on hover. */
a.card:hover, .card:hover {
  border-color: var(--brand-700);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
}
a.card:visited { color: inherit; }
.card h3 { margin: 0 0 3px; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }
.card .sub { font-size: 0.86rem; font-weight: 700; color: var(--brand-700); margin-bottom: 9px; }
.card p { font-size: 0.94rem; color: var(--slate-600); margin-bottom: 0.8em; }
.card ul { font-size: 0.92rem; color: var(--slate-600); margin-bottom: 14px; }
.card .go { margin-top: auto; font-weight: 800; font-size: 0.94rem; color: var(--brand-700); }
a.card:hover .go { text-decoration: underline; }

.card-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 2px;
}
.card-actions .go { margin-top: 0; }
.card-price-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--cta); color: var(--ink);
  border-radius: 100px;
  font-weight: 800; font-size: 0.82rem;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.card-price-btn svg { width: 13px; height: 13px; flex: none; }
.card-price-btn:hover, .card-price-btn:visited { background: var(--cta); color: var(--ink); }
.card-price-btn:hover { background: #FFCE33; box-shadow: var(--shadow-2); }

.card-icon {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: var(--brand-100);
  color: var(--brand-700);
  display: grid; place-items: center;
  margin-bottom: 13px;
}
.card-icon svg { width: 25px; height: 25px; }

.card--photo { padding-top: 0; }
.card-photo {
  aspect-ratio: 4 / 3;
  margin: 0 -20px 16px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--brand-50);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.03); }
a.card:hover .card-photo img { transform: scale(1.04); }
.card-photo img { transition: transform 0.2s ease; }

/* -------------------------------------------------------------- Steps -- */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.step { position: relative; padding-left: 58px; margin-bottom: 22px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--white);
  font-weight: 800;
  display: grid; place-items: center;
}
.step h3 { margin: 0 0 3px; font-size: 1.05rem; }
.step p { margin: 0; font-size: 0.94rem; color: var(--slate-600); }
.band--dark .step::before { background: var(--cta); color: var(--ink); }
.band--dark .step p { color: var(--brand-100); }

/* -------------------------------------------------------------- Stats -- */

.stat { text-align: center; }
.stat strong {
  display: block;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 800;
  color: var(--brand-700);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 0.9rem; font-weight: 600; color: var(--slate-600); }
.band--dark .stat strong { color: var(--cta); }
.band--dark .stat span { color: var(--brand-100); }

/* ------------------------------------------------------------ Clients -- */

.logo-marquee {
  position: relative; overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex; align-items: center; gap: 14px;
  width: max-content;
  animation: logo-scroll 34s linear infinite;
}
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track { animation-play-state: paused; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.logo-cell {
  flex: none;
  min-width: 186px; min-height: 82px;
  padding: 15px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid; place-items: center; text-align: center;
}
.logo-cell img { max-height: 42px; width: auto; object-fit: contain; }
.logo-cell strong { display: block; font-size: 0.98rem; color: var(--brand-900); }
.logo-cell small { display: block; font-size: 0.74rem; color: var(--slate-400); margin-top: 3px; }

/* ------------------------------------------------------------ Reviews -- */

.review-summary {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 12px 22px;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 600px; margin-inline: auto;
  box-shadow: var(--shadow-1);
}
.review-score {
  font-size: 2.4rem; font-weight: 800;
  color: var(--brand-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.review-meta { text-align: left; }
.review-meta span { font-size: 0.88rem; color: var(--slate-600); }
.stars { color: var(--cta); letter-spacing: 2px; }

.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cta);
  border-radius: var(--radius);
  padding: 20px; margin: 0;
}
.quote p { font-size: 0.96rem; margin-bottom: 12px; }
.quote footer { font-size: 0.86rem; color: var(--slate-600); }
.quote footer strong { display: block; color: var(--brand-900); font-size: 0.94rem; }

/* Reviews moving horizontally, same mechanism as the client-logo strip. */
.quote-marquee {
  position: relative; overflow: hidden; padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.quote-track {
  display: flex; align-items: stretch; gap: 16px;
  width: max-content;
  animation: quote-scroll 55s linear infinite;
}
.quote-marquee:hover .quote-track,
.quote-marquee:focus-within .quote-track { animation-play-state: paused; }
@keyframes quote-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.quote-track .quote { flex: none; width: 300px; text-align: left; white-space: normal; }
.quote-track .quote footer { white-space: normal; }

/* ----------------------------------------------- Google Business Profile -- */
/* The map is an iframe and iframes are heavy, so it always carries
   loading="lazy" and never sits above the fold (Krug Ch.10: speed). */

.map-embed {
  aspect-ratio: 16 / 11;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--brand-50);
  box-shadow: var(--shadow-1);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.gbp {
  display: grid;
  gap: 22px;
  align-items: center;
}
@media (min-width: 860px) { .gbp { grid-template-columns: 1fr 1.1fr; gap: 34px; } }

.gbp-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 22px;
  box-shadow: var(--shadow-1);
}
.gbp-card .score-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.gbp-card .score {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--brand-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gbp-card .score-meta .stars { font-size: 1.15rem; }
.gbp-card .score-meta span { display: block; font-size: 0.88rem; color: var(--slate-600); }
.gbp-card dl { margin: 0 0 18px; font-size: 0.94rem; }
.gbp-card dt {
  font-weight: 800;
  color: var(--brand-900);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
}
.gbp-card dt:first-child { margin-top: 0; }
.gbp-card dd { margin: 2px 0 0; color: var(--slate-600); }

/* --------------------------------------------------------------- Work -- */

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 24px 0 30px; }
.filter-bar button {
  padding: 10px 17px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font: inherit; font-weight: 700; font-size: 0.9rem;
  color: var(--slate-700);
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.filter-bar button:hover { border-color: var(--brand-700); color: var(--brand-700); }
.filter-bar button[aria-pressed="true"] {
  background: var(--brand-700); border-color: var(--brand-700); color: var(--white);
}

.work-grid { display: grid; gap: 18px; }
@media (min-width: 600px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }

.work-item { background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.work-media { aspect-ratio: 4 / 3; background: var(--brand-50); }
.work-media img, .work-media video { width: 100%; height: 100%; object-fit: cover; }
.work-body { padding: 15px 17px 17px; }
.work-body h3 { margin: 0 0 3px; font-size: 1rem; }
.work-body p { margin: 0; font-size: 0.88rem; color: var(--slate-600); }
.work-tag {
  display: inline-block; margin-top: 9px;
  padding: 4px 10px;
  background: var(--brand-100); color: var(--brand-800);
  border-radius: 100px;
  font-size: 0.74rem; font-weight: 800;
}

.empty-state {
  border: 2px dashed var(--line);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--slate-600);
  background: var(--brand-50);
}
.empty-state strong { display: block; color: var(--brand-900); margin-bottom: 5px; }

/* ---------------------------------------------------------- Tag lists -- */

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tag-list li { margin: 0; }
.tag-list a, .tag-list span {
  display: inline-block;
  padding: 8px 15px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.88rem; font-weight: 700;
  color: var(--slate-700);
  text-decoration: none;
}
.tag-list a:visited { color: var(--slate-700); }
.tag-list a:hover { border-color: var(--brand-700); background: var(--brand-100); color: var(--brand-700); }

/* ----------------------------------------------------------------- FAQ -- */

.faq { border-top: 3px solid var(--brand-700); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 17px 42px 17px 2px;
  font-weight: 800;
  color: var(--brand-900);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand-700); }
.faq summary::after {
  content: "+";
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400;
  color: var(--brand-700); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { margin: 0 0 17px; color: var(--slate-600); font-size: 0.95rem; padding-right: 24px; }

/* ------------------------------------------------------------ Crumbs -- */
/* Krug Ch.6: put them at the top, use > between levels, bold the last item. */

.crumbs {
  font-size: 0.85rem;
  color: var(--slate-600);
  padding: 13px 0;
  background: var(--brand-50);
  border-bottom: 1px solid var(--line);
}
.crumbs a { color: var(--slate-600); }
.crumbs a:visited { color: var(--slate-600); }
.crumbs .sep { color: var(--slate-400); margin: 0 7px; }
.crumbs .here { font-weight: 800; color: var(--brand-900); }

/* --------------------------------------------------------------- CTA -- */

.cta-band {
  background: var(--brand-700);
  background-image: var(--laths), var(--grad-cta);
  color: var(--white);
  text-align: center;
}
.cta-band :is(h2, h3) { color: var(--white); }
.cta-band p { color: #CBDDF4; max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { margin-top: 22px; }

/* --------------------------------------------------------------- Rate -- */

.rate-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.rate-table th, .rate-table td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.rate-table thead th { background: var(--brand-700); color: var(--white); font-weight: 800; }
.rate-table tbody th { background: var(--brand-50); font-weight: 700; color: var(--brand-900); }
.rate-table td { font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.note {
  background: var(--cta-pale);
  border-left: 4px solid var(--cta);
  padding: 14px 16px;
  font-size: 0.92rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Prose -- */

.prose { max-width: 68ch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin-bottom: 1.3em; }
.prose th, .prose td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; }
.prose thead th { background: var(--brand-700); color: var(--white); }
.prose tbody th { background: var(--brand-50); font-weight: 700; color: var(--brand-900); width: 38%; }

/* ------------------------------------------------------------- Footer -- */

.site-footer {
  background: var(--brand-900);
  color: var(--brand-300);
  font-size: 0.92rem;
  padding: 44px 0 0;
}
.site-footer h4 {
  color: var(--white);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 13px;
}
.site-footer a { color: var(--brand-300); text-decoration: none; }
.site-footer a:visited { color: var(--brand-300); }
.site-footer a:hover { color: var(--cta); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }

.footer-grid { display: grid; gap: 28px; }
@media (min-width: 600px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 36px; } }

.footer-bottom {
  margin-top: 36px;
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; flex-wrap: wrap;
  gap: 8px 18px; justify-content: space-between;
  font-size: 0.82rem;
  color: var(--brand-300);
}

/* ------------------------------------------------------- Sticky mobile -- */

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1.15fr 1fr;
  border-top: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 -3px 14px rgba(12,44,86,0.18);
}
.mobile-bar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 8px;
  font-weight: 800; font-size: 0.98rem;
  text-decoration: none;
}
.mobile-bar svg { width: 19px; height: 19px; }
.mobile-bar .mb-call, .mobile-bar .mb-call:visited { background: var(--cta); color: var(--ink); }
.mobile-bar .mb-wa, .mobile-bar .mb-wa:visited { background: var(--whatsapp); color: #04351A; }

body { padding-bottom: 56px; }
@media (min-width: 1000px) { .mobile-bar { display: none; } body { padding-bottom: 0; } }

/* ------------------------------------------------------------- Utility -- */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .logo-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .quote-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .quote-marquee { -webkit-mask-image: none; mask-image: none; }
}

@media print {
  .topbar, .site-nav, .mobile-bar, .nav-toggle, .cta-band { display: none; }
  body { padding-bottom: 0; }
  a { text-decoration: underline; }
}


/* ------------------------------------------------- No mid-label wrapping -- */
/* "Our Shutters", "Our Work", "Call Us" and friends are labels, not prose.
   A label that breaks in half is harder to scan and looks broken. */

.btn,
.site-nav a,
.topbar a,
.open-badge,
.logo-name,
.tagline,
.tag-list a,
.tag-list span,
.filter-bar button,
.work-tag,
.card .go,
.crumbs a,
.crumbs .here,
.eyebrow,
.review-meta span,
.gbp-card dt,
.stat span,
.logo-cell strong,
.logo-cell small,
.site-footer h4 { white-space: nowrap; }

/* The footer address and contact lines must still wrap normally. */
.site-footer li, .gbp-card dd { white-space: normal; }

.header-actions { flex: none; }
.hero-trust li { white-space: nowrap; }

/* Below 360px, let the longest labels wrap rather than overflow the screen. */
@media (max-width: 359px) {
  .btn, .logo-name { white-space: normal; }
}

/* --------------------------------------------------------- Client logos -- */

.logo-cell {
  background: var(--grad-head);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.logo-cell:hover { border-color: var(--brand-700); box-shadow: var(--shadow-2); }
.logo-cell img {
  max-height: 46px;
  max-width: 148px;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.logo-cell:hover img { filter: none; opacity: 1; }
.logo-cell strong {
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--brand-900);
}
.logo-cell small {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-700);
}

/* ==========================================================================
   THEMES

   The whole site's colour is one word. Change SITE_THEME in build.py to any
   of: olive | navy | charcoal | teal | maroon, then run `python build.py`.
   Everything below overrides the :root defaults above.

   To try them on the live site without rebuilding, open /theme-picker.html
   (that page is blocked from Google and is not linked from the site).
   ========================================================================== */

[data-theme="navy"] {
  --brand-900:#0B1633; --brand-800:#17264F; --brand-700:#1E3566;
  --brand-300:#8FA3CC; --brand-100:#E2E8F5; --brand-50:#F6F7FB;
  --cta:#F0A500; --cta-dark:#CC8A00; --cta-pale:#FFF3D6;
  --ink:#121826; --slate-700:#2C3550; --slate-600:#4A5473; --slate-400:#8A90A5;
  --line:#D8DCE8; --line-soft:#EAEDF4; --visited:#7A5AA8;
  --grad-hero:linear-gradient(150deg,#2A4B8D 0%,#132449 55%,#0B1633 100%);
  --grad-cta:linear-gradient(115deg,#1E3566 0%,#0B1633 100%);
  --grad-panel:linear-gradient(180deg,#FAFBFE 0%,#EFF2F9 100%);
  --grad-head:linear-gradient(180deg,#FFFFFF 0%,#FAFBFE 100%);
  --shadow-1:0 1px 2px rgba(11,22,51,.10);
  --shadow-2:0 4px 14px rgba(11,22,51,.14);
  --shadow-3:0 16px 44px rgba(11,22,51,.20);
}

[data-theme="charcoal"] {
  --brand-900:#141517; --brand-800:#26282D; --brand-700:#34373E;
  --brand-300:#A8ACB5; --brand-100:#E8E9EC; --brand-50:#F6F6F7;
  --cta:#FF6A13; --cta-dark:#DB5400; --cta-pale:#FFE9DB;
  --ink:#17181B; --slate-700:#34373E; --slate-600:#55595F; --slate-400:#8B8F97;
  --line:#DCDDE1; --line-soft:#EDEEF0; --visited:#8A5BB0;
  --grad-hero:linear-gradient(150deg,#3D4149 0%,#222429 55%,#141517 100%);
  --grad-cta:linear-gradient(115deg,#34373E 0%,#141517 100%);
  --grad-panel:linear-gradient(180deg,#FAFAFB 0%,#F1F1F3 100%);
  --grad-head:linear-gradient(180deg,#FFFFFF 0%,#FAFAFB 100%);
  --shadow-1:0 1px 2px rgba(20,21,23,.10);
  --shadow-2:0 4px 14px rgba(20,21,23,.15);
  --shadow-3:0 16px 44px rgba(20,21,23,.22);
}

[data-theme="teal"] {
  --brand-900:#0A3333; --brand-800:#0F4747; --brand-700:#14605E;
  --brand-300:#85B8B5; --brand-100:#DDEFED; --brand-50:#F3F9F8;
  --cta:#FF6B5B; --cta-dark:#E04E3D; --cta-pale:#FFE6E2;
  --ink:#122A2A; --slate-700:#2A4444; --slate-600:#4C6462; --slate-400:#869997;
  --line:#CFE0DE; --line-soft:#E4EFEE; --visited:#8A5BA0;
  --grad-hero:linear-gradient(150deg,#1A807C 0%,#0D4442 55%,#0A3333 100%);
  --grad-cta:linear-gradient(115deg,#14605E 0%,#0A3333 100%);
  --grad-panel:linear-gradient(180deg,#F7FBFA 0%,#E9F3F1 100%);
  --grad-head:linear-gradient(180deg,#FFFFFF 0%,#F7FBFA 100%);
  --shadow-1:0 1px 2px rgba(10,51,51,.10);
  --shadow-2:0 4px 14px rgba(10,51,51,.14);
  --shadow-3:0 16px 44px rgba(10,51,51,.20);
}

[data-theme="maroon"] {
  --brand-900:#3F0F18; --brand-800:#5C1723; --brand-700:#7A1F2E;
  --brand-300:#C79AA2; --brand-100:#F6E4E7; --brand-50:#FAF6F2;
  --cta:#E0A03C; --cta-dark:#BE8125; --cta-pale:#FCF0DC;
  --ink:#2A1116; --slate-700:#4A2830; --slate-600:#6B4A50; --slate-400:#9C8288;
  --line:#E3D7D2; --line-soft:#F0E8E4; --visited:#7A5A9E;
  --grad-hero:linear-gradient(150deg,#9E2C3E 0%,#5C1723 55%,#3F0F18 100%);
  --grad-cta:linear-gradient(115deg,#7A1F2E 0%,#3F0F18 100%);
  --grad-panel:linear-gradient(180deg,#FDFAF7 0%,#F3EAE3 100%);
  --grad-head:linear-gradient(180deg,#FFFFFF 0%,#FDFAF7 100%);
  --shadow-1:0 1px 2px rgba(63,15,24,.10);
  --shadow-2:0 4px 14px rgba(63,15,24,.14);
  --shadow-3:0 16px 44px rgba(63,15,24,.20);
}