/* =========================================================
   Oriental Graphicarb Manufactory -- Design System v2
   Palette matched to the real logo + brochure (graphite charcoal + orange)
   Mobile-first. Breakpoints: 480 / 640 / 768 / 900 / 1024 / 1280
   ========================================================= */

:root{
  --ink:#17181A;
  --ink-2:#232529;
  --carbon:#54575D;
  --orange:#F2841B;
  --orange-dark:#A34E07;
  --link:#A34E07;
  --on-orange:#17181A;   /* text on the fixed orange brand fill; never flips */
  --orange-light:#FDECD9;
  --white:#FFFFFF;
  --surface:#FFFFFF;
  --header-bg:rgba(255,255,255,0.97);
  --silver:#DBDFE3;
  --silver-light:#F2F3F5;
  --bg:#F7F7F8;

  --cat-teal:#0C6F78;      --cat-teal-bg:#E3F3F4;
  --cat-purple:#6B3FA0;    --cat-purple-bg:#F1EAFA;
  --cat-rust:#A24C17;      --cat-rust-bg:#FBEAE0;
  --cat-green:#1B7C44;     --cat-green-bg:#E6F6EC;
  --cat-blue:#2461B5;      --cat-blue-bg:#E8F0FC;
  --cat-brown:#6B4423;     --cat-brown-bg:#F1E8DF;

  --emerald:#1B7F51; --emerald-bg:#E9F7F0;
  --amber:#926018;   --amber-bg:#FBF1E1;

  --font-head: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --fs-body: 1rem;
  --fs-small: 0.92rem;
  --fs-xs: 0.82rem;
  --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  --fs-h2: clamp(1.55rem, 1.25rem + 1.7vw, 2.4rem);
  --fs-h3: clamp(1.22rem, 1.05rem + 0.8vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  --lh-body: 1.65;
  --lh-heading: 1.18;

  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem;

  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-1: 0 3px 10px rgba(23,24,26,0.09);
  --shadow-2: 0 12px 32px rgba(23,24,26,0.18);
  --transition: 180ms ease-out;

  --container: 1280px;
  --header-h: 68px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding-bottom:66px;
  overflow-x:hidden;
}
@media (min-width:1280px){ body{ padding-bottom:0; } }

img, svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul, ol{ padding-left:1.25em; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); color:var(--ink); line-height:var(--lh-heading); font-weight:700; margin:0 0 0.6em; letter-spacing:-0.01em; }
h1{ font-size:var(--fs-h1); font-weight:800; }
h2{ font-size:var(--fs-h2); font-weight:700; }
h3{ font-size:var(--fs-h3); font-weight:700; }
h4{ font-size:var(--fs-h4); font-weight:600; }
p{ margin:0 0 1.1em; max-width:70ch; }
.lede{ font-size:clamp(1.08rem,1rem + 0.35vw,1.3rem); color:var(--carbon); max-width:62ch; }
small, .fs-small{ font-size:var(--fs-small); }
.fs-xs{ font-size:var(--fs-xs); }
code, .mono{ font-family:var(--font-mono); font-size:0.92em; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:3px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1rem,3.5vw,2rem); }
.section{ padding-block:clamp(2.25rem,4.5vw,4rem); }
.section-tight{ padding-block:clamp(1.25rem,2.5vw,2rem); }
.section--alt{ background:var(--bg); }
.section--ink{ background:linear-gradient(120deg, #0C6F78 0%, #6B3FA0 55%, #A34E07 100%); color:var(--white); }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink p{ color:var(--white); }
.stack{ display:flex; flex-direction:column; gap:var(--sp-3); }
.grid{ display:grid; gap:var(--sp-3); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
@media (min-width:640px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
}
.hero-grid{ display:grid; gap:var(--sp-4); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .hero-grid{ grid-template-columns:1.05fr 1fr; gap:var(--sp-5); } }
.two-col{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; align-items:start; } }

.site-header{ position:sticky; top:0; z-index:60; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--silver); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:0.4rem; height:var(--header-h); max-width:var(--container); margin-inline:auto; padding-inline:clamp(0.75rem,2.2vw,1.35rem); }
.logo{ display:flex; align-items:center; gap:0.55rem; font-weight:800; color:var(--ink); font-size:0.94rem; letter-spacing:0.01em; white-space:nowrap; font-family:var(--font-head); flex:none; }
.logo img.mark{ width:46px; height:46px; flex:none; }
.logo span.sm{ display:block; font-size:0.64rem; font-weight:500; color:var(--link); letter-spacing:0.03em; font-family:var(--font-sans); }

.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:var(--radius-sm); border:1.5px solid var(--silver); background:var(--surface); cursor:pointer; flex:none; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); }
.nav-toggle span::before{ top:-5px; } .nav-toggle span::after{ top:5px; }
@media (min-width:1280px){ .nav-toggle{ display:none; } }

