/* =========================================================================
   kormo.css — Shared brand stylesheet for DG Serve BD.
   Loaded on every page. Contains the design token system, all global
   components (nav, footer, buttons, cards, FAQ, gallery, etc.),
   and responsive breakpoints.

   FILE STRUCTURE (in order):
     1.  :root design tokens (colors, radii, shadows, fonts)
     2.  Reset / base styles
     3.  Type utilities (.mono, .label)
     4.  Button system (.btn, variants, sizes)
     5.  Pill / eyebrow labels
     6.  Chip / segment selector (.seg)
     7.  Tag badges (.tag)
     8.  Icon well (.iw)
     9.  Card component (.card)
    10.  Header / nav (header.site, .nav, .brand, .mdrawer)
    11.  Breadcrumb (.crumb)
    12.  Section spacing (.sec, .head-row, .sec-head)
    13.  Page H1 (h1.page-h1)
    14.  Footer (footer.site, .foot)
    15.  FAQ accordion (.faq, .qa)
    16.  Reveal-on-scroll animation (.reveal)
    17.  Final CTA box (.final)
    18.  Responsive breakpoints (@media)
    19.  Shared photo gallery (.pg-gallery) — used on all detail pages

   NOTE: The .sv-ticker (service ticker image cards) CSS lives inline in
   services.html, not here. If you want to move it, cut the style block
   from services.html and paste it into this file.
   ========================================================================= */

/* =========================================================================
   SECTION 1 — DESIGN TOKENS
   All visual constants for the site live here as CSS custom properties.
   Change a value once and it updates everywhere that token is used.
   Never hard-code a color or shadow directly in a component rule — use
   a token instead so the design stays consistent.
   ========================================================================= */
