/*
 ALIGNTHEBRAND.ID — Premium Editorial / Soft Acrylic / Bento Refinement
 10 November 2026
 Visual layer only. Original copy, semantic HTML, fonts, links, assets, SEO,
 PDF gateways, tracking, all buttons and interaction scripts are preserved.
 No gradients or decorative overlays are added to text or imagery.
*/
:root {
  --align-radius-sm: 14px;
  --align-radius-md: 20px;
  --align-radius-lg: 28px;
  --align-card-stroke: rgba(2, 1, 101, .14);
  --align-glass-stroke: rgba(255, 255, 255, .26);
  --align-glass-shadow: 0 14px 38px rgba(2, 1, 101, .085), 0 3px 10px rgba(2, 1, 101, .035);
  --align-glass-shadow-deep: 0 18px 42px rgba(0, 0, 35, .16);
  --align-glass-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Open editorial hero: keep headline / illustration / button prominent. */
.hero .hero-aside {
  border-radius: var(--align-radius-sm);
  border: 1px solid rgba(255, 255, 255, .19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* The two service routes have equal semantic weight and equal width. */
.services .entry-grid {
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
}
.services .entry-card {
  isolation: isolate;
  border-radius: var(--align-radius-lg);
  border-width: 1px;
  box-shadow: var(--align-glass-shadow);
  background-repeat: repeat;
  background-size: 96px 96px;
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--align-glass-ease);
}
.services .entry-build {
  background-color: #020165;
  background-image: url('./assets/visuals/acrylic-grain-light.png');
  border-color: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .19), inset 1px 0 0 rgba(255, 255, 255, .065), 0 18px 38px rgba(2, 1, 101, .18);
}
.services .entry-realign {
  background-color: rgba(255, 255, 255, .94);
  background-image: url('./assets/visuals/acrylic-grain-dark.png');
  border-color: var(--align-card-stroke);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), var(--align-glass-shadow);
}
/* Preserve the existing brand-orange top rule and the existing service images. */
.services .entry-card::before { border-radius: 0 0 3px 0; }
.services .entry-visual { max-width: 100%; }

/* Strategic competence: navy editorial section, soft glass ONLY on PDF cards. */
.portfolio-gateway .portfolio-visual {
  border-radius: var(--align-radius-md);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow: 0 12px 32px rgba(0, 0, 38, .11);
}
.portfolio-gateway .portfolio-grid { gap: clamp(14px, 1.6vw, 24px); }
.portfolio-gateway .portfolio-card {
  border-radius: var(--align-radius-lg);
  border: 1px solid rgba(255, 255, 255, .27);
  background-color: rgba(255, 255, 255, .075);
  background-image: url('./assets/visuals/acrylic-grain-light.png');
  background-size: 96px 96px;
  background-repeat: repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 1px 0 0 rgba(255, 255, 255, .06), var(--align-glass-shadow-deep);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--align-glass-ease);
}
.portfolio-gateway .portfolio-card:hover,
.portfolio-gateway .portfolio-card:focus-within {
  background-color: rgba(255, 255, 255, .095);
  border-color: rgba(255, 255, 255, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .23), 0 20px 40px rgba(0, 0, 40, .20);
}

/* Founder is deliberately editorial, NOT encased in a glass card. */
.founder-section .founder-visual {
  border-radius: var(--align-radius-md);
  box-shadow: 10px 12px 0 rgba(2, 1, 101, .07), 0 14px 32px rgba(2, 1, 101, .14);
}
.founder-section .founder-photo-caption {
  border-bottom-right-radius: var(--align-radius-sm);
}

