/* Optical smoked glass, adapted from the supplied Glass Folder reference.
   A translucent front, polished upper rim and dense lower reading zone give
   depth. The live world, solid wordmark and native film geometry stay intact.
   Fixed lighting, no cursor tracking and no additional animation loops. */
:root {
  --glass-ink: #f5f5f7;
  --glass-soft: #c8c8ce;
  --glass-radius: 14px;
  --glass-rim: rgba(239, 242, 249, .30);
  --glass-rim-top: rgba(255, 255, 255, .65);
  --glass-rim-bottom: rgba(239, 116, 103, .28);
  --glass-ease: cubic-bezier(.2, .8, .2, 1);
  --glass-sheen: radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 58%);
  --glass-face: var(--glass-sheen), linear-gradient(180deg, rgba(31, 33, 39, .76), rgba(18, 20, 25, .93) 55%, rgba(15, 16, 21, .97));
  --glass-panel: var(--glass-sheen), linear-gradient(165deg, rgba(35, 37, 44, .92), rgba(19, 21, 26, .97) 58%, rgba(36, 23, 28, .96));
  --glass-ruby: radial-gradient(120% 100% at 25% 0%, rgba(255, 236, 233, .12), transparent 56%), linear-gradient(180deg, #a52c26, #831d1c 72%, #6d191b);
  --glass-reflection: inset 0 1px 0 rgba(255, 255, 255, .32), inset 1px 0 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(238, 102, 89, .16);
  --glass-elevation: 0 12px 28px -12px rgba(0, 0, 0, .72);
}

/* Sample the world on the wash, not the header holding a fixed mobile menu. */
header#nav::before, header.header::before {
  background: var(--glass-sheen), linear-gradient(180deg, rgba(25, 27, 32, .96), rgba(15, 17, 21, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .19);
  opacity: 1;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
header.header { isolation: isolate; background: transparent; }
header.header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
header#nav::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .37) 30%, rgba(237, 115, 103, .27) 74%, transparent); }

header#nav .nav-burger, .header .menu-button, .header .nav-cta,
.button.secondary, .thank-you-mark, .aicanfeel-sound-toggle {
  border: 1px solid var(--glass-rim);
  border-top-color: var(--glass-rim-top);
  border-bottom-color: var(--glass-rim-bottom);
  border-radius: var(--glass-radius);
  background: var(--glass-face);
  box-shadow: var(--glass-reflection), var(--glass-elevation);
  color: var(--glass-ink);
}
.header .menu-button { padding: 0; }
header#nav .nav-burger { width: 44px; height: 44px; min-width: 44px; }
header#nav .nav-burger i { right: 8px; }
header#nav .nav-burger i:nth-child(1) { top: 15px; }
header#nav .nav-burger i:nth-child(2) { top: 23px; }
.header .nav-cta:hover, .button.secondary:hover,
.aicanfeel-sound-toggle:hover:not(:disabled) {
  background: var(--glass-sheen), linear-gradient(180deg, #363941, #1f222a);
  border-color: rgba(255, 255, 255, .63);
}

/* White text sits on dense ruby. The bright cap and polished edge provide
   the optics without washing out the conversion action. */
.hero-top .expert-primary, .expert-sticky, .button.primary:not(:disabled) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 173, 164, .44);
  border-top-color: rgba(255, 235, 232, .76);
  border-bottom-color: rgba(250, 111, 98, .50);
  border-radius: var(--glass-radius);
  background: var(--glass-ruby);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -3px 8px rgba(26, 2, 7, .28), 0 12px 24px -12px rgba(0, 0, 0, .70);
  color: #fff;
}
.expert-sticky { position: fixed; }
.hero-top .expert-primary:hover, .expert-sticky:hover, .button.primary:not(:disabled):hover {
  background: var(--glass-ruby);
  border-color: rgba(255, 232, 229, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -3px 8px rgba(26, 2, 7, .22), 0 16px 28px -12px rgba(0, 0, 0, .76);
}
.hero-top .expert-primary::after, .expert-sticky::after, .button.primary:not(:disabled)::after {
  content: '';
  position: absolute;
  inset: -100% auto -100% -25%;
  width: 28%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: translateX(-180%) rotate(22deg);
  transition: transform .7s var(--glass-ease);
}
.hero-top .expert-primary:is(:hover, :focus-visible)::after,
.expert-sticky:is(:hover, :focus-visible)::after,
.button.primary:not(:disabled):is(:hover, :focus-visible)::after { transform: translateX(640%) rotate(22deg); }
.hero-top .expert-primary:active, .expert-sticky:active,
.button:not(:disabled):active { transform: translateY(0) scale(.98); }
.hero-top .expert-primary:focus-visible, .expert-sticky:focus-visible,
.button:focus-visible, .header .nav-cta:focus-visible,
.header .menu-button:focus-visible, header#nav .nav-burger:focus-visible {
  outline: 2px solid var(--glass-ink);
  outline-offset: 4px;
}
.button.primary:disabled, .submit-enquiry:disabled {
  color: #e6d8d8;
  background: #5a282a;
  border: 1px solid #b78e90;
  border-radius: var(--glass-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  transform: none;
  cursor: wait;
}

/* A single optical front over the lab. Existing breathing only varies the
   small ruby underlayer, never text contrast or the main surface opacity. */
#hero .hero-sub {
  border-color: var(--glass-rim);
  border-top-color: var(--glass-rim-top);
  border-bottom-color: var(--glass-rim-bottom);
  border-radius: var(--glass-radius);
  background: var(--glass-sheen), linear-gradient(180deg, rgba(23, 26, 32, .92), rgba(13, 16, 21, .98));
  box-shadow: var(--glass-reflection), 0 14px 32px -16px rgba(0, 0, 0, .70);
  color: var(--glass-ink);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .36);
}
#hero .hero-sub::before {
  inset: 0;
  background: radial-gradient(100% 140% at 100% 100%, rgba(197, 46, 44, .16), transparent 62%);
}

