/* ============================================================
   LIGHT THEME — new design system, currently scoped to the
   E-Commerce page only (below its existing, untouched hero).
   This is a deliberate departure from the rest of the site's
   dark theme (assets/styles.css: #04101f bg, Prata + Hanken
   Grotesk, --cyan:#C4AB82) — a preview of a site-wide redesign
   coming later. Every rule here is scoped under .light-page so
   nothing leaks onto the other 4 pages that still load this
   same stylesheet-less dark theme; tokens are custom properties
   on .light-page itself (not :root) for the same reason — this
   file never touches styles.css or its :root tokens.
   ============================================================ */

.light-page{
  --lp-navy:#1B2B4B;
  /* Matches --navy in styles.css (#04101f) by value, not by var() reference
     — this file is deliberately self-contained (see file header) and never
     reads styles.css's :root tokens directly. This is for .navy-block's
     background specifically: the site's original, darker page-navy, not
     the lighter --lp-navy above (which stays as-is — it's a text/accent
     color used across the light sections, a separate role that was never
     reported as wrong). */
  --lp-navy-bg:#04101f;
  --lp-tan:#C4A882;
  --lp-bg:#FFFFFF;
  --lp-section-bg:#F8F7F4;
  --lp-font-body:'Jost', system-ui, -apple-system, sans-serif;
  --lp-font-serif:'Libre Baskerville', Georgia, serif;
  --lp-font-display:'Prata', Georgia, serif; /* plain line of the big headlines — same face as "E-COMMERCE" in the hero above, already loaded on this page */

  position:relative;
  background:var(--lp-bg);
  color:var(--lp-navy);
  font-family:var(--lp-font-body);
  isolation:isolate; /* own stacking context, keeps the fixed grid canvas contained to this page's sections */
}
.light-page em{font-style:italic; color:var(--lp-tan); font-family:var(--lp-font-serif)}

.lp-wrap{max-width:960px; margin:0 auto; padding:0 clamp(20px,4vw,48px)}

/* ---- Grid-background sections (1: intro, 3: why fully launched) ---- */
/* Canvas is absolutely positioned INSIDE its section (not fixed to the
   viewport) — the section's position:relative makes it the containing
   block, and its overflow:hidden clips the canvas to exactly that
   section's box, so the grid can never paint over the hero above it or
   any other section. Its size/cell math is driven by that container's
   own getBoundingClientRect() in ecommerce.js, not window dimensions.
   Neither section has an explicit height — sized by its own padding +
   content like every other section here, and the canvas (inset:0)
   fills whatever that natural height comes out to. Both sections use
   the same .grid-canvas class; ecommerce.js instantiates one grid per
   canvas found on the page. */
.grid-intro, .grid-section{position:relative; overflow:hidden; text-align:center}
.grid-intro{padding:140px 0 120px}
.grid-section{padding:120px 0}
.grid-canvas{position:absolute; inset:0; z-index:0; pointer-events:none}
.grid-intro .lp-wrap, .grid-section .lp-wrap{position:relative; z-index:1}

/* Shared big-headline treatment: plain first line in Prata (matching the
   hero's title font above), italic tan second line in Libre Baskerville
   (via .light-page em, unchanged). Used by Section 1's intro title and
   Section 3's opening headline. */
.lp-headline{font-family:var(--lp-font-display); font-weight:400; font-size:clamp(34px,5.5vw,58px);
  line-height:1.15; margin:0 0 24px; letter-spacing:0}
.lp-headline em{display:block}

.grid-intro-sub{font-size:clamp(16px,2vw,19px); line-height:1.6; color:rgba(27,43,75,.7);
  max-width:640px; margin:0 auto 36px}

/* ---- Section 3, second half: "why fully launched" intro + 6 cards ---- */
.why-intro{margin-top:88px}
/* The 88px top margin exists to clear a .lp-headline sitting above it
   (ecommerce Section 3's usage). Home's About Us section has no such
   headline above it any more — .why-intro is the .lp-wrap's first child
   — so without this it'd stack that margin on top of the section's own
   120px padding for a ~208px gap before "Meet the team" even appears. */