:root{

  /* ── SURFACE TOKENS ──────────────────────────────────────────────────────
     The site uses a white-first, paper-feel palette.
     --bg / --surface  : pure white — page backgrounds and card faces
     --surface-2       : barely-there warm tint — offset bands, tinted sections
     --surface-3       : slightly deeper — used for hover states and inset areas
     To shift the overall warmth of the site, adjust the hue of these three.  */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F7F7F4;     /* hairline tint for offset bands */
  --surface-3:#F0EFEA;     /* deeper section bg */

  /* ── INK (TEXT) TOKENS ───────────────────────────────────────────────────
     Three levels of text darkness for visual hierarchy.
     --ink   : headlines, primary body copy, active nav items
     --ink-2 : secondary text, subtitles, footer links
     --ink-3 : placeholder text, disabled states, chevrons
     The slight warmth (.10 offset toward brown) reduces the harshness of
     pure black text on a warm-white background.  */
  --ink:#0E0F10;           /* near-black, slightly warm */
  --ink-2:#4A4D52;
  --ink-3:#8B8D92;

  /* ── LINE (BORDER) TOKENS ────────────────────────────────────────────────
     --line   : standard dividers, card borders, drawer borders
     --line-2 : slightly darker — used on interactive elements (buttons, chips)
                so they have a bit more visual weight than passive dividers.  */
  --line:#E6E5E1;
  --line-2:#D4D3CE;

  /* ── PRIMARY COLOR — GREEN ───────────────────────────────────────────────
     Used for: Products category, primary buttons, active nav underline,
     focus rings, link hovers, primary CTA box, gallery active thumb border.
     Chosen for its "banking / trustworthy" feel in the Bangladeshi market.

     TO REBRAND: change --primary and recompute the other three variants:
       --primary-d   : ~15% darker (hover state for buttons)
       --primary-soft: ~10% opacity tint of primary (badge backgrounds, CTA box)
       --primary-ink : very dark green (text on soft backgrounds for contrast)  */
  --primary:#1B7A4B;
  --primary-d:#155C39;
  --primary-soft:#E6F2EC;
  --primary-ink:#0D4127;

  /* ── SECONDARY COLOR — AMBER ─────────────────────────────────────────────
     Used ONLY for the Subscriptions category. Keeps subscriptions visually
     distinct from products (green) and services (ink/dark).
     Apply by setting data-context="subs" on <body> — CSS cascades handle the rest.
     See the body[data-context="subs"] rules scattered throughout this file.  */
  --amber:#C97A1B;
  --amber-d:#9C5D14;
  --amber-soft:#F8ECD6;
  --amber-ink:#6F420C;

  /* ── TERTIARY COLOR — BLUE ───────────────────────────────────────────────
     Used ONLY for the Websites category (data-context="web" on <body>).
     Communicates the digital/tech nature of web products vs the operational
     feel of products (green) and services (ink).  */
  --web:#1A5FA8;
  --web-d:#144A87;
  --web-soft:#E7F0FB;
  --web-ink:#0D3263;

  /* ── LEGACY ALIASES ──────────────────────────────────────────────────────
     Earlier versions of this codebase used --coral, --teal, and --gold.
     These aliases map the old names to the current tokens so older page
     HTML/CSS that references them still works without a find-and-replace.
     Do NOT use these names in new code — use the canonical token names above.  */
  --coral:var(--primary);
  --coral-ink:var(--primary-d);
  --coral-soft:var(--primary-soft);
  --teal:var(--amber);
  --teal-ink:var(--amber-d);
  --teal-soft:var(--amber-soft);
  --gold:var(--ink);
  --gold-ink:#000;
  --gold-soft:var(--surface-3);

  /* ── RADIUS TOKENS ───────────────────────────────────────────────────────
     Consistent corner rounding across the UI.
     --r-sm   : small chips, tags, pay badges
     --r-md   : medium interactive elements
     --r-lg   : cards (standard)
     --r-xl   : hero cards, gallery wrapper, final CTA box
     --r-full : fully-rounded pills, buttons, lang toggle  */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:9999px;

  /* ── SHADOW TOKENS ───────────────────────────────────────────────────────
     Three-level shadow system. All shadows use the same ink color with very
     low opacity to keep the "flat, airy" aesthetic.
     --sh-sm : resting state for cards and interactive elements
     --sh-md : hover/elevated state (cards on hover, modal-like surfaces)
     --sh-lg : drawers and overlaid panels  */
  --sh-sm:0 1px 2px rgba(14,15,16,.04);
  --sh-md:0 2px 6px rgba(14,15,16,.05), 0 14px 28px -16px rgba(14,15,16,.14);
  --sh-lg:0 4px 10px rgba(14,15,16,.06), 0 28px 50px -26px rgba(14,15,16,.18);

  --maxw:1240px;           /* maximum content width — change here to resize the layout */
  --ease:cubic-bezier(.16,1,.3,1); /* spring-like easing used on all transitions */

  /* ── FONT TOKENS ─────────────────────────────────────────────────────────
     --f-sans : Geist (Latin) — loaded from Google Fonts / CDN. Used for all
                English text, numbers, and UI labels.
     --f-bn   : Hind Siliguri — Bengali script font. Switched in via body.bn
                class (applied by applyLang() in site.js).
     --f-mono : Geist Mono — for code snippets, prices formatted as monospaced.

     TO CHANGE THE LATIN FONT: update --f-sans here AND the <link> tag in
     each HTML file's <head> that loads the font from the CDN.
     Same for --f-bn if you switch Bengali fonts.  */
  --f-sans:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-bn:'Hind Siliguri', 'Geist', sans-serif;
  --f-mono:'Geist Mono', ui-monospace, Menlo, monospace;
}

/* =========================================================================
   SECTION 2 — RESET / BASE
   ========================================================================= */

/* ── Anti-flash technique ─────────────────────────────────────────────────
   WHY html { visibility:hidden }:
   The page starts completely invisible. site.js runs the bilingual
   translation (applyLang), then adds the 'i18n-ready' class to <html>,
   which triggers html.i18n-ready { visibility:visible } and reveals the page.

   This prevents a flash of English text appearing before the Bengali
   translation can run — critical because the default language is Bengali
   and localStorage persists the user's choice.

   If you see a blank page in production, check that site.js is loading
   without errors. A JS error before classList.add('i18n-ready') will
   keep the page permanently hidden.  */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; visibility:hidden } /* hidden until i18n-ready */
html.i18n-ready{ visibility:visible }             /* revealed by site.js after translation */

/* Focus: show ring only for keyboard nav, never on mouse click */
:focus{ outline:none }
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:4px;
}
body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.bn, body.bn h1, body.bn h2, body.bn h3, body.bn h4{
  font-family:var(--f-bn);
}
a{ color:inherit; text-decoration:none }
img,svg{ max-width:100%; display:block }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
::selection{ background:var(--primary-soft); color:var(--primary-ink) }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 26px }

.ico{
  width:20px; height:20px;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  flex:0 0 auto;
}

