/* =======================================================
  Designed by PageMelo
  A Zarephia brand

  Visit the website: https://pagemelo.com
  Buy here: https://pagemelo.gumroad.com
  Follow for updates: https://instagram.com/hello.pagemelo

  License: Single Use Only
  Copyright © PageMelo. All rights reserved.
  ======================================================= */

/* ============ THEME & TOKENS ============ */
:root {
  --bg: #ffffff;
  --surface: #f7f8fb;
  --text: #101418;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #6c5ce7;     /* purple */
  --accent-contrast: #ffffff;
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
  --radius: 1.25rem;     /* 20px */
  --hero-font: 'Poppins', sans-serif;
  --content-font: 'Poppins', sans-serif;
  --nav-h: 76px; /* fallback; refined precisely by JS on load */
}
html[data-theme="dark"] {
  --bg: #12171e;
  --surface: #1a212b;
  --text: #d7dee6;
  --muted: #98a2ae;
  --border: #2a3441;
  --accent: #22d3ee;     /* cyan */
  --accent-contrast: #05202a;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
html[data-theme="soft"] {
  --bg: #fffdfa;
  --surface: color-mix(in oklab, var(--accent) 5%, #fffaf4);
  --text: #1b1d21;
  --muted: #6f6b6b;
  --border: color-mix(in oklab, var(--accent) 9%, #f6efe8);
  --accent: #d99a5b;     /* warm sand, unisex — overridden per accentPreset at runtime */
  --accent-contrast: #2a1a0d;
  --shadow: 0 10px 30px rgba(217, 154, 91, 0.18);
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--hero-font), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
h1, h2, h3, h4, h5, h6, .navbar-brand, .section-title { font-family: var(--hero-font), sans-serif; }
/* --content-font is intentionally reserved for the italic testimonial quotes below,
   matching the original design where Lora only ever appears there. */

.no-transition, .no-transition * { transition: none !important; }

.section-pad { padding: 90px 0; min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; scroll-margin-top: var(--nav-h); }
.section-pad > .container { width: 100%; }
.section-alt { background: var(--surface); }
.section-title { font-weight: 700; letter-spacing: -0.3px; margin-bottom: .6rem; }
.lead-muted { color: var(--muted); }

/* Wider side margins on larger screens */
@media (min-width: 992px) {
  .container { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 1400px) {
  .container { padding-left: 6rem; padding-right: 6rem; }
}
/* Mobile: Bootstrap's default ~12px container padding reads too tight */
@media (max-width: 767.98px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
/* Tablet portrait (iPad Mini/Air/Pro 11", 768-834px, and similar):
   this band sits between the mobile and desktop container rules above and
   was falling back to Bootstrap's ~12px default gutter, reading far too
   tight for a screen this wide. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/* Navbar */
.navbar { background: rgba(255,255,255,0.6); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
html[data-theme="dark"] .navbar { background: rgba(18,23,30,0.6); }
.brand-mark { display: inline-flex; align-items: center; gap: .55rem; }
.brand-dot { width: .55rem; height: .55rem; background: var(--accent); border-radius: 50%; flex: none; }
@media (min-width: 1200px) {
  .navbar-collapse { flex: 1 1 auto; }

  /* .navbar-nav's mx-xl-auto only lands dead-center when the brand block
     (left) and the theme/Hire-Me/toggler block (right) are equal width --
     they aren't, so the nav links drift toward whichever side is
     narrower. Center them against the navbar itself instead, independent
     of sibling widths. Kicks in at the same 1200px point the expanded
     (non-hamburger) nav itself appears, so there's always room for it. */
  .navbar > .container { position: relative; }
  .navbar-nav.mx-xl-auto {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* Mobile-style (hamburger) navbar: a collapsed menu that reads like a
   clean list instead of cramped links, a brand name that truncates
   instead of wrapping/overflowing, and the theme switcher moved inside
   the menu (see .mobile-theme-row) so the top bar never wraps onto two
   lines. Deliberately extended through the whole tablet range (up to
   1200px, matching navbar-expand-xl) rather than switching to the
   expanded desktop nav at 992px: below 1200px there isn't reliably
   enough room for brand + 5 nav links + theme/Hire-Me/toggler side by
   side without them overlapping -- every iPad in every orientation
   falls in this range. */
@media (max-width: 1199.98px) {
  .brand-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar-nav .nav-link { padding: .75rem 0; border-bottom: 1px solid var(--border); }
  .navbar-nav .nav-item:last-child .nav-link { border-bottom: none; }

  /* Overlay the menu on top of the page instead of pushing content down.
     .navbar is position:sticky, which already acts as the containing
     block for this absolutely-positioned panel. */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1035;
    margin-top: 0;
    padding: 0 1rem 1rem;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0,0,0,.14);
  }
}
/* Tablet has real room to spare compared to a phone -- let the brand
   name breathe more before it gets truncated. Covers the same range as
   the hamburger nav above (768-1199px). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .brand-name { max-width: 260px; }
}
.mobile-theme-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem; padding: .9rem 0; border-bottom: 1px solid var(--border);
}
.mobile-theme-label {
  font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.mobile-theme-btns { display: flex; gap: .4rem; }
.mobile-theme-btns .theme-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .65rem; font-size: .8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.mobile-theme-btns .theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.navbar .nav-link { position: relative; color: var(--text); font-weight: 400; }
.navbar .nav-link:hover { color: var(--accent); }
.navbar .nav-link.active { color: var(--accent); font-weight: 700; }
.navbar .nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); border-radius: 2px;
}
.dropdown-menu {
  background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: calc(var(--radius) - .6rem);
}
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface); color: var(--accent); }
html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(1.6); }
.navbar-toggler { border-color: var(--border); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--accent) 30%, transparent); }
.navbar .btn { padding: .5rem 1.1rem; font-size: .9rem; }
.navbar-brand { color: var(--text) !important; }
.brand-name { font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.brand-suffix {
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: .15rem .45rem; border: 1px solid var(--border); border-radius: 6px;
}
/* iPad Pro 12.9"/13" landscape only (1366x1024) -- the brand suffix
   crowds the navbar at this exact size. Scoped tightly (width AND height,
   plus touch-only) so it doesn't affect any other breakpoint, and doesn't
   accidentally catch common 1366x768 laptop screens, which share the
   width but not the height and aren't touch devices. */
@media (min-width: 1360px) and (max-width: 1372px) and (min-height: 1018px) and (max-height: 1030px) and (hover: none) and (pointer: coarse) {
  .brand-suffix { display: none !important; }
}

/* Buttons */
.btn-accent, .btn-soft {
  padding: .7rem 1.5rem;
  font-weight: 600;
  font-size: .95rem;
}
.btn-accent {
  --bs-btn-bg: var(--accent);
  --bs-btn-color: var(--accent-contrast);
  --bs-btn-hover-bg: color-mix(in oklab, var(--accent) 85%, black);
  --bs-btn-hover-color: var(--accent-contrast);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  border-radius: calc(var(--radius) - .5rem);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--accent) 18%, transparent);
}
.btn-soft {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: calc(var(--radius) - .5rem);
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-color: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  transition: border-color .2s ease, color .2s ease;
}
@media (max-width: 767.98px) {
  .btn-icon-hide-mobile i { display: none; }
}

/* Hero */
.hero {
  padding: 90px 0;
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  background:
    radial-gradient(800px 400px at 90% -20%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(600px 300px at -10% 0%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 60%, transparent) 0%, transparent 40%);
}
.hero > .container { width: 100%; }
.hero-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.avatar {
  width: 64px; height: 64px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
}

.service-item { padding-left: 0; transition: transform .2s ease; }
.service-item:hover { transform: translateX(3px); }
.service-item > i { font-size: 1.5rem; color: var(--accent); display: block; margin-bottom: 1rem; }
.service-item ul { padding-left: 1.1rem; color: var(--muted); margin-bottom: 0; }
.service-item ul li { margin-bottom: .25rem; }
.services-grid { row-gap: 3.5rem; }
@media (max-width: 767.98px) {
  .services-grid { row-gap: 1.75rem; }
}

/* Pricing */
.pricing-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - .3rem);
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pricing-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.pricing-card.featured {
  border-color: var(--accent);
  box-shadow: 0 14px 32px color-mix(in oklab, var(--accent) 20%, transparent);
}
@media (min-width: 992px) {
  .pricing-card.featured { transform: scale(1.04); }
  .pricing-card.featured:hover { transform: scale(1.04) translateY(-4px); }
}
.pricing-badge {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-contrast);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .9rem; border-radius: 999px; box-shadow: var(--shadow);
  white-space: nowrap;
}
.pricing-price { font-family: var(--hero-font), sans-serif; font-size: 2.2rem; font-weight: 700; margin: .25rem 0 1.25rem; color: var(--text); }
.pricing-period { font-size: .95rem; font-weight: 500; color: var(--muted); margin-left: .25rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 1.75rem; color: var(--muted); flex: 1 1 auto; }
.pricing-features li { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .65rem; font-size: .92rem; }
.pricing-features li i { color: var(--accent); margin-top: .2rem; flex: none; }
.pricing-card .btn { margin-top: auto; }

.tool-item { transition: transform .2s ease; cursor: default; }
.tool-item:hover { transform: translateY(-3px); }
.tool-item:hover .tool-icon { color: color-mix(in oklab, var(--accent) 80%, black); }
.tool-icon { display: block; font-size: 1.8rem; color: var(--accent); margin-bottom: .6rem; transition: color .2s ease; }

/* Tools grid: rendered as one <div class="tools-row"> per row group computed
   in JS (see initTools/_groupToolRows in script.js), not as a single flat
   wrapping grid -- a flat grid relying on the browser to wrap on its own
   can't guarantee a specific split like 7 -> 4-over-3.
   Each .tool-col has a FIXED width (not a percentage of the row), so every
   icon is the exact same size with the exact same gap around it in every
   row, whether that row has 5 items or 1. justify-content: center then
   centers the row as a block when it doesn't fill the full row width --
   sizing never has to be scaled down per row, which is what caused the
   cramped/uneven spacing in the row-scaling approach this replaces. */
.tools-grid { display: flex; flex-direction: column; gap: 2.75rem; }
.tools-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3rem; }
/* A row with the max 5 items spreads edge-to-edge across the full width
   instead of clustering at its fixed compact width -- the `gap` above still
   applies as a minimum, space-between just distributes any extra room. */
.tools-row-full { justify-content: space-between; }
.tool-col { flex: 0 0 92px; max-width: 92px; }
@media (min-width: 576px) {
  .tool-col { flex: 0 0 112px; max-width: 112px; }
  .tools-grid { gap: 3rem; }
  .tools-row { gap: 2.75rem 3.375rem; }
}
@media (min-width: 992px) {
  .tool-col { flex: 0 0 140px; max-width: 140px; }
  .tools-grid { gap: 3.75rem; }
  .tools-row { gap: 3.25rem 4.125rem; }
}

.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.icon-pill { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items:center; justify-content:center; background: color-mix(in oklab, var(--accent) 14%, var(--bg)); }

.trait-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.75rem 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.process-rows { display: grid; row-gap: 2.5rem; column-gap: 2rem; }
.process-step { position: relative; }
.step-num {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; margin-bottom: 1rem;
}
@media (min-width: 992px) {
  .process-step:not(.step-last)::after {
    content: ''; position: absolute; top: 1.1rem; left: calc(2.2rem + 12px); right: -1.5rem; height: 1px; background: var(--border);
  }
}
/* Below desktop, the precise column math isn't worth it — just stack in reading order */
@media (max-width: 991.98px) {
  .process-rows { display: flex; flex-direction: column; gap: 2rem; }
}
.trait-item { display: flex; align-items: center; gap: .8rem; }
.trait-item > i { font-size: 1.3rem; color: var(--accent); flex: none; }
.card-clean { border: 1px solid var(--border); border-radius: calc(var(--radius) - .3rem); background: var(--bg); box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card-clean:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 24px color-mix(in oklab, var(--accent) 16%, transparent); }
.card-clickable { cursor: pointer; }
.card-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.card-clickable .btn { position: relative; z-index: 1; }

/* Tags */
.tag { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--border); background: var(--surface); font-size:.85rem; color: var(--muted); }
.tag i { color: var(--accent); }