.primary-nav{ display:none; }
@media (min-width:1280px){
  .primary-nav{ display:flex; align-items:center; gap:0; flex:1; padding-inline:0.3rem; white-space:nowrap; list-style:none; margin:0; }
  .primary-nav > li{ position:relative; list-style:none; }
  .nav-link{ display:inline-flex; align-items:center; gap:3px; padding:0.4rem 0.35rem; border-radius:var(--radius-sm); color:var(--ink); font-weight:600; font-size:0.85rem; white-space:nowrap; line-height:1; }
  .nav-link .chev{ font-size:0.6rem; opacity:0.55; position:relative; top:1px; }
  .nav-link:hover, .nav-link:focus-visible, li.open > .nav-link{ background:var(--orange-light); color:var(--link); text-decoration:none; }
  .nav-link[aria-current="page"]{ color:var(--link); }
  .nav-link.is-advisor{ background:linear-gradient(120deg, var(--cat-teal), var(--cat-purple)); color:var(--white); font-weight:700; padding:0.4rem 0.5rem; }
  .nav-link.is-advisor:hover{ background:var(--orange); color:var(--on-orange); }
}

.mega{ display:none; position:absolute; top:calc(100% + 8px); left:0; background:var(--surface); border:1px solid var(--silver); border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:0.9rem 1.1rem; min-width:460px; z-index:70;
  grid-template-columns:repeat(2, minmax(210px,1fr)); gap:0.15rem 2rem; max-height:min(68vh, 440px); overflow-y:auto; overflow-x:hidden; align-content:start;
}
.mega.mega--wide{ grid-template-columns:repeat(4, minmax(150px,1fr)); min-width:700px; gap:0.15rem 1.5rem; }
li.open .mega{ display:grid; }
.mega-col{ min-width:0; overflow-wrap:break-word; }
.mega-heading{ font-size:0.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--carbon); margin:0.3rem 0 0.3rem; }
.mega ul{ list-style:none; margin:0; padding:0; min-width:0; }
.mega li{ min-width:0; }
.mega a{ display:flex; align-items:flex-start; gap:0.45rem; padding:0.34rem 0.4rem; border-radius:var(--radius-sm); color:var(--ink); font-size:0.82rem; line-height:1.3; min-width:0; white-space:normal; }
.mega a:hover{ background:var(--bg); text-decoration:none; color:var(--link); }
.mega a span:not(.dot){ min-width:0; flex:1 1 auto; overflow-wrap:break-word; word-break:break-word; white-space:normal; }
.mega a .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; flex:none; margin-top:0.45em; }
.mega-note{ grid-column:1/-1; margin-top:0.4rem; padding-top:0.5rem; border-top:1px solid var(--silver); font-size:0.78rem; color:var(--carbon); }

.utility-bar{ display:none; }
@media (min-width:1280px){
  .utility-bar{ display:flex; align-items:center; gap:0.4rem; flex:none; }
  .icon-btn{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--silver); display:flex; align-items:center; justify-content:center; background:var(--surface); flex:none; }
  .icon-btn:hover{ border-color:var(--orange); }
  .icon-btn svg{ width:16px; height:16px; }
}