/* Reflections belong to the frame and captions, never to video pixels.
   No dimensions, aspect ratios, object-fit or media flow are changed here. */
#cards .card {
  border-radius: 16px;
  overflow: hidden;
  background: #12151a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 20px 40px -24px rgba(0, 0, 0, .84);
}
#cards .card .card-fr { border-radius: 16px 16px 0 0; }
#cards .card-edge { border-radius: 16px; }
#cards .card-edge .card-edge-base { opacity: .30; }
#cards .has-film .card-lab {
  border-top-color: rgba(255, 255, 255, .25);
  background: radial-gradient(110% 190% at 16% 0%, rgba(255, 255, 255, .10), transparent 55%), linear-gradient(180deg, #272a31, #191c22 80%, #251b21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}
#cards .card-lab b { color: var(--glass-ink); }
#cards .card-lab .jp { color: #ffb5a8; }
#cards .card-meta {
  color: var(--glass-soft);
  background: linear-gradient(180deg, #15181e, #101318);
  border-top-color: rgba(255, 255, 255, .09);
}

/* Atlas plates share one sheet finish, without repeated backdrop sampling. */
body[data-layout-curriculum="b"] .cur {
  background: rgba(232, 237, 248, .15);
  border-color: rgba(232, 237, 248, .19);
  border-radius: 16px;
  overflow: hidden;
}
body[data-layout-curriculum="b"] .les {
  background: var(--glass-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .19);
}
body[data-layout-curriculum="b"] .les::before { background: radial-gradient(100% 100% at 100% 100%, rgba(186, 48, 45, .09), transparent 62%); }
body[data-layout-curriculum="b"] .les h3 { color: var(--glass-ink); }
body[data-layout-curriculum="b"] .les p,
body[data-layout-curriculum="b"] .les .t { color: var(--glass-soft); }

/* Native radios and fields retain their reading order and all states. */
.brief-form .choice-content {
  border-color: #737984;
  border-top-color: #969ba4;
  border-bottom-color: #66646b;
  border-radius: var(--glass-radius);
  background: var(--glass-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 8px 18px -14px rgba(0, 0, 0, .72);
  transition: border-color .25s var(--glass-ease), box-shadow .25s var(--glass-ease), background-color .25s var(--glass-ease);
}
.brief-form .choice-title { color: var(--glass-ink); }
.brief-form .choice-description, .brief-form .choice-top { color: var(--glass-soft); }
.brief-form .choice-option:hover .choice-content {
  border-color: #d1d5df;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 10px 20px -14px rgba(0, 0, 0, .76);
}
.brief-form .choice-option input:checked + .choice-content {
  border-color: #f09e94;
  border-top-color: #ffddd8;
  background: radial-gradient(115% 95% at 12% 0%, rgba(255, 255, 255, .12), transparent 56%), linear-gradient(160deg, #343039, #25222c 58%, #49252d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .29), inset 0 -1px 0 rgba(255, 139, 124, .15);
}
.brief-form .choice-option input:checked + .choice-content .choice-description { color: #e9d1ce; }
.brief-form .choice-option input:focus-visible + .choice-content { outline: 2px solid var(--glass-ink); outline-offset: 3px; }
.brief-form .choice-indicator, .brief-form .timing-dot { border-color: #a6a9b3; }
.brief-form .choice-option input:checked + .choice-content .choice-indicator { color: #fff; background: #a42a25; border-color: #ffbaad; }
.brief-form .choice-option input:disabled + .choice-content { opacity: .72; cursor: wait; }
.contact-page .brief-form input:not([type=checkbox]):not([type=radio]),
.contact-page .brief-form textarea, .brief-form select, .project-finder select {
  border: 1px solid #737984;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 36%), #15181f;
  color: var(--glass-ink);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .08);
  caret-color: #ffb3a7;
}
.contact-page .brief-form input:not([type=checkbox]):not([type=radio]):hover,
.contact-page .brief-form textarea:hover, .brief-form select:hover,
.project-finder select:hover { border-color: #b5bac5; }
.contact-page .brief-form input:not([type=checkbox]):not([type=radio]):focus,
.contact-page .brief-form textarea:focus, .brief-form select:focus,
.project-finder select:focus {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 36%), #1b1e27;
  border-color: #f5d1cc;
  outline: 2px solid #f5d1cc;
  outline-offset: 3px;
}
.brief-form input::placeholder, .brief-form textarea::placeholder { color: #b1b5c0; opacity: 1; }
.brief-form input:disabled, .brief-form textarea:disabled,
.brief-form select:disabled { opacity: .72; cursor: wait; }
.brief-form input[aria-invalid="true"],
.brief-form textarea[aria-invalid="true"] { border-color: #ffb1a5; }
.brief-form .form-error {
  color: #ffd3ca;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent), #352229;
  padding: 16px;
  border: 1px solid #bf8b84;
  border-radius: 12px;
}
.brief-form .form-error a { color: #fff2ef; text-decoration: underline; text-underline-offset: 3px; }
.contact-signal radialGradient stop:first-child { stop-color: #777f91; }
.contact-signal radialGradient stop:nth-child(2) { stop-color: #292e3a; }
.contact-signal radialGradient stop:nth-child(3) { stop-color: #151923; }
.contact-signal radialGradient stop:last-child { stop-color: #49272f; }

/* Shared material at existing content boundaries. Legal body copy keeps a
   stable reading surface, rather than a glass panel for every paragraph. */
.deliverables, .product-feature, .project-finder {
  background: var(--glass-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .21), inset 0 -1px 0 rgba(234, 116, 105, .13);
}
.service-scope article { border-top-color: rgba(242, 244, 250, .27); }
.service-labels span {
  border-color: rgba(242, 244, 250, .27);
  border-radius: 8px;
  background: var(--glass-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
  color: var(--glass-soft);
}
.policy-draft {
  border: 1px solid #8f777d;
  border-top-color: #c9b3b8;
  border-radius: var(--glass-radius);
  background: var(--glass-panel);
  box-shadow: var(--glass-reflection);
  color: #f3d1cc;
}
.policy-draft span { color: #e3c0bc; }
.footer-bottom, .foot-base { border-top-color: rgba(242, 244, 250, .22); }
.thank-you-mark { color: #ffb3a7; }

/* One frosted consent object; both decisions have equal emphasis. */
.privacy-consent {
  border-color: rgba(236, 241, 250, .32);
  border-top-color: rgba(255, 255, 255, .67);
  border-bottom-color: rgba(236, 125, 113, .31);
  border-radius: 16px;
  background: var(--glass-sheen), linear-gradient(180deg, rgba(33, 36, 44, .97), rgba(15, 18, 25, .99) 62%, rgba(31, 22, 29, .99));
  box-shadow: var(--glass-reflection), 0 24px 48px -20px rgba(0, 0, 0, .84);
  color: var(--glass-ink);
  scrollbar-color: #8a8c96 #15181f;
}
.privacy-consent h2, .privacy-consent p.privacy-consent-current,
.privacy-consent-links a { color: var(--glass-ink); }
.privacy-consent p { color: var(--glass-soft); }
.privacy-consent-actions button {
  border-color: #858a96;
  border-top-color: #b6bbc5;
  border-radius: 10px;
  background: var(--glass-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  color: var(--glass-ink);
}
.privacy-consent-actions button:hover { background: #343842; border-color: #e4e7ef; }
.privacy-consent-close { border-radius: 10px; color: var(--glass-ink); }
.privacy-consent-close:hover { background: rgba(255, 255, 255, .10); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header#nav::before, header.header::before {
    background: var(--glass-sheen), linear-gradient(180deg, rgba(25, 27, 33, .76), rgba(15, 17, 22, .90));
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
  }
  #hero .hero-sub {
    background: var(--glass-sheen), linear-gradient(180deg, rgba(24, 27, 34, .78), rgba(13, 16, 22, .94));
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
  }
  .expert-sticky {
    background: radial-gradient(120% 100% at 25% 0%, rgba(255, 236, 233, .12), transparent 56%), linear-gradient(180deg, rgba(148, 35, 32, .90), rgba(102, 23, 27, .96));
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
  }
  .privacy-consent {
    background: var(--glass-sheen), linear-gradient(180deg, rgba(33, 36, 44, .90), rgba(15, 18, 25, .97) 62%, rgba(31, 22, 29, .97));
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }
}
@media (max-width: 820px) {
  header#nav::before, header.header::before { backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
  #hero .hero-sub { backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
  .privacy-consent { backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
  .expert-sticky { background: var(--glass-ruby); backdrop-filter: none; -webkit-backdrop-filter: none; }
  header#nav.menu-open::before { background: rgba(12, 15, 21, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
  header#nav.menu-open .nav-burger i:nth-child(n) { top: 21px; }
  header#nav .nav-links, .header .nav.open {
    background: radial-gradient(100% 65% at 100% 0%, rgba(178, 48, 48, .09), transparent 64%), linear-gradient(180deg, #21252f, #10141c 62%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-top .expert-primary::after, .expert-sticky::after,
  .button.primary:not(:disabled)::after { display: none; }
  .hero-top .expert-primary:active, .expert-sticky:active,
  .button:not(:disabled):active { transform: none; }
  .brief-form .choice-content { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-sheen: linear-gradient(transparent, transparent);
    --glass-face: #20242d;
    --glass-panel: #1b2028;
    --glass-ruby: #8b2523;
    --glass-reflection: inset 0 0 0 transparent;
  }
  header#nav::before, header.header::before,
  #hero .hero-sub, .privacy-consent { background: #151a23; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .expert-sticky { background: #8b2523; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #hero .hero-sub::before, .hero-top .expert-primary::after,
  .expert-sticky::after, .button.primary:not(:disabled)::after { display: none; }
  header#nav.menu-open::before, header#nav .nav-links,
  .header .nav.open { background: #151a23; }
  .brief-form .choice-option input:checked + .choice-content { background: #3b252e; }
  .contact-page .brief-form input:not([type=checkbox]):not([type=radio]),
  .contact-page .brief-form textarea, .brief-form select,
  .project-finder select { background: #151a23; box-shadow: none; }
  .contact-page .brief-form input:not([type=checkbox]):not([type=radio]):focus,
  .contact-page .brief-form textarea:focus { background: #151a23; }
  #cards .has-film .card-lab, #cards .card-meta { background: #171c25; box-shadow: none; }
}
@media (forced-colors: active) {
  :root { --glass-ink: CanvasText; --glass-soft: CanvasText; --glass-face: Canvas; --glass-panel: Canvas; --glass-ruby: Canvas; --glass-reflection: inset 0 0 0 transparent; }
  header#nav::before, header.header::before, #hero .hero-sub,
  header#nav .nav-links, .header .nav.open, header#nav .nav-burger,
  .header .menu-button, .header .nav-cta, .button.secondary,
  .thank-you-mark, .aicanfeel-sound-toggle, .hero-top .expert-primary,
  .expert-sticky, .button.primary, .button.primary:not(:disabled), .privacy-consent,
  .privacy-consent-actions button, .brief-form .choice-content,
  .brief-form .choice-option:hover .choice-content,
  #cards .has-film .card-lab, #cards .card-meta,
  body[data-layout-curriculum="b"] .cur, body[data-layout-curriculum="b"] .les,
  .deliverables, .product-feature, .project-finder, .policy-draft,
  .brief-form .form-error {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
  }
  .brief-form .choice-option input:checked + .choice-content { background: Canvas; outline: 2px solid Highlight; }
  .brief-form .choice-option input:checked + .choice-content .choice-description { color: CanvasText; }
  .contact-page .brief-form input:not([type=checkbox]):not([type=radio]),
  .contact-page .brief-form textarea, .brief-form select,
  .project-finder select { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  .contact-page .brief-form input:not([type=checkbox]):not([type=radio]):focus,
  .contact-page .brief-form textarea:focus, .brief-form select:focus,
  .project-finder select:focus { background: Canvas; color: CanvasText; border-color: Highlight; outline-color: Highlight; }
  .brief-form input::placeholder, .brief-form textarea::placeholder { color: GrayText; }
  .button.primary:disabled { background: Canvas; color: GrayText; border-color: GrayText; }
  #hero .hero-sub::before, body[data-layout-curriculum="b"] .les::before,
  .hero-top .expert-primary::after, .expert-sticky::after,
  .button.primary::after { display: none; }
  .privacy-consent-actions button:hover, .button.secondary:hover,
  .header .nav-cta:hover, .hero-top .expert-primary:hover,
  .expert-sticky:hover, .button.primary:not(:disabled):hover {
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
}