/* ---------- type utility classes ---------- */
.mono{ font-family:var(--f-mono); letter-spacing:.02em }
.label{
  font-family:var(--f-sans);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ink-2);
  font-weight:500;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-sans);
  font-size:15.5px; font-weight:600;
  cursor:pointer;
  border-radius:var(--r-full);
  padding:13px 22px;
  min-height:50px;
  border:1.5px solid transparent;
  transition:transform .16s var(--ease), box-shadow .18s var(--ease), background .14s, border-color .14s, color .14s;
  white-space:nowrap;
  letter-spacing:-.005em;
}
.btn-primary{ background:var(--primary); color:#fff }
.btn-primary:hover{ transform:translateY(-1px); background:var(--primary-d); box-shadow:0 10px 20px -10px rgba(27,122,75,.45) }

.btn-amber{ background:var(--amber); color:#fff }
.btn-amber:hover{ transform:translateY(-1px); background:var(--amber-d); box-shadow:0 10px 20px -10px rgba(201,122,27,.45) }

.btn-ink{ background:var(--ink); color:#fff }
.btn-ink:hover{ transform:translateY(-1px); background:#000; box-shadow:0 10px 20px -10px rgba(14,15,16,.4) }

.btn-web{ background:var(--web); color:#fff }
.btn-web:hover{ transform:translateY(-1px); background:var(--web-d); box-shadow:0 10px 20px -10px rgba(26,95,168,.45) }

.btn-outline{ background:#fff; color:var(--ink); border-color:var(--ink) }
.btn-outline:hover{ background:var(--ink); color:#fff; transform:translateY(-1px) }

.btn-ghost{ background:transparent; color:var(--ink) }
.btn-ghost:hover{ background:var(--surface-2) }

.btn-lg{ font-size:16px; padding:15px 26px; min-height:56px }
.btn-sm{ font-size:14px; padding:9px 16px; min-height:40px }
.btn-block{ width:100%; display:flex }

/* legacy alias buttons used on older pages */
.btn-coral{ background:var(--primary); color:#fff }
.btn-coral:hover{ transform:translateY(-1px); background:var(--primary-d) }
.btn-teal{ background:var(--amber); color:#fff }
.btn-teal:hover{ transform:translateY(-1px); background:var(--amber-d) }
.btn-gold{ background:var(--ink); color:#fff }
.btn-gold:hover{ transform:translateY(-1px); background:#000 }

/* ---------- pill / eyebrow ---------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-sans);
  font-size:12.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:#fff;
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  padding:7px 14px;
}
.pill .d{ width:6px; height:6px; border-radius:50%; background:var(--primary) }
.pill.teal .d{ background:var(--amber) }
.pill.gold .d{ background:var(--ink) }

/* ---------- chip / segment selector ---------- */
.seg{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  padding:10px 16px;
  font-family:var(--f-sans);
  font-size:14.5px; font-weight:500;
  cursor:pointer;
  color:var(--ink-2);
  transition:transform .16s var(--ease), border-color .14s, color .14s, box-shadow .16s;
}
.seg .ico{ width:16px; height:16px; color:var(--ink-3) }
.seg:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-1px);
  box-shadow:var(--sh-sm);
}
.seg:hover .ico{ color:var(--primary) }
body[data-context="subs"] .seg:hover{ border-color:var(--amber); color:var(--amber) }
body[data-context="subs"] .seg:hover .ico{ color:var(--amber) }

/* ---------- tag ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--f-sans);
  font-size:11.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary-ink); background:var(--primary-soft);
  border-radius:var(--r-full);
  padding:5px 11px;
}
.tag.teal{ color:var(--amber-ink); background:var(--amber-soft) }
.tag.gold{ color:#fff; background:var(--ink) }
.tag.neutral{ color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2) }

/* ---------- icon well ---------- */
.iw{
  width:46px; height:46px;
  border-radius:13px;
  background:var(--primary-soft); color:var(--primary);
  display:grid; place-items:center;
  flex:0 0 auto;
  border:1px solid var(--primary-soft);
}
.iw.teal{ background:var(--amber-soft); color:var(--amber-ink); border-color:var(--amber-soft) }
.iw.gold{ background:var(--surface-3); color:var(--ink); border-color:var(--surface-3) }
.iw.neutral{ background:#fff; color:var(--ink-2); border:1px solid var(--line) }

/* ---------- card ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:var(--sh-sm);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .14s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md) }
.card-xl{ border-radius:var(--r-xl); padding:28px 26px }
.card-flat{ box-shadow:none }
.card-flat:hover{ transform:none; box-shadow:var(--sh-sm) }

/* =========================================================================
   SECTION 10 — HEADER / NAV
   The site header is a sticky frosted-glass bar that stays fixed at the
   top of the viewport as the user scrolls.

   STICKY + FROSTED GLASS:
     position:sticky + top:0 keeps it in view during scroll.
     background rgba(...,.88) + backdrop-filter:blur() creates the
     frosted-glass effect — content beneath the nav is blurred and the
     bar is semi-transparent. The -webkit- prefix is needed for Safari.

   Z-INDEX LAYERS:
     z-index:60  = nav bar (always above page content)
     z-index:70  = mobile drawer overlay (above the nav)

   TO CHANGE NAV HEIGHT: update height:68px on .nav (and adjust the
   mobile overrides in the @media blocks near the bottom of this file).
   ========================================================================= */

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.88); /* semi-transparent white for frosted effect */
  backdrop-filter:blur(14px) saturate(140%);          /* frosted glass blur */
  -webkit-backdrop-filter:blur(14px) saturate(140%);  /* Safari prefix */
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; gap:32px;
  height:68px; /* Change this to adjust nav bar height */
}
/* ── Brand / logo area ────────────────────────────────────────────────────
   The logo is composed of: .brand-ico (the icon image) + .nm (wordmark).
   The wordmark uses two weights: .light for "DG Serve" and .heavy for "BD",
   plus a small green .dot to reinforce the primary color.

   TO REPLACE THE LOGO IMAGE: swap the src of the <img class="brand-ico"> tag.
   TO CHANGE THE WORDMARK TEXT: edit the HTML — no CSS changes needed.  */
.brand{
  display:flex; align-items:center; gap:5px;
  font-family:var(--f-sans);
  font-size:20px; font-weight:700;
  letter-spacing:-.022em;
  color:var(--ink);
  line-height:1;
}
/* brand icon image (replaces letter-mark box) */
.brand-ico{
  width:46px; height:46px;
  flex:0 0 auto; display:block;
  object-fit:contain;
}
/* the wordmark: slim "DG Serve" + bold "BD" */
.brand .nm{ display:inline-flex; align-items:baseline; gap:0; letter-spacing:-.022em }
.brand .nm .light{ font-weight:500; color:var(--ink-2) } /* "DG Serve" — lighter weight */
.brand .nm .heavy{ font-weight:700; color:var(--ink) }   /* "BD" — heavier weight */
.brand .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--primary); margin-left:3px;
  align-self:flex-end; margin-bottom:5px;
}
.nav-links{
  display:flex; align-items:center; gap:24px;
  font-family:var(--f-sans);
  font-size:14.5px; font-weight:500;
  color:var(--ink-2);
}
.nav-links a{ transition:color .15s; padding:6px 0; position:relative }
.nav-links a:hover{ color:var(--ink) }
.nav-links a.active{ color:var(--ink); font-weight:600 }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background:var(--primary);
}
body[data-context="subs"] .nav-links a.active::after{ background:var(--amber) }
body[data-context="serv"] .nav-links a.active::after{ background:var(--ink) }
body[data-context="web"]  .nav-links a.active::after{ background:var(--web) }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px }

.lang{
  font-family:var(--f-sans);
  font-size:13px; font-weight:500;
  color:var(--ink-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-full);
  padding:7px 13px;
  cursor:pointer;
  background:#fff;
  transition:.15s;
}
.lang:hover{ border-color:var(--ink); color:var(--ink) }

.burger{
  display:none; width:42px; height:42px;
  border-radius:10px;
  border:1px solid var(--line-2);
  background:#fff;
  place-items:center;
  cursor:pointer; color:var(--ink);
}
.nav .nav-cta{ min-height:42px; padding:10px 18px; font-size:14.5px }

/* ── Mobile drawer ────────────────────────────────────────────────────────
   A full-screen overlay with a white .sheet panel sliding in from the right.
   Toggled by site.js via the 'open' class on #mdrawer.

   OVERLAY: rgba(14,15,16,.4) + backdrop-filter:blur(4px) dims + blurs the
   page behind the drawer so the user's focus stays on the nav links.

   ANIMATION: .sheet starts offset 20px to the right (transform:translateX(20px))
   and slides to 0 when .open is added. The overlay fades in simultaneously.

   WIDTH: min(86vw, 340px) — takes up 86% of a phone screen but caps at
   340px on wider devices so it doesn't feel too large on tablets.

   TO ADD A LINK: add an <a class="link"> tag inside .sheet in the HTML.  */

/* mobile drawer */
.mdrawer{
  position:fixed; inset:0; z-index:70; /* above nav (z-index:60) */
  background:rgba(14,15,16,.4);        /* dark overlay behind the sheet */
  backdrop-filter:blur(4px);
  display:none;
  opacity:0; transition:opacity .2s var(--ease);
}
.mdrawer.open{ display:block; opacity:1 }
.mdrawer .sheet{
  position:absolute; top:0; right:0; bottom:0;
  width:min(86vw, 340px); /* responsive width — change 340px to adjust max drawer width */
  background:#fff;
  padding:22px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:var(--sh-lg);
  transform:translateX(20px); transition:transform .25s var(--ease); /* slide-in animation */
}
.mdrawer.open .sheet{ transform:translateX(0) } /* fully visible when open */
.mdrawer a.link{
  font-family:var(--f-sans);
  font-size:17px; font-weight:600; color:var(--ink);
  padding:14px 4px;
  border-bottom:1px solid var(--line); /* divider between each nav link */
}

/* ---------- breadcrumb ---------- */
.crumb{
  font-family:var(--f-sans);
  font-size:13px; color:var(--ink-3);
  padding:24px 0 0;
  font-weight:500;
}
.crumb a:hover{ color:var(--primary) }
body[data-context="subs"] .crumb a:hover{ color:var(--amber) }
body[data-context="web"]  .crumb a:hover{ color:var(--web) }
.crumb b{ color:var(--ink); font-weight:600 }

/* ---------- section spacing ---------- */
.sec{ padding:88px 0 }
.sec.tinted{ background:var(--surface-2) }

/* row-style head (heading left, action button right; matches reference) */
.head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  margin-bottom:26px;
}
.head-row .t{
  font-family:var(--f-sans);
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:700; letter-spacing:-.018em;
  color:var(--ink); line-height:1.15;
}
.head-row .t em{ font-style:normal; color:var(--primary); font-weight:700 }
body[data-context="subs"] .head-row .t em{ color:var(--amber) }
body[data-context="web"]  .head-row .t em{ color:var(--web) }
.head-row .s{
  font-family:var(--f-sans);
  font-size:14.5px; color:var(--ink-2);
  margin-top:5px; font-weight:400;
  max-width:54ch;
}
.head-row .right{ flex-shrink:0 }

/* ---------- section heads (no pills) ---------- */
.sec-head{ max-width:62ch; margin:0 auto 44px; text-align:center }
.sec-head .t{
  font-family:var(--f-sans);
  font-size:clamp(30px, 4vw, 46px);
  font-weight:700; letter-spacing:-.025em;
  line-height:1.08;
  color:var(--ink);
}
.sec-head .t em{ font-style:normal; color:var(--primary); font-weight:700 }
body[data-context="subs"] .sec-head .t em{ color:var(--amber) }
body[data-context="serv"] .sec-head .t em{ color:var(--ink) }
body[data-context="web"]  .sec-head .t em{ color:var(--web) }
.sec-head .s{
  font-family:var(--f-sans);
  font-size:17px; color:var(--ink-2);
  margin-top:14px; font-weight:400;
  max-width:50ch; margin-left:auto; margin-right:auto;
}
.sec-head.left{ text-align:left; max-width:none; margin:0 0 44px }
.sec-head.left .s{ margin-left:0; margin-right:0 }

/* ---------- page H1 ---------- */
h1.page-h1{
  font-family:var(--f-sans);
  font-size:clamp(34px, 5.2vw, 64px);
  font-weight:700; letter-spacing:-.03em;
  line-height:1.04;
  color:var(--ink);
}
h1.page-h1 .c{ color:var(--primary); font-weight:700 }
h1.page-h1 .c.teal{ color:var(--amber) }
h1.page-h1 .c.gold{ color:var(--ink) }
h1.page-h1 em{ font-style:normal; color:var(--primary); font-weight:700 }

/* ---------- footer (brand-matching, light) ---------- */
footer.site{
  background:var(--surface-2);
  color:var(--ink-2);
  border-top:1px solid var(--line);
  padding:60px 0 32px;
}
.foot{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:30px;
  margin-bottom:40px;
}
.foot .about .brand{ color:var(--ink) }
.foot .about .brand .nm .light{ color:var(--ink-2) }
.foot .about .brand .nm .heavy{ color:var(--ink) }
.foot .about p{
  color:var(--ink-2); font-size:15px;
  margin:14px 0 18px;
  max-width:36ch; font-weight:400;
}
.foot h5{
  font-family:var(--f-sans);
  font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); margin-bottom:18px;
}
.foot a{
  display:block;
  color:var(--ink-2); font-size:15px;
  margin-bottom:11px; font-weight:400;
  transition:color .15s;
}
.foot a:hover{ color:var(--primary) }
.pays{ display:flex; gap:6px; flex-wrap:wrap }
.pay{
  font-family:var(--f-sans);
  font-size:11px; font-weight:600;
  letter-spacing:.04em;
  color:var(--ink-2);
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:5px 9px;
  background:#fff;
}
.foot-b{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--f-sans);
  font-size:13px; color:var(--ink-3);
}

/* =========================================================================
   SECTION 15 — FAQ ACCORDION
   Clean line-divided accordion. One question open at a time (enforced in
   site.js). Animation uses max-height transition — a common CSS accordion
   technique because height:auto cannot be transitioned directly.

   STRUCTURE:
     .faq          — container (max 780px, centered)
       .qa          — one question/answer pair
         button     — the question text + chevron icon
         .a         — answer wrapper (max-height animates to reveal)
           > div    — actual answer text (padding lives here, not on .a)

   MAX-HEIGHT TRICK: .qa .a starts at max-height:0 (hidden). When .open is
   added by site.js, max-height jumps to 640px, letting the transition animate
   the reveal. The 640px cap means answers longer than that will be clipped —
   increase it if you have very long answers.

   CONTEXT-AWARE COLORS: The chevron and hover color change based on
   data-context on <body>, keeping FAQ visually consistent with each
   category's accent color.
   ========================================================================= */

/* ---------- FAQ accordion (clean, line-divided, white) ---------- */
.faq{ max-width:780px; margin:0 auto; display:flex; flex-direction:column }
.qa{
  border-top:1px solid var(--line);
  overflow:hidden;        /* hides the .a div when max-height is 0 */
  background:transparent;
  border-radius:0;
  box-shadow:none;
}
.qa:last-child{ border-bottom:1px solid var(--line) } /* bottom border on last item only */
.qa button{
  width:100%; text-align:left;
  background:none; border:none; cursor:pointer;
  font-family:var(--f-sans);
  font-size:18.5px; font-weight:600; letter-spacing:-.012em;
  color:var(--ink);
  padding:22px 4px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  transition:color .15s;
}
.qa button:hover{ color:var(--primary) }
.qa .a{
  max-height:0; overflow:hidden;       /* collapsed by default */
  transition:max-height .35s var(--ease);
  color:var(--ink-2); font-size:16px; font-weight:400;
}
.qa .a > div{ padding:0 4px 24px; max-width:62ch } /* answer text padding */
.qa.open .a{ max-height:640px } /* Change 640px if answers are taller than this */
.qa .chev{ transition:transform .25s var(--ease); color:var(--ink-3); flex:0 0 auto }
.qa.open .chev{ transform:rotate(180deg); color:var(--primary) } /* chevron flips when open */
/* Context-aware accent colors for FAQ — matches category identity */
body[data-context="subs"] .qa button:hover{ color:var(--amber) }
body[data-context="subs"] .qa.open .chev{ color:var(--amber) }
body[data-context="web"]  .qa button:hover{ color:var(--web) }
body[data-context="web"]  .qa.open .chev{ color:var(--web) }

/* =========================================================================
   SECTION 16 — REVEAL-ON-SCROLL ANIMATION
   Elements with class="reveal" start invisible and shifted down 18px.
   site.js uses IntersectionObserver to add class="in" when the element
   scrolls into view, triggering the CSS transition.

   TO ANIMATE A NEW ELEMENT: add class="reveal" to it in the HTML.
   TO CHANGE ANIMATION SPEED: update the .55s duration values below.
   TO CHANGE THE SLIDE DISTANCE: update translateY(18px) below.

   NOTE: @media (prefers-reduced-motion) at the bottom of this file
   disables this animation for users who have requested reduced motion
   in their OS settings — do not remove that override.
   ========================================================================= */

/* ---------- reveal animation ---------- */
.reveal{
  opacity:0; transform:translateY(18px); /* starting state: invisible, shifted down */
  transition:opacity .55s var(--ease), transform .55s var(--ease); /* Change .55s to adjust speed */
}
.reveal.in{ opacity:1; transform:none } /* end state: fully visible, in place */

/* ---------- final CTA box (brand cream, not black) ---------- */
.final{ padding:80px 0 90px }
.final .box{
  background:linear-gradient(160deg, var(--primary-soft), var(--surface-2) 80%);
  color:var(--ink);
  border:1px solid var(--primary);
  border-radius:var(--r-xl);
  padding:62px 36px;
  text-align:center;
  box-shadow:var(--sh-md);
  position:relative;
  overflow:hidden;
}
.final .box::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 320px at 90% 110%, rgba(27,122,75,.10), transparent 60%);
  pointer-events:none;
}
.final .box > *{ position:relative; z-index:1 }
.final h2{
  font-family:var(--f-sans);
  font-size:clamp(28px, 3.8vw, 44px);
  font-weight:700; letter-spacing:-.025em;
  max-width:24ch; margin:0 auto;
  line-height:1.08;
  color:var(--ink);
}
.final h2 em{ font-style:normal; color:var(--primary) }
.final p{
  color:var(--ink-2); margin-top:14px;
  font-size:17px; max-width:50ch; margin-left:auto; margin-right:auto;
  font-weight:400;
}
.final .ctas{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:center;
  margin-top:28px;
}
.final .ctas .btn-outline{
  border-color:var(--ink); color:var(--ink); background:#fff;
}
.final .ctas .btn-outline:hover{
  background:var(--ink); color:#fff;
}