.mobile-nav{ position:fixed; inset:0; top:var(--header-h); background:var(--surface); z-index:55; padding:var(--sp-3); overflow-y:auto; display:none; }
.mobile-nav.is-open{ display:block; }
@media (min-width:1280px){ .mobile-nav{ display:none !important; } }
.mobile-nav details{ border-bottom:1px solid var(--silver); }
.mobile-nav summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; padding:1.05rem 0.25rem; font-weight:700; font-size:1.08rem; cursor:pointer; font-family:var(--font-head); }
.mobile-nav summary::-webkit-details-marker{ display:none; }
.mobile-nav summary::after{ content:"+"; font-size:1.3rem; color:var(--orange); }
.mobile-nav details[open] summary::after{ content:"\2212"; }
.mobile-nav .sub-links{ padding:0 0 1rem 0.5rem; display:flex; flex-direction:column; gap:0.75rem; }
.mobile-nav .sub-links a{ color:var(--carbon); font-size:0.97rem; }
.mobile-nav .mobile-cta{ margin-top:var(--sp-3); display:flex; flex-direction:column; gap:0.75rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.4rem; min-height:44px; padding:0 1.1rem; border-radius:var(--radius-sm); font-weight:700; font-size:0.9rem; cursor:pointer; border:1.5px solid transparent; transition:transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition); font-family:var(--font-sans); }
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--orange); color:var(--on-orange); border-color:var(--orange); font-weight:800; }
.btn--primary:hover{ background:var(--orange-dark); border-color:var(--orange-dark); color:var(--white); }
.btn--dark{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.btn--dark:hover{ background:#000; border-color:#000; }
.btn--secondary{ background:var(--surface); color:var(--ink); border-color:var(--ink); }
.btn--secondary:hover{ background:var(--ink); color:var(--white); }
.btn--ghost{ background:transparent; color:var(--link); border-color:transparent; padding:0 0.4rem; }
.btn--block{ width:100%; }
.btn--sm{ min-height:38px; padding:0 0.85rem; font-size:0.82rem; }
.btn--lg{ min-height:52px; padding:0 1.6rem; font-size:1rem; }

.action-bar{ position:fixed; left:0; right:0; bottom:0; z-index:65; background:var(--surface); border-top:1px solid var(--silver); display:grid; grid-template-columns:repeat(5,1fr); box-shadow:0 -4px 16px rgba(23,24,26,0.1); }
@media (min-width:1280px){ .action-bar{ display:none; } }
.action-bar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0.5rem 0.2rem; font-size:0.68rem; font-weight:700; color:var(--ink); min-height:58px; }
.action-bar a strong{ font-size:1.05rem; line-height:1; }
.action-bar a.is-accent{ color:var(--link); background:var(--orange-light); }

.card{ background:var(--surface); border:1px solid var(--silver); border-radius:var(--radius-md); padding:var(--sp-3); transition:box-shadow var(--transition), transform var(--transition); height:100%; }
.card:hover{ box-shadow:var(--shadow-1); transform:translateY(-3px); }
.card h3{ margin-bottom:0.4em; }
.card .tag{ display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--link); background:var(--orange-light); padding:0.3em 0.65em; border-radius:20px; margin-bottom:0.65em; }

.icon-tile{ width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:0.85rem; flex:none; }
.avatar-photo{ width:84px; height:84px; border-radius:50%; object-fit:cover; margin-bottom:0.85rem; border:3px solid var(--orange-light); }

.cat-teal{ --cat:var(--cat-teal); --cat-bg:var(--cat-teal-bg); }
.cat-purple{ --cat:var(--cat-purple); --cat-bg:var(--cat-purple-bg); }
.cat-rust{ --cat:var(--cat-rust); --cat-bg:var(--cat-rust-bg); }
.cat-green{ --cat:var(--cat-green); --cat-bg:var(--cat-green-bg); }
.cat-blue{ --cat:var(--cat-blue); --cat-bg:var(--cat-blue-bg); }
.cat-brown{ --cat:var(--cat-brown); --cat-bg:var(--cat-brown-bg); }
.cat-orange{ --cat:var(--orange); --cat-bg:var(--orange-light); }

.card--cat{ border-top:5px solid var(--cat); }
.card--cat .icon-tile{ background:var(--cat-bg); color:var(--cat); }
.card--cat .tag{ background:var(--cat-bg); color:var(--cat); }

.card-media{ aspect-ratio:16/10; border-radius:var(--radius-sm); margin-bottom:var(--sp-2); overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--cat-bg, var(--silver-light)) 0%, var(--surface) 100%);
  border:1px solid var(--silver);
}
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-media .tile-icon{ font-size:2.1rem; position:absolute; top:0.6rem; left:0.75rem; opacity:0.9; }

.trust-bar{ display:flex; flex-wrap:wrap; gap:0.5rem 0.75rem; }
.pill{ display:inline-flex; align-items:center; gap:0.4rem; border:1px solid var(--silver); border-radius:24px; padding:0.45rem 0.8rem; font-size:0.83rem; font-weight:600; background:var(--surface); }
.pill.pill--ok{ border-color:var(--emerald); color:var(--emerald); background:var(--emerald-bg); }
.badge{ display:inline-flex; align-items:center; gap:0.35rem; font-size:0.78rem; font-weight:700; padding:0.3em 0.7em; border-radius:6px; }
.badge--info{ background:var(--orange-light); color:var(--link); }
.badge--warn{ background:var(--amber-bg); color:var(--amber); }
.badge--ok{ background:var(--emerald-bg); color:var(--emerald); }