/* Business challenges: asymmetrical bento within the EXISTING second column. */
.marketing-paradox .paradox-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(28px, 4.1vw, 72px);
}
.marketing-paradox .paradox-contrasts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  align-items: stretch;
  gap: 13px;
  border-top: 0;
}
.marketing-paradox .paradox-contrast {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 216px;
  padding: clamp(21px, 2vw, 29px);
  background-color: rgba(255, 255, 255, .88);
  background-image: url('./assets/visuals/acrylic-grain-dark.png');
  background-size: 96px 96px;
  border: 1px solid var(--align-card-stroke);
  border-radius: var(--align-radius-md);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 7px 19px rgba(2, 1, 101, .04);
}
.marketing-paradox .paradox-contrast:first-child {
  grid-column: 1 / -1;
  min-height: 174px;
  background-color: rgba(255, 255, 255, .96);
  border-color: rgba(2, 1, 101, .20);
  border-left: 3px solid #FD7500;
  box-shadow: var(--align-glass-shadow);
}
.marketing-paradox .paradox-contrast > span { padding-top: 0; }
.marketing-paradox .paradox-contrast h3 {
  font-size: clamp(19px, 1.85vw, 27px);
  text-wrap: pretty;
}
.marketing-paradox .paradox-contrast p {
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.72;
  overflow-wrap: anywhere;
}
.marketing-paradox .paradox-answer {
  border-radius: var(--align-radius-lg);
  box-shadow: var(--align-glass-shadow-deep);
}
/* Expanded, opt-in perspective content follows the same radius vocabulary. */
.marketing-paradox .align-paradox-deep-dive > .tri-lens {
  border-radius: var(--align-radius-md);
}
.marketing-paradox .lens-panel > div { border-radius: var(--align-radius-sm); }

/* Interactive diagram remains intact; its shell simply adopts the shared radius. */
.signal-section .flow-graphic { border-radius: var(--align-radius-lg); }
.signal-section .cp-explainer { border-radius: var(--align-radius-md); }