/* =========================================================================
   SECTION 18 — RESPONSIVE BREAKPOINTS

   THREE BREAKPOINTS:
     980px — tablet / small laptop: footer goes 2-column, container tightens
     640px — mobile: nav-links hidden (burger shown), all grids collapse to 1 col,
             most buttons go full-width (exception: nav bar buttons stay auto-width)
     420px — small phone: further padding reduction, nav shrinks

   ADDING A NEW BREAKPOINT-SPECIFIC RULE: add it inside the relevant
   @media block here, or inside a component block above with its own
   @media — either approach works. Prefer putting it near the component
   rule for discoverability.

   GRID OVERRIDES: The  [class*="grid-3"] / [class*="grid-2"]  rules at
   640px collapse any element whose class name contains "grid-3" or "grid-2"
   to a single column. This means you get mobile-stacking for free on any
   new grid section as long as you follow the naming convention.
   ========================================================================= */

/* ---------- responsive ---------- */
@media (max-width:980px){
  .foot{ grid-template-columns:1fr 1fr } /* footer: 4-col → 2-col on tablet */
  .container{ padding:0 24px }
}
@media (max-width:640px){
  body{ font-size:16px }
  .nav-links{ display:none }  /* hide desktop nav links — drawer takes over */
  .burger{ display:grid }     /* show hamburger icon */
  .nav{ gap:14px; height:62px }
  .brand{ font-size:18px }
  .foot{ grid-template-columns:1fr }        /* footer: 2-col → 1-col on mobile */
  .foot > div{ border-top:1px solid var(--line); padding-top:24px }
  .foot > div:first-child{ border-top:none; padding-top:0 }
  /* full-width only for regular/large buttons — keep .btn-sm compact */
  .btn:not(.btn-sm){ width:100%; justify-content:center }
  /* nav buttons must never go full-width in the nav bar */
  .nav-right .btn{ width:auto; justify-content:flex-start }
  .final .ctas .btn{ width:100% }
  .sec{ padding:56px 0 }
  .final .box{ padding:36px 20px }
  /* prevent horizontal scroll */
  .container{ padding:0 18px }
  /* section heads tighten up */
  .sec-head{ margin-bottom:28px }
  .head-row{ flex-direction:column; align-items:flex-start; gap:14px }
  /* pill / seg chips stay inline */
  .pill, .seg{ width:auto; flex-shrink:0 }
  /* final box CTAs stay centred */
  .final .ctas{ gap:10px }
  /* iw icons shrink slightly */
  .iw.lg{ width:44px; height:44px }
  /* page hero on inner pages */
  .page-h1{ font-size:clamp(26px,7vw,44px) }
  /* breadcrumb wrap */
  .crumb{ font-size:13px }
  /* grid overrides — any class containing "grid-3" or "grid-2" collapses to 1 col */
  [class*="grid-3"]{ grid-template-columns:1fr !important }
  [class*="grid-2"]{ grid-template-columns:1fr !important }
}
@media (max-width:420px){
  /* Small phones: tighten further */
  .container{ padding:0 14px }
  .nav{ height:58px }
  .brand-ico{ width:38px; height:38px }
  .brand .nm{ font-size:16px }
  .final .box{ padding:28px 16px }
  .sec{ padding:44px 0 }
}