.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--silver); border:1px solid var(--silver); border-radius:var(--radius-md); overflow:hidden; }
@media (min-width:768px){ .stat-grid{ grid-template-columns:repeat(5,1fr); } }
.stat-cell{ background:var(--surface); padding:1.2rem 0.85rem; text-align:center; }
.stat-cell .num{ font-family:var(--font-head); font-size:clamp(1.6rem,1.3rem + 1.1vw,2.1rem); font-weight:800; color:var(--orange); line-height:1; }
.stat-cell .lbl{ font-size:0.78rem; color:var(--carbon); margin-top:0.35rem; }

.table-scroll{ overflow-x:auto; border:1px solid var(--silver); border-radius:var(--radius-md); -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; min-width:560px; font-size:0.88rem; }
table caption{ text-align:left; padding:0.7rem 1rem; font-weight:700; background:var(--bg); font-family:var(--font-head); }
th, td{ text-align:left; padding:0.75rem 1rem; border-bottom:1px solid var(--silver); vertical-align:top; font-family:var(--font-mono); font-size:0.82rem; }
thead th{ background:linear-gradient(120deg, var(--cat-teal), var(--cat-blue)); color:var(--white); font-family:var(--font-sans); font-size:0.76rem; text-transform:uppercase; letter-spacing:0.03em; }
tbody tr:hover{ background:var(--bg); }
tbody th{ font-family:var(--font-sans); font-weight:700; }
tbody tr.is-highlight{ background:var(--orange-light); }

.field{ display:flex; flex-direction:column; gap:0.4rem; margin-bottom:var(--sp-2); }
label{ font-weight:700; font-size:0.85rem; }
input, select, textarea{ font:inherit; font-size:0.95rem; padding:0.65rem 0.8rem; border:1.5px solid var(--silver); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); width:100%; min-height:46px; }
textarea{ min-height:100px; resize:vertical; }
input:focus, select:focus, textarea:focus{ border-color:var(--orange); outline:none; box-shadow:0 0 0 3px var(--orange-light); }
.field-hint{ font-size:0.78rem; color:var(--carbon); }
fieldset{ border:1px solid var(--silver); border-radius:var(--radius-md); padding:var(--sp-3); }
legend{ font-weight:700; padding:0 0.5rem; font-family:var(--font-head); }

.accordion-item{ border-bottom:1px solid var(--silver); }
.accordion-item summary{ list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 0.2rem; font-weight:700; cursor:pointer; font-family:var(--font-head); }
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary::after{ content:"+"; color:var(--orange); font-size:1.3rem; flex:none; }
.accordion-item[open] summary::after{ content:"\2212"; }
.accordion-item p{ padding-bottom:1rem; color:var(--carbon); }