/* Methodology: keep all five interactive steps and their order untouched. */
.framework-section .framework-panel {
  border-radius: var(--align-radius-lg);
  box-shadow: 0 15px 36px rgba(0, 0, 39, .14);
}
.framework-section .framework-applications > div {
  min-width: 0;
  border-radius: var(--align-radius-sm);
  border: 1px solid rgba(2, 1, 101, .075);
  border-left: 3px solid #FD7500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
/* Intentionally NO changes to .framework-step buttons. */

/* The AI module gets a single acrylic envelope; its process stays legible. */
.ai-bridge .ai-method {
  overflow: hidden;
  border-radius: var(--align-radius-lg);
  border: 1px solid rgba(255, 255, 255, .23);
  background-color: rgba(255, 255, 255, .055);
  background-image: url('./assets/visuals/acrylic-grain-light.png');
  background-repeat: repeat;
  background-size: 96px 96px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), var(--align-glass-shadow-deep);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ai-bridge .ai-method-panel { border-radius: var(--align-radius-md); }
.ai-bridge .ai-stage-detail > div {
  min-width: 0;
  border-radius: var(--align-radius-sm);
  border: 1px solid rgba(255, 255, 255, .13);
  border-left: 2px solid #FD7500;
  background: rgba(255, 255, 255, .055);
  padding: 14px 18px;
}
.ai-bridge .ai-quality li { border-radius: var(--align-radius-sm); }
/* Intentionally NO changes to .ai-method-tab buttons. */

/* Project delivery: four chronological steps in a spacious, scannable bento. */
.method .steps {
  border-top: 0;
  gap: clamp(12px, 1.5vw, 22px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.method .step,
.method .step:nth-child(even),
.method .step:nth-child(odd) {
  min-width: 0;
  min-height: 176px;
  padding: clamp(21px, 2.5vw, 34px);
  border: 1px solid var(--align-card-stroke);
  border-radius: var(--align-radius-md);
  background-color: rgba(255, 255, 255, .88);
  background-image: url('./assets/visuals/acrylic-grain-dark.png');
  background-repeat: repeat;
  background-size: 96px 96px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 7px 18px rgba(2, 1, 101, .035);
}
.method .step:first-child { border-top: 3px solid #FD7500; }
.method .step:nth-child(4) { background-color: rgba(255, 255, 255, .96); }
.method .step > div { min-width: 0; }
.method .faq { margin-top: clamp(70px, 8vw, 110px); }

/* Closing: orange section stays dominant; the CTA cluster is the focal surface.
   Link and button visuals, text, colors, padding, states remain exactly as before. */
.contact .contact-links {
  display: flex;
  width: fit-content;
  max-width: 100%;
  padding: clamp(12px, 1.4vw, 20px);
  border: 1px solid rgba(2, 1, 101, .22);
  border-radius: var(--align-radius-lg);
  background-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 12px 34px rgba(2, 1, 101, .055);
}

/* Motion on real entry / PDF cards only: no constant or decorative movement. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .services .entry-card:hover,
  .services .entry-card:focus-within,
  .portfolio-gateway .portfolio-card:hover,
  .portfolio-gateway .portfolio-card:focus-within {
    transform: translateY(-3px);
  }
  .services .entry-build:hover,
  .services .entry-build:focus-within { border-color: rgba(255, 255, 255, .43); }
  .services .entry-realign:hover,
  .services .entry-realign:focus-within { border-color: rgba(2, 1, 101, .33); }
}

/* No reliance on unsupported acrylic effects for information readability. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portfolio-gateway .portfolio-card { background-color: #242375; }
  .ai-bridge .ai-method { background-color: #15146e; }
  .services .entry-realign { background-color: #fff; }
}

@media (max-width: 1200px) {
  .marketing-paradox .paradox-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }
  .marketing-paradox .paradox-contrasts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .marketing-paradox .paradox-contrast:first-child { min-height: 0; }
  .marketing-paradox .paradox-contrast { min-height: 192px; }
}

@media (max-width: 760px) {
  .services .entry-grid,
  .portfolio-gateway .portfolio-grid,
  .method .steps { grid-template-columns: minmax(0, 1fr); }
  .marketing-paradox .paradox-contrasts { grid-template-columns: minmax(0, 1fr); }
  .marketing-paradox .paradox-contrast:first-child { grid-column: auto; }
  .marketing-paradox .paradox-contrast { min-height: 0; }
  .services .entry-card,
  .portfolio-gateway .portfolio-card,
  .ai-bridge .ai-method,
  .signal-section .flow-graphic { border-radius: var(--align-radius-md); }
  .contact .contact-links { width: 100%; }
}

@media (max-width: 480px) {
  .marketing-paradox .paradox-contrast { gap: 9px; padding: 22px; }
  .marketing-paradox .paradox-contrast h3 { font-size: clamp(20px, 6vw, 26px); }
  .method .step,
  .method .step:nth-child(even),
  .method .step:nth-child(odd) { min-height: 0; padding: 22px 17px; grid-template-columns: 35px minmax(0, 1fr) 18px; gap: 10px; }
  .method .step > .ico { width: 17px; }
  .contact .contact-links { padding: 12px; border-radius: var(--align-radius-md); }
  .framework-section .framework-panel { border-radius: var(--align-radius-md); }
}

@media (prefers-reduced-motion: reduce) {
  .services .entry-card,
  .portfolio-gateway .portfolio-card {
    transition-duration: .01ms;
    transform: none !important;
  }
}

/* AA contrast refinement for small, non-button editorial labels on light surfaces.
   Brand orange #FD7500 remains untouched for actual accents and on navy. */
.founder-section .founder-story .section-num,
.marketing-paradox .paradox-intro .section-num,
.framework-section .framework-stage {
  color: #9b4600;
}


/* ALIGN 2026-11-11 — purposeful CTA hierarchy & Insight bridge before Founder.
   No gradients, no decorative CTA buttons, no third-party assets. */
.entry-card .entry-scope {margin-bottom:0}
.entry-card {min-height:0}
.contact .contact-links--simple {align-items:center;gap:clamp(18px,3vw,35px)}
.contact .contact-links--simple .contact-route {width:auto;min-width:260px;min-height:58px;padding:16px 22px;justify-content:space-between}
.contact .contact-links--simple .contact-mail {margin-left:0}
.hero-scroll-cue {color:rgba(255,255,255,.77)}
.insight-bridge {position:relative;background:#fff;color:#020165;padding:clamp(72px,8.25vw,112px) clamp(26px,6.25vw,112px) clamp(74px,8.25vw,112px);border-top:1px solid rgba(2,1,101,.08)}
.insight-bridge-shell {max-width:1370px;margin:0 auto}
.insight-bridge-head {display:grid;grid-template-columns:minmax(0,1.42fr) minmax(240px,.58fr);gap:clamp(22px,5vw,80px);align-items:end;margin-bottom:clamp(27px,4vw,48px)}
.insight-bridge .section-num {font-size:11px;color:#c95b00;margin:0 0 20px;letter-spacing:.17em}
.insight-bridge h2 {font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(35px,4.15vw,66px);line-height:1.14;letter-spacing:-.055em;max-width:920px;margin:0;color:#020165}
.insight-bridge-intro {font-family:Manrope,sans-serif;font-size:clamp(14px,1.2vw,16px);line-height:1.85;color:#45466e;margin:0;max-width:430px}
.insight-bridge-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.insight-bridge-card {position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:265px;padding:clamp(24px,2.75vw,36px);background:#f7f7fa;border:1px solid rgba(2,1,101,.13);border-radius:18px;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.insight-bridge-card:hover {transform:translateY(-3px);border-color:#fd7500;box-shadow:0 17px 32px rgba(2,1,101,.075)}
.insight-bridge-card:focus-visible,.insight-bridge-all:focus-visible {outline:3px solid #fd7500;outline-offset:4px}
.insight-bridge-category {font:800 10px/1.5 Manrope,sans-serif;letter-spacing:.12em;color:#b75100;margin-bottom:22px}
.insight-bridge-card h3 {font:700 clamp(18px,1.65vw,23px)/1.38 Poppins,sans-serif;letter-spacing:-.035em;margin:0 0 16px;color:#020165}
.insight-bridge-card p {font:500 13px/1.75 Manrope,sans-serif;color:#535474;margin:0 0 15px}
.insight-card-end {margin-top:auto;align-self:flex-end;font:600 25px/1 Poppins,sans-serif;color:#fd7500}
.insight-bridge-all {display:inline-flex;align-items:center;gap:20px;padding:12px 0;margin-top:24px;border-bottom:2px solid #fd7500;font:800 13px/1.5 Manrope,sans-serif;color:#020165;transition:gap .2s ease}
.insight-bridge-all:hover {gap:26px}
.insight-bridge-all span {font-size:20px}
@media(max-width:900px){.insight-bridge-head{grid-template-columns:1fr;gap:19px}.insight-bridge-intro{max-width:680px}.insight-bridge-grid{gap:12px}.insight-bridge-card{padding:22px;min-height:270px}.insight-bridge-card h3{font-size:18px}}
@media(max-width:680px){.insight-bridge{padding:72px 24px 79px}.insight-bridge-grid{grid-template-columns:1fr}.insight-bridge-card{min-height:0;padding:23px 24px}.insight-bridge-category{margin-bottom:12px}.insight-bridge-card h3{font-size:20px;margin-bottom:10px}.insight-bridge-card p{font-size:13px;margin-bottom:9px}.insight-card-end{font-size:21px}.insight-bridge-all{margin-top:25px}.contact .contact-links--simple{flex-wrap:wrap}.contact .contact-links--simple .contact-route{width:100%;min-width:0}}
@media(prefers-reduced-motion:reduce){.insight-bridge-card,.insight-bridge-all{transition:none}.insight-bridge-card:hover{transform:none}}