/* ── Accessibility: reduced motion ───────────────────────────────────────
   Users who have "Reduce Motion" enabled in their OS (common for vestibular
   disorders) get no scroll animations and no smooth scrolling.
   NEVER remove this block — it is an accessibility requirement.  */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none } /* show all reveals immediately */
  *{ scroll-behavior:auto }
}

/* =========================================================================
   SECTION 19 — SHARED PHOTO GALLERY (.pg-gallery)

   USED ON: All detail pages — product detail, plan detail, service detail,
   and work/portfolio detail. This is a reusable component, NOT page-specific.

   HOW IT WORKS:
   The gallery is rendered by JavaScript on each detail page. It reads photos
   from that page's catalog data object (the photos[] array field), builds the
   HTML, and injects it into the .pg-gallery container.

   STRUCTURE:
     .pg-gallery           — outer wrapper (white card with rounded corners)
       .pg-main            — large main image area (16:9 aspect ratio)
         .pg-main-img      — the currently displayed photo (<img>)
         .pg-placeholder   — shown when no photos are provided (gradient placeholder)
         .pg-nav.pg-nav-prev  — left arrow button (overlaid on image)
         .pg-nav.pg-nav-next  — right arrow button (overlaid on image)
         .pg-count         — "2 / 5" counter badge (bottom-right of image)
       .pg-strip           — horizontally scrollable thumbnail row
         .pg-thumb         — each thumbnail; .active = currently displayed image

   TO SWAP IN REAL PHOTOS (PRODUCTION):
     In each product/service/plan's data object, populate the photos[] array
     with real image URLs. The .pg-placeholder will automatically be replaced
     by the first real photo. The placeholder is only shown when photos[] is
     empty or missing — it is DEMO/PLACEHOLDER content and must be replaced
     before launch.

   ACTIVE THUMBNAIL: The active thumb gets a 2px primary-green border
   (border-color:var(--primary)) and full opacity. Inactive thumbs are
   55% opacity to recede visually.

   TO CHANGE THE ASPECT RATIO: update aspect-ratio:16/9 on both
   .pg-main-img and .pg-placeholder.
   ========================================================================= */