.alert{ display:flex; gap:0.7rem; padding:0.9rem 1rem; border-radius:var(--radius-md); border:1px solid; font-size:0.9rem; }
.alert--info{ background:var(--orange-light); border-color:#F3D3AC; color:#8A4A0B; }
.alert--warn{ background:var(--amber-bg); border-color:#EBD2A2; color:#7A5312; }
.alert--ok{ background:var(--emerald-bg); border-color:#BFE4D2; color:#134B32; }

.breadcrumb{ font-size:0.8rem; color:var(--carbon); display:flex; flex-wrap:wrap; gap:0.3rem; align-items:center; }
.breadcrumb a{ color:var(--carbon); } .breadcrumb a:hover{ color:var(--link); }

.hero-copy .eyebrow{ text-transform:uppercase; letter-spacing:0.07em; font-size:0.76rem; font-weight:800; color:var(--link); margin-bottom:0.75rem; display:block; font-family:var(--font-head); }
.hero-media{ aspect-ratio:4/3; border-radius:var(--radius-md); position:relative; overflow:hidden; border:1px solid var(--silver);
  background:linear-gradient(135deg, var(--cat-teal) 0%, var(--cat-purple) 55%, var(--orange-dark) 100%);
}
.hero-media .slideshow{ position:absolute; inset:0; }
.hero-media .sphere-deco{ position:absolute; inset:0; margin:auto; width:40%; height:40%; opacity:0.9; filter:drop-shadow(0 12px 28px rgba(0,0,0,0.35)); z-index:2; }
.hero-media .hero-caption{ position:absolute; left:0; right:0; bottom:0; padding:0.85rem 1.1rem; background:linear-gradient(0deg, rgba(23,24,26,0.8), transparent); color:rgba(255,255,255,0.9); font-size:0.75rem; text-align:left; z-index:3; }

.slideshow{ position:relative; width:100%; height:100%; overflow:hidden; }
.slideshow .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 900ms ease; }
.slideshow .slide.is-active{ opacity:1; }
.slideshow .slide-dots{ position:absolute; left:0; right:0; bottom:0.5rem; display:flex; justify-content:center; gap:5px; z-index:6; }
.slideshow .slide-dot{ width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,0.5); padding:0; cursor:pointer; min-width:auto; min-height:auto; }
.slideshow .slide-dot.is-active{ background:var(--surface); width:16px; border-radius:4px; transition:width 200ms ease; }
.card-media .slideshow, .card-media .slide{ border-radius:inherit; }
.avatar-photo-wrap{ width:80px; height:80px; border-radius:50%; overflow:hidden; border:3px solid var(--orange-light); margin-bottom:0.75rem; position:relative; }
.avatar-photo-wrap .slideshow .slide-dots{ bottom:2px; gap:3px; }
.avatar-photo-wrap .slideshow .slide-dot{ width:4px; height:4px; }
.avatar-photo-wrap .slideshow .slide-dot.is-active{ width:9px; }
.cta-row{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:var(--sp-3); }

.site-footer{ background:linear-gradient(160deg, #123840 0%, #1b1d3a 100%); color:#C8CCD6; padding-block:var(--sp-6) var(--sp-4); }
.site-footer a{ color:#B9BCC1; }
.site-footer a:hover{ color:var(--white); }
.footer-logo{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.9rem; }
.footer-logo img{ width:44px; height:44px; }
.footer-logo span{ font-family:var(--font-head); font-weight:800; color:var(--white); font-size:1rem; }
.footer-grid{ display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-grid h4{ color:var(--white); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; font-family:var(--font-head); }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.55rem; font-size:0.88rem; }
.footer-bottom{ margin-top:var(--sp-5); padding-top:var(--sp-3); border-top:1px solid #33353a; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:0.78rem; color:#8b8e94; }

.text-carbon{ color:var(--carbon); }
.text-orange{ color:var(--link); }
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.section-head{ max-width:760px; margin-bottom:var(--sp-4); }
.section-head.center{ margin-inline:auto; text-align:center; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--orange); color:var(--white); padding:0.75rem 1.1rem; z-index:200; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }
hr.rule{ border:none; border-top:1px solid var(--silver); margin:var(--sp-4) 0; }

.advisor-banner{ background:linear-gradient(120deg, var(--cat-blue) 0%, var(--cat-purple) 50%, var(--orange-dark) 100%); border-radius:var(--radius-md); padding:clamp(1.25rem,3.5vw,2.25rem); color:var(--white); display:grid; gap:var(--sp-3); grid-template-columns:1fr; align-items:center; position:relative; overflow:hidden; }
@media (min-width:768px){ .advisor-banner{ grid-template-columns:1.4fr auto; } }
.advisor-banner .spark{ color:#FFE3BE; font-weight:800; }
.advisor-banner p{ color:rgba(255,255,255,0.88); }

.advisor-shell{ display:grid; gap:var(--sp-3); grid-template-columns:1fr; }
@media (min-width:960px){ .advisor-shell{ grid-template-columns:1.3fr 1fr; align-items:start; } }
.chat-panel{ border:1px solid var(--silver); border-radius:var(--radius-md); padding:var(--sp-3); background:var(--surface); min-height:0; display:flex; flex-direction:column; }
.chat-panel:has(#advisor-chat:not(.is-hidden)){ min-height:420px; }
.chat-log{ flex:1; display:flex; flex-direction:column; gap:0.75rem; overflow-y:auto; max-height:50vh; padding-right:4px; margin-bottom:var(--sp-2); }
.bubble{ max-width:80%; padding:0.65rem 0.9rem; border-radius:12px; font-size:0.9rem; line-height:1.5; }
.bubble--ai{ background:var(--bg); align-self:flex-start; border-bottom-left-radius:2px; }
.bubble--user{ background:var(--orange); color:var(--ink); font-weight:600; align-self:flex-end; border-bottom-right-radius:2px; }
.chat-options{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.75rem; }
.chip{ border:1.5px solid var(--silver); background:var(--surface); border-radius:24px; padding:0.55rem 1rem; font-size:0.83rem; font-weight:600; cursor:pointer; min-height:44px; }
.chip:hover{ border-color:var(--orange); color:var(--link); }
.progress-track{ height:8px; background:var(--bg); border-radius:4px; overflow:hidden; margin:0.6rem 0 1rem; }
.progress-fill{ height:100%; background:var(--orange); width:0%; transition:width 300ms ease; }
.result-panel{ border:1px solid var(--silver); border-radius:var(--radius-md); padding:var(--sp-3); background:var(--bg); }
.is-hidden{ display:none !important; }

.platform-tile{ border-radius:var(--radius-md); padding:var(--sp-3); color:var(--white); position:relative; overflow:hidden; }
.platform-tile h3{ color:var(--white); }
.platform-tile p{ color:rgba(255,255,255,0.82); }
.platform-tile .grade-codes{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.75rem; }
.platform-tile .grade-codes a{ background:rgba(255,255,255,0.15); color:var(--white); padding:0.3rem 0.7rem; border-radius:20px; font-size:0.8rem; font-weight:700; font-family:var(--font-mono); }
.platform-tile .grade-codes a:hover{ background:rgba(255,255,255,0.28); text-decoration:none; }
.platform-tile .grade-codes span{ background:rgba(255,255,255,0.15); color:var(--white); padding:0.3rem 0.7rem; border-radius:20px; font-size:0.8rem; font-weight:700; font-family:var(--font-mono); }

.modal-backdrop{ position:fixed; inset:0; background:rgba(23,24,26,0.6); display:none; align-items:center; justify-content:center; z-index:120; padding:var(--sp-2); }
.modal-backdrop.is-open{ display:flex; }
.modal{ background:var(--surface); border-radius:var(--radius-md); max-width:480px; width:100%; padding:var(--sp-4); max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-2); }
.modal-close{ float:right; border:none; background:none; font-size:1.4rem; cursor:pointer; line-height:1; color:var(--carbon); min-width:44px; min-height:44px; }

@media print{ .site-header,.action-bar,.mobile-nav,.site-footer{ display:none !important; } }

/* ---- Dark theme ---------------------------------------------------------
   Overrides the :root surface/text tokens only. Brand orange and the
   category hues keep their hue and get darker backings. */
html[data-theme="dark"]{
  --ink:#EDEFF2;
  --ink-2:#C9CED5;
  --carbon:#9BA2AB;
  --surface:#191B1F;
  --silver:#343841;
  --silver-light:#212429;
  --bg:#0E1013;
  --header-bg:rgba(25,27,31,0.97);
  /* --white is deliberately NOT overridden: it means literal white,
     used for text sitting on saturated brand gradients. */

  --orange-light:#3A2410;
  --link:#F5A052;

  --cat-teal:#4FC5CF;      --cat-teal-bg:#0E2E31;
  --cat-purple:#B48DE8;    --cat-purple-bg:#241A34;
  --cat-rust:#E2874F;      --cat-rust-bg:#331C0F;
  --cat-green:#4FC77F;     --cat-green-bg:#0F2E1C;
  --cat-blue:#6BA3F0;      --cat-blue-bg:#12233C;
  --cat-brown:#C08B5E;     --cat-brown-bg:#2B1F14;

  --emerald:#4FC793; --emerald-bg:#0E2C21;
  --amber:#E0A94E;   --amber-bg:#2E2211;

  --shadow-1: 0 3px 10px rgba(0,0,0,0.45);
  --shadow-2: 0 12px 32px rgba(0,0,0,0.6);
}

html[data-theme="dark"] img.mark,
html[data-theme="dark"] .footer-logo img{ filter: brightness(0) invert(1); }

.theme-toggle{
  width:34px; height:34px; padding:0; flex:none;
  border:1px solid var(--silver); border-radius:50%;
  background:transparent; color:var(--carbon);
  cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition: color var(--transition), border-color var(--transition);
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--carbon); }
.theme-toggle::before{ content:"\263D"; font-size:15px; }
html[data-theme="dark"] .theme-toggle::before{ content:"\2600"; }

/* Submission failure shown on the form itself — never a silent drop. */
.form-error{
  margin:0.75rem 0 0; padding:0.6rem 0.8rem;
  border:1px solid var(--cat-rust); border-radius:var(--radius-sm);
  background:var(--cat-rust-bg); color:var(--cat-rust);
  font-size:var(--fs-small); font-weight:600;
}
.form-error[hidden]{ display:none; }