.lp-wrap > .why-intro:first-child{margin-top:0}
.lp-subhead{font-family:var(--lp-font-display); font-weight:400; font-size:clamp(26px,3.6vw,38px);
  line-height:1.2; margin:0 0 20px}
.lp-subhead em{display:inline}

.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; text-align:left}
@media (max-width:760px){ .why-grid{grid-template-columns:1fr} }
/* Home's 4 branch cards reuse this same grid — 2 columns instead of the
   default 3 so 4 cards fill it evenly instead of leaving an orphan on its
   own row. */
.why-grid.branch-grid{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){ .why-grid.branch-grid{grid-template-columns:1fr} }
/* display:block + the link-reset properties are additive for the existing
   div-based usage (why-card is already block, has no text-decoration/color
   of its own) and are what make it safe to also use on an <a> — Home's
   branch cards link out to their own pages, this card wasn't a link
   anywhere before. */
.why-card{display:block; text-decoration:none; color:inherit;
  background:var(--lp-section-bg); border:1px solid rgba(27,43,75,.1);
  border-radius:16px; padding:28px; transition:border-color .2s, transform .2s}
a.why-card:hover{border-color:rgba(196,168,130,.55); transform:translateY(-2px)}
.why-card h4{font-family:var(--lp-font-body); font-weight:600; font-size:18px;
  margin:0 0 10px; color:var(--lp-navy)}
.why-card p{font-size:14.5px; line-height:1.6; color:rgba(27,43,75,.68); margin:0}

/* Home's testimonial cards reuse .why-card's shape/background, just with
   quote-specific typography instead of the h4/p pairing. */
.testimonial-quote{font-style:italic; font-size:15.5px; line-height:1.65;
  color:rgba(27,43,75,.7); margin:0 0 18px}
.testimonial-name{display:block; font-family:var(--lp-font-body); font-weight:600;
  font-size:14px; color:var(--lp-navy)}
.testimonial-business{display:block; font-size:12.5px; color:rgba(27,43,75,.55); margin-top:2px}

/* Home's About Us team cards — same photo-fills-top / role-tag eyebrow /
   name / bio structure as the dark-theme .team-card2 (styles.css), but
   built on this system's light card (.why-card) instead of a dark navy
   card, which doesn't read right sitting directly on this section's white
   background. The photo's own dark-gradient-to-transparent overlay is
   unchanged from .team-card2 — that's about the photo's own legibility for
   the overlaid role-tag text, independent of what the surrounding card
   background is. */
.why-card.team-card-lp{padding:0; overflow:hidden}
.team-photo-lp{position:relative; width:100%; aspect-ratio:4/5; overflow:hidden}
.team-photo-lp img{width:100%; height:100%; object-fit:cover; display:block}
.team-photo-lp::after{content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, rgba(4,16,31,.92), rgba(4,16,31,0))}
.role-tag-lp{position:absolute; left:16px; bottom:14px; z-index:2; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--lp-tan); font-weight:600}
.team-body-lp{padding:20px 20px 24px}
.team-body-lp h4{font-family:var(--lp-font-body); font-weight:600; font-size:18px;
  color:var(--lp-navy); margin:0 0 10px}
.team-body-lp p{font-size:13.5px; line-height:1.6; color:rgba(27,43,75,.68); margin:0}

/* 4 team cards want their own 4-across/2-across/1-across rhythm (matching
   the old .team-grid's breakpoints) rather than the shared .why-grid's
   3-column default and single 760px collapse. */