/* ── Shared photo gallery ─────────────────────────────────────────────── */
.pg-gallery { margin:28px 0 0; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-sm) }
.pg-main { position:relative; background:var(--surface-2); overflow:hidden; user-select:none }
.pg-main-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:opacity .15s }
/* .pg-placeholder is shown when the catalog entry has no photos yet — DEMO/PLACEHOLDER, replace with real photos */
.pg-placeholder { width:100%; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,var(--primary-soft) 0%,#fff 100%); color:var(--ink-3); font-size:13.5px; font-weight:500 }
.pg-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(255,255,255,.9); backdrop-filter:blur(4px); border:1px solid var(--line); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; box-shadow:var(--sh-sm); color:var(--ink) }
.pg-nav:hover { background:#fff }
.pg-nav-prev { left:14px }  /* left arrow — positioned over the left edge of the main image */
.pg-nav-next { right:14px } /* right arrow — positioned over the right edge of the main image */
.pg-count { position:absolute; bottom:10px; right:14px; background:rgba(0,0,0,.45); color:#fff; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px; pointer-events:none } /* "1 / 5" badge */
/* Thumbnail strip — horizontally scrollable, scrollbar hidden for a clean look */
.pg-strip { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:none }
.pg-strip::-webkit-scrollbar { display:none } /* hide scrollbar in Chrome/Safari */
.pg-thumb { width:80px; height:58px; border-radius:8px; object-fit:cover; cursor:pointer; border:2px solid transparent; transition:border-color .15s,opacity .15s; opacity:.55; flex-shrink:0 }
.pg-thumb.active { border-color:var(--primary); opacity:1 } /* active thumb: green border + full opacity */
.pg-thumb:hover:not(.active) { opacity:.82 }
@media (max-width:600px) {
  /* Shrink nav arrows and thumbnails on small phones to save space */
  .pg-nav { width:34px; height:34px }
  .pg-thumb { width:64px; height:46px }
}