/* ==========================================================================
   INFORMATIONAL PAGES
   about-us · contact-us · faq · support · privacy-policy · terms-and-conditions

   One sheet for six pages, because they are six variations on the same
   thing: a page you read. They share a hero, a reading column and a small
   set of card shapes, and the alternative — six sheets each redefining a
   page heading — is how two pages end up with different sized headings for
   no reason anybody can remember.

   Numbers live in the --info-* group in tokens.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PAGE HERO
   Centred, short, and deliberately plain: on these pages the heading is not
   the product, it is a signpost. The wash behind it is the only decoration.
   -------------------------------------------------------------------------- */
.ihero {
  position: relative;
  padding-block: var(--info-hero-pad) var(--space-10);
  text-align: center;
  isolation: isolate;
}

.ihero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--info-hero-wash);
  pointer-events: none;
}

.ihero__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}

.ihero__title {
  margin: 0;
  max-width: 20ch;
  font-size: var(--text-h1);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.ihero__lede {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.ihero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
}

/* The date stamp on the legal pages. */
.ihero__stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.ihero__stamp .icon { width: 1rem; height: 1rem; }

/* A hero that carries a photograph instead of a wash. */
.ihero__figure {
  margin: var(--space-10) 0 0;
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.ihero__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   2. TWO-COLUMN STORY  (about-us)
   The before and the after, side by side, because the argument for this
   product is a comparison and a comparison reads badly stacked.
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.story__figure {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.story__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

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

.story__body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--info-prose-size);
  line-height: var(--info-prose-leading);
}

/* Before / after, as two panels rather than prose, so the second one reads
   as the answer to the first. */
.shift { display: grid; gap: var(--space-4); }

.shift__panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--info-card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  background: var(--color-surface);
}

.shift__panel--then { background: var(--color-surface-muted); }

.shift__panel--now {
  border-color: var(--color-accent-soft-border);
  background: var(--color-accent-soft);
}

.shift__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.shift__panel--now .shift__label { color: var(--color-accent-text); }

.shift__text {
  margin: 0;
  color: var(--color-text);
  font-size: var(--info-prose-size);
  line-height: var(--leading-snug);
}


/* --------------------------------------------------------------------------
   3. VALUES BENTO  (about-us)
   Four values, unequal tiles. Equal tiles would say all four matter the
   same amount, which is never true and reads as a shrug.
   -------------------------------------------------------------------------- */
.values { display: grid; gap: var(--space-4); }

.values__item {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--info-card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.values__item:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.values__item--lead {
  border-color: var(--color-accent-soft-border);
  background: var(--color-accent-soft);
}

.values__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-accent-text);
  box-shadow: var(--shadow-xs);
}

.values__item--lead .values__icon {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-accent);
}

.values__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.values__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}


/* --------------------------------------------------------------------------
   4. PARENT COMPANY PANEL  (about-us)
   A dark band, so the one section on the page that is about somebody else
   is visibly a different thing and not more of DigitalProfile.lk.
   -------------------------------------------------------------------------- */
.parent__panel {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding: clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  isolation: isolate;
}

.parent__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

.parent__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      120deg,
      rgb(var(--rgb-slate-900) / 0.94) 0%,
      rgb(var(--rgb-slate-900) / 0.8) 100%);
}

.parent__head { display: grid; gap: var(--space-4); max-width: 46rem; }

.parent__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.parent__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--info-prose-size);
  line-height: var(--info-prose-leading);
}

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

.parent__stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-translucent);
}

.parent__num {
  font-size: var(--text-h4);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
}

.parent__cap {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.parent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The signed line. Not a photograph, because we do not have one — an
   initial, a name and a role is honest and sits better next to a quote. */
.parent__quote {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--info-card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  background: var(--color-surface-translucent);
}

.parent__quote blockquote {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.parent__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.parent__avatar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.parent__name { display: block; font-weight: var(--weight-semibold); }

.parent__role {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* --------------------------------------------------------------------------
   5. CONTACT  (contact-us)
   Information on one side, the form on the other. The information comes
   first in the source: most people who open this page want the WhatsApp
   number, not a form.
   -------------------------------------------------------------------------- */
.contact { display: grid; gap: var(--space-8); align-items: start; }

.contact__aside { display: grid; gap: var(--space-4); }

.ccard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--info-card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.ccard:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md);
}

.ccard__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.ccard--whatsapp .ccard__icon {
  background: var(--color-success-soft);
  color: var(--color-success-text);
}

.ccard__title {
  margin: 0;
  align-self: end;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.ccard__value {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  word-break: break-word;
}

.ccard__value a { color: inherit; text-decoration: none; }
.ccard__value a:hover { color: var(--color-accent-text); text-decoration: underline; }

.ccard__note {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.contact__panel {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.contact__head { display: grid; gap: var(--space-2); }

.contact__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.contact__sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* The honeypot. Pushed off-screen rather than display:none, because some
   browsers skip hidden fields entirely — and a field a bot never fills is
   only useful if the bot can actually see it. */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__foot {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}


/* --------------------------------------------------------------------------
   6. SUPPORT
   A help desk reads as a grid of doors. The WhatsApp button underneath them
   is the one that is actually answered by a person, so it glows and the
   doors do not.
   -------------------------------------------------------------------------- */
.helpgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--info-card-min), 1fr));
  gap: var(--space-4);
}