/* Skills (About) */
.skills-grid { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Selected Work — cards */
.work-fan { position: relative; height: 92px; margin-bottom: 14px; }
.work-fan.no-thumbs { height: 28px; }
.work-fan .thumb {
  position: absolute; width: 92px; height: 70px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  box-shadow: var(--shadow); overflow: hidden;
}
.work-fan .thumb img, .work-fan .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-play-badge {
  position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; pointer-events: none;
}
.work-fan .thumb:nth-child(1) { left: 8px;  top: 16px; transform: rotate(-8deg); z-index: 1; }
.work-fan .thumb:nth-child(2) { left: 36px; top: 6px;  transform: rotate(3deg);  z-index: 2; }
.work-fan .thumb:nth-child(3) { left: 64px; top: 12px; transform: rotate(11deg); z-index: 1; }
.work-stat {
  position: absolute; right: 0; top: 0; z-index: 3;
  background: color-mix(in oklab, var(--accent) 16%, var(--bg)); color: var(--accent);
  font-weight: 600; font-size: .78rem; padding: .3rem .65rem; border-radius: 999px;
}
.work-eyebrow { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }

/* Themed modal for case studies */
.modal-content { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-header { padding-right: 1.5rem; }
.btn-close { filter: var(--bs-btn-close-white, none); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (max-width: 767.98px) {
  /* Drag handle affordance + swipe-to-dismiss target */
  .modal-header {
    position: relative;
    padding-top: 1.5rem;
    touch-action: none;
  }
  .modal-header::before {
    content: "";
    position: absolute;
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }
}
.gallery-grid { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.gallery-grid.count-1 { grid-template-columns: 1fr; }
.gallery-grid.count-1 .g-item { aspect-ratio: 16 / 9; }
.gallery-grid.count-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-grid.count-3 { grid-template-columns: repeat(3, 1fr); }
.g-item {
  aspect-ratio: 4 / 3; border-radius: 12px; background: var(--surface);
  border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--muted); overflow: hidden; cursor: zoom-in; position: relative;
}
.g-item img, .g-item video { width: 100%; height: 100%; object-fit: cover; }
.gallery-hero-wrap { margin-bottom: 1.5rem; }
.gallery-hero {
  aspect-ratio: 16 / 9; border-radius: 12px; background: var(--surface);
  border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--muted); overflow: hidden; margin-bottom: .5rem; cursor: zoom-in; position: relative;
}
.gallery-hero img, .gallery-hero video { width: 100%; height: 100%; object-fit: cover; }
.gallery-zoom-hint {
  position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.gallery-strip { display: grid; gap: .4rem; }
.gallery-thumb {
  aspect-ratio: 1 / 1; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  cursor: zoom-in; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--muted);
  position: relative;
}
.gallery-thumb img, .gallery-thumb video { width: 100%; height: 100%; object-fit: cover; }
/* Play badge overlay shown on video thumbnails/hero (videos stay muted with
   no controls until opened full-size in the lightbox) */
.gallery-play-badge {
  position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .95rem; pointer-events: none;
}
.gallery-play-badge-lg { width: 54px; height: 54px; font-size: 1.4rem; }
/* Shown in place of a video/embed thumbnail when no preview image is
   available (e.g. a Vimeo/Loom thumbnail failed to load) */
.embed-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--muted);
}
.lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 2000;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-stage { max-width: 88vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img, .lightbox-stage video { max-width: 88vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
/* YouTube/Vimeo/Loom links play in an iframe instead of a <video> tag */
.lightbox-embed { width: min(88vw, 1100px); aspect-ratio: 16 / 9; }
.lightbox-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.lightbox-embed-fallback {
  aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: rgba(255,255,255,.04); border-radius: 8px; padding: 28px 24px;
}
.lightbox-embed-fallback img { width: 100%; max-width: 480px; border-radius: 8px; object-fit: cover; }
.lightbox-embed-fallback p { max-width: 420px; text-align: center; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 50%;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer;
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-count { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .85rem; opacity: .8; }
.case-block + .case-block { margin-top: 1rem; }
.case-label { font-weight: 600; font-size: .82rem; color: var(--accent); margin-bottom: .25rem; }
.modal-columns { display: block; }
.modal-media { margin-bottom: 0; }
.modal-info-solo { max-width: 640px; margin: 0 auto; }
@media (min-width: 768px) {
  .modal-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
  .modal-media .gallery-hero-wrap, .modal-media .gallery-grid { margin-bottom: 0; }
}
/* Tablet portrait (iPad, etc.): Bootstrap doesn't widen .modal-lg/.modal-xl
   past its base 500px until 992px, but the two-column case-study layout
   above already switched on at 768px -- so tablets were squeezing a
   gallery + text side by side into ~230px each. Give the wide modals room
   to match, since tablets have the width to spare. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .modal-lg, .modal-xl { max-width: 700px; }
}

.contact-row { border-top: 1px solid var(--border); }
.contact-link {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 0;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
  transition: gap .2s ease;
}
.contact-link:hover { gap: 1.15rem; }
.contact-link > i { font-size: 1.3rem; color: var(--accent); flex: none; }
@media (max-width: 991.98px) {
  .contact-faq-col { margin-top: 1.5rem; }
}
.accordion-item { background: transparent; border: 1px solid var(--border); border-radius: calc(var(--radius) - .6rem) !important; margin-bottom: .6rem; overflow: hidden; }
.accordion-button { background: var(--surface); color: var(--text); font-weight: 600; }
.accordion-button:not(.collapsed) { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); color: var(--text); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--accent) 25%, transparent); }
.accordion-button::after { filter: none; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.8); }
.accordion-body { background: var(--bg); color: var(--muted); }
footer { border-top: 1px solid var(--border); }

.testimonial-feature { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.testimonial-feature > i { font-size: 2rem; color: var(--accent); }
.testimonial-quote { font-family: var(--content-font), 'Lora', serif; font-style: italic; font-size: 1.5rem; line-height: 1.5; color: var(--text); margin: .5rem 0 1rem; }
.testimonial-grid { display: flex; flex-direction: column; gap: 3rem; }
.testimonial-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3rem; }
.testimonial-support { flex: 1 1 260px; max-width: 320px; }
.testimonial-support blockquote { font-family: var(--content-font), 'Lora', serif; font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--text); margin: 0 0 .6rem; }
.muted { color: var(--muted); }
.link-accent { color: var(--accent); text-decoration: none; }
.link-accent:hover { text-decoration: underline; }

/* Back to top */
#backToTop {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: none;
  border-radius: 999px; padding: .7rem .9rem;
  background: var(--accent); color: var(--accent-contrast); border: none; box-shadow: var(--shadow);
}

/* Smooth anchor offset for fixed navbar */
:target { scroll-margin-top: var(--nav-h); }

/* On mobile, don't force sections to fill the full viewport height and
   center their content — that's what leaves a gap under the navbar when
   a section is shorter than the screen. Let content flow naturally instead. */
@media (max-width: 991.98px) {
  .hero,
  .section-pad {
    min-height: auto;
    display: block;
  }
}
/* Tablet landscape (iPad Mini/Air/Pro 11" landscape: ~1024-1194px wide but
   only ~768-834px tall) lands above the 992px desktop breakpoint, so it
   was still getting the full-viewport-height, vertically-centered
   treatment meant for desktop -- on a screen this short and wide that
   reads cramped/oddly centered. Gated to touch devices (hover:none,
   pointer:coarse) so a desktop browser window resized to the same width
   keeps its normal centered hero. */
@media (min-width: 992px) and (max-width: 1200px) and (hover: none) and (pointer: coarse) {
  .hero,
  .section-pad {
    min-height: auto;
    display: block;
  }
}