.why-grid.team-grid-lp{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){ .why-grid.team-grid-lp{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .why-grid.team-grid-lp{grid-template-columns:1fr} }

.pill-row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.pill{display:inline-flex; align-items:center; font-size:13.5px; font-weight:500; letter-spacing:.02em;
  padding:9px 18px; border-radius:999px; border:1px solid rgba(27,43,75,.16);
  color:var(--lp-navy); background:rgba(196,168,130,.08)}
/* E-Commerce's Section 1 (platform pills) now sits on a .navy-block
   (see the section-order fix that made it Section 1 instead of the old
   white .grid-intro): .pill's default dark-navy-text/tan-wash styling
   was built for a white background and reads as dark-on-dark here, so
   it needs a light-on-dark variant instead. */
.navy-block .pill{color:#fff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08)}

/* ---- Section 2: problem + how we help (navy block within the light
   theme — this is the new brand navy #1B2B4B as a section background,
   not the old site's dark theme) ---- */
.navy-block{background:var(--lp-navy-bg); color:#fff; padding:120px 0; text-align:center}
.eyebrow-lp{display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lp-tan); margin-bottom:22px}
.problem-copy{font-size:clamp(17px,1.9vw,20px); line-height:1.7; color:rgba(255,255,255,.82);
  max-width:720px; margin:0 auto}

/* ---- Section 4: how it works (overlapping sticky step cards) ----
   .lp-headline is reused here with no overrides: .navy-block sets
   color:#fff at the section level, so the headline's plain line inherits
   white automatically, while its <em> line stays tan via the existing
   .light-page em rule (an explicit color always wins over inheritance) —
   same mechanism, no new headline variant needed. top/z-index per .step
   are set inline by ecommerce.js so it scales with however many steps
   exist; the !important below overrides those inline values only below
   900px, where the cards stack normally instead of overlapping. */
.steps-wrap{display:flex; flex-direction:column; gap:24px; margin-top:64px; text-align:left}
.step{position:sticky; background:var(--lp-section-bg); color:var(--lp-navy);
  border:1px solid rgba(27,43,75,.12); border-radius:24px; padding:36px;
  min-height:220px; transition:transform .3s}
.step-n{display:block; font-family:var(--lp-font-display); font-size:15px; font-weight:400;
  letter-spacing:.04em; color:var(--lp-tan)}
.step h4{font-family:var(--lp-font-body); font-weight:600; font-size:22px; margin:10px 0 10px}
.step p{font-size:15px; line-height:1.6; color:rgba(27,43,75,.7); margin:0}
@media (max-width:900px){
  .step{position:relative; top:0 !important; z-index:auto !important}
}

/* ---- Section 5: closing CTA (third grid section — keeps the
   grid/navy/grid/navy/grid rhythm, and avoids stacking two navy blocks
   back to back right before the shared navy footer below). ---- */
.cta-close .grid-intro-sub{margin-bottom:0}
.cta-actions{margin-top:40px; display:flex; flex-direction:column; align-items:center; gap:16px}
/* Same family as the dark theme's .mail-cta / hero .cta a: pill shape,
   light gradient fill, dark text, soft glow + inset highlight — recolored
   for this page's own tokens (tan-tinted gradient/highlight, navy text)
   instead of inventing a new button style from scratch. */
.cta-primary{display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; border-radius:999px;
  background:linear-gradient(180deg,#ffffff 0%,#f5eee1 8%,#f8f2e8 72%,#ffffff 100%);
  color:var(--lp-navy); font-family:var(--lp-font-body); font-weight:700; font-size:15px;
  text-decoration:none;
  box-shadow:0 10px 22px -10px rgba(27,43,75,.3), inset 0 0 0 1.5px rgba(196,168,130,.55)}
.cta-primary:hover{box-shadow:0 14px 26px -10px rgba(27,43,75,.38), inset 0 0 0 1.5px rgba(196,168,130,.8)}
/* Secondary stays a plain text link, not a second button shape — a ghost/
   outline button here would still read as a competing CTA next to the
   pill above. Tan, no underline at rest; underline only on hover as the
   interactive affordance. */
.cta-secondary{font-family:var(--lp-font-body); font-size:14px; font-weight:500;
  color:var(--lp-tan); text-decoration:none}
.cta-secondary:hover{text-decoration:underline; text-underline-offset:3px; color:var(--lp-navy)}

/* ---- Websites page, Section 3: engagement tiers, migrated onto
   .why-card from the old dark-theme .svc-card. Sits on a .navy-block
   the same way Home's testimonial cards do, so .why-card's light
   background still reads as a card against the dark section. Default
   .why-grid 3-column layout fits the 3 tiers with no override needed. */
.tier-idx{display:block; font-family:var(--lp-font-body); font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--lp-tan); margin-bottom:10px}
.why-card.tier-card h4{text-transform:uppercase; letter-spacing:.03em}
.why-card.tier-card p{margin:0 0 14px}
.why-card.tier-card ul{margin:0; padding-left:18px; font-size:13.5px; line-height:1.7; color:rgba(27,43,75,.68)}

/* ---- Websites page, Section 4: example-designs gallery. Real
   screenshots aren't ready, so each slot is a dashed placeholder box
   instead of an image card until they exist. 4-across for the 4
   placeholder slots; collapses same as the other card grids. */
.gallery-grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .gallery-grid{grid-template-columns:1fr} }
.gallery-card{aspect-ratio:4/3; border-radius:16px; border:1px dashed rgba(27,43,75,.22);
  background:var(--lp-section-bg); display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px}
.gallery-card span{font-size:13px; font-weight:500; letter-spacing:.02em; color:rgba(27,43,75,.45)}

/* ---- "Who you'll work with" sections (Social/Websites/E-Commerce/AI
   Integration). .solo-card-wrap centers a single .team-card-lp since
   .why-grid's column layout is built for multiple cards, not one; widened
   from an earlier, narrower stacked-card version to fit the row layout
   below. .cta-divider is unused now that these sections no longer share
   a slot with the closing CTA (each has its own section) but is left
   defined in case it's needed again. */
.solo-card-wrap{max-width:640px; margin:0 auto}
.cta-divider{height:1px; background:rgba(27,43,75,.12); max-width:640px; margin:0 auto 56px}

/* Horizontal (photo left, bio right) variant of .team-card-lp — a
   modifier, not a change to .team-card-lp itself, since Home's "Meet the
   team" grid still uses the original stacked/vertical shape. Paired with
   .who-block below to keep these sections noticeably shorter overall
   than the old stacked layout (tall photo + text below it), not just a
   wider row at the same section height. align-items:center (not
   stretch) so the photo keeps its own aspect-ratio instead of being
   force-stretched to match the text column's height. */
.team-card-lp.team-card-row{display:flex; align-items:center; text-align:left}
.team-card-lp.team-card-row .team-photo-lp{flex:0 0 220px; width:220px}
.team-card-lp.team-card-row .team-body-lp{flex:1; padding:24px 28px}
.who-tenure{margin:8px 0 0; font-size:12.5px; color:rgba(27,43,75,.55)}
@media (max-width:760px){
  /* Same 760px collapse .why-grid already uses for its own single-card
     fallback — the closest existing "multi-column to stacked" breakpoint
     on the site to match, since no other true side-by-side (non-grid)
     layout existed here before this one. */
  .team-card-lp.team-card-row{flex-direction:column}
  .team-card-lp.team-card-row .team-photo-lp{width:100%; flex:none}
}
.navy-block.who-block{padding:72px 0}

/* .note-row/.btn-ghost (styles.css) were designed for the old dark-theme
   navy sections: white text and a near-white border, invisible against
   this section's own white background. Every current usage (Social/
   Websites/AI Integration's "How we fix it") sits on .grid-section, not
   navy, so it needs a light-on-white variant instead — this is the
   actual source of the oversized-looking gap reported under those
   pages' tier cards: not extra padding, invisible content still taking
   up its normal space. Colors reused from the same navy/opacity values
   already used elsewhere on this card system (.why-card p etc.) rather
   than invented fresh. */
.grid-section .note-row{border-top-color:rgba(27,43,75,.12)}
.grid-section .note-row p{color:rgba(27,43,75,.68)}
.grid-section .btn-ghost{color:var(--lp-navy); border-color:rgba(27,43,75,.25)}
.grid-section .btn-ghost:hover{border-color:var(--lp-navy)}