.help {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--info-card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.help:hover,
.help:focus-visible {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.help__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.help__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.help__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.help__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.help__go .icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-fast) var(--ease-out);
}

.help:hover .help__go .icon { transform: translateX(3px); }

/* ---- The glowing call ---- */
.desk {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: clamp(2rem, 1.5rem + 2.4vw, 3.25rem) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  background: var(--color-surface);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.desk__title {
  margin: 0;
  max-width: 22ch;
  font-size: var(--text-h3);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.desk__text {
  margin: 0;
  max-width: 50ch;
  color: var(--color-text-muted);
  font-size: var(--info-prose-size);
  line-height: var(--info-prose-leading);
}

.desk__cta { box-shadow: var(--info-glow); }
.desk__cta:hover { box-shadow: var(--info-glow-hover); }

.desk__hours {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.desk__hours .icon { width: 1rem; height: 1rem; }


/* --------------------------------------------------------------------------
   7. LONG-FORM PROSE  (privacy-policy, terms-and-conditions)
   Everything here exists to make a page of legal text survivable: one
   column at a readable measure, generous air above each clause so the
   headings do the navigating, and a contents list that follows you down.
   -------------------------------------------------------------------------- */
.legal { display: grid; gap: var(--space-10); align-items: start; }

/* ---- Contents ---- */
.toc {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--info-card-radius);
  background: var(--color-surface-muted);
}

.toc__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.toc__list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc__list a {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-decoration: none;
}

.toc__list a::before {
  counter-increment: toc;
  content: counter(toc) ".";
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.toc__list a:hover { color: var(--color-accent-text); }

/* ---- The reading column ---- */
.prose {
  max-width: var(--info-measure);
  color: var(--color-text-muted);
  font-size: var(--info-prose-size);
  line-height: var(--info-prose-leading);
}

.prose > * + * { margin-block-start: var(--info-prose-gap); }

.prose h2 {
  margin-block-start: var(--info-h2-space);
  margin-block-end: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: var(--info-prose-rule);
  color: var(--color-text);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  /* The sticky header must not land on top of a heading you just jumped to. */
  scroll-margin-block-start: var(--info-toc-top);
}

.prose > h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.prose h3 {
  margin-block-start: var(--info-h3-space);
  margin-block-end: var(--space-3);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  scroll-margin-block-start: var(--info-toc-top);
}

.prose p { margin-block-end: 0; }

.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-2);
  margin-block-end: 0;
  padding-inline-start: var(--space-6);
}

.prose li { line-height: var(--info-prose-leading); }
.prose li::marker { color: var(--color-text-subtle); }

.prose strong { color: var(--color-text); font-weight: var(--weight-semibold); }

.prose a {
  color: var(--color-accent-text);
  font-weight: var(--weight-medium);
  text-underline-offset: 0.2em;
}

/* A short paragraph that needs to be noticed in the middle of a long one. */
.prose .callout {
  display: grid;
  gap: var(--space-2);
  padding: var(--info-card-pad);
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-xl);
  background: var(--color-accent-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.prose .callout p { margin: 0; }

.prose__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-6);
  border-block-start: var(--info-prose-rule);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}


/* --------------------------------------------------------------------------
   8. FAQ PAGE EXTRAS
   The accordion itself is assets/css/faq.css. This is only the category
   heading that sits above each list.
   -------------------------------------------------------------------------- */
.faqcat + .faqcat { margin-block-start: var(--space-12); }

.faqcat__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-2);
}

.faqcat__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

.faqcat__title {
  margin: 0;
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  scroll-margin-block-start: var(--info-toc-top);
}

.faqcat__count {
  margin-inline-start: auto;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.faqcat .faq__list { margin-block-start: var(--space-4); }


/* --------------------------------------------------------------------------
   9. WIDER SCREENS
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  /* Story: picture on one side, argument on the other. */
  .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-12); }
  .story--flip .story__figure { order: 2; }

  /* Six columns, not four, so the lead value can take two thirds of the top
     row — which is what makes this a bento and not a 2x2 grid of boxes. */
  .values { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .values__item { grid-column: span 2; }
  .values__item--lead { grid-column: span 4; }

  .parent__panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
  }

  /* Contact: the form is the wider column, because it is the one being
     filled in; the cards beside it only need to be read. */
  .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-10); }

  /* Legal: contents parked in the margin, following the reader down. */
  .legal { grid-template-columns: var(--info-toc-w) minmax(0, 1fr); gap: var(--space-12); }
  .toc { position: sticky; inset-block-start: var(--info-toc-top); }
}


/* --------------------------------------------------------------------------
   10. NARROW SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .ihero__lede { font-size: var(--text-md); }

  .ccard { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .ccard__icon { grid-row: auto; }
  .ccard__note { grid-column: 1; }

  .parent__quote blockquote { font-size: var(--text-md); }
}


/* --------------------------------------------------------------------------
   11. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .values__item,
  .help,
  .help__go .icon,
  .ccard {
    transition: none;
  }

  .values__item:hover,
  .help:hover,
  .help:focus-visible { transform: none; }
}