@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --official-orange: #d08828;
  --official-gold: #e6c463;
  --official-blue: #bcc1c5;
  --official-taupe: #967d77;
  --black: #000;
  --white: #fff;
  --body: "Poppins", sans-serif;
  --display: "Caveat", cursive;
  --display-weight: 600;
  --ink: #191614;
  --deep: #4f2c12;
  --primary: #d08828;
  --secondary: #e6c463;
  --accent: #bcc1c5;
  --soft: #f7f0df;
  --paper: #fffcf7;
  --muted: #74635e;
  --line: rgba(25, 22, 20, 0.17);
  --shadow: 0 24px 70px rgba(72, 44, 22, 0.14);
  --wrap: min(1200px, calc(100% - 64px));
  --radius: 2px;
}

:root[data-palette="lagoon"] { --ink:#102c31; --deep:#123b43; --primary:#078da0; --secondary:#e6c463; --accent:#d08828; --soft:#e6f0f0; --paper:#fbfdfc; --muted:#587076; --line:rgba(16,44,49,.17); --shadow:0 24px 70px rgba(10,65,74,.14) }
:root[data-palette="coral"] { --ink:#371d1a; --deep:#702f25; --primary:#e0523f; --secondary:#f1c84c; --accent:#967d77; --soft:#f9e7df; --paper:#fffaf6; --muted:#775b55; --line:rgba(55,29,26,.17); --shadow:0 24px 70px rgba(115,44,34,.15) }
:root[data-palette="violet"] { --ink:#2e2032; --deep:#4e3157; --primary:#8c3f78; --secondary:#e6c463; --accent:#d08828; --soft:#f1e8ef; --paper:#fffbfe; --muted:#6f5a71; --line:rgba(46,32,50,.17); --shadow:0 24px 70px rgba(78,49,87,.14) }
:root[data-type="poppins"] { --display:"Poppins",sans-serif; --display-weight:700 }

* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:90px }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.65; overflow-x:hidden }
body.menu-open { overflow:hidden }
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit }
.bb-wrap { width:var(--wrap); margin-inline:auto }
.bb-section { padding-block:116px }
.skip-link { position:fixed; top:8px; left:8px; z-index:999; background:var(--white); color:#000; padding:9px 14px; transform:translateY(-160%) }
.skip-link:focus { transform:none }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }

.bb-header { position:absolute; inset:0 0 auto; z-index:50; color:#fff; border-bottom:1px solid rgba(255,255,255,.25); transition:.3s }
.bb-header.is-scrolled { position:fixed; background:color-mix(in srgb,var(--deep) 94%,transparent); backdrop-filter:blur(15px); box-shadow:0 8px 35px rgba(0,0,0,.12) }
.header-row { min-height:92px; display:flex; align-items:center; gap:38px }
.bb-brand { width:148px; margin-right:auto }
.bb-brand img { height:62px; width:100%; object-fit:contain }
.desktop-navigation { display:flex; gap:30px; font-size:13px; font-weight:600 }
.desktop-navigation a { padding:33px 0; position:relative }
.desktop-navigation a:after { content:""; position:absolute; left:0; right:100%; bottom:26px; height:2px; background:var(--secondary); transition:.25s }
.desktop-navigation a:hover:after,.desktop-navigation a:focus-visible:after { right:0 }
.header-action { border:1px solid rgba(255,255,255,.6); padding:11px 17px; font-size:13px; font-weight:600 }
.header-action span { color:var(--secondary); margin-left:6px }
.menu-button,.mobile-navigation { display:none }

.bb-hero { min-height:780px; height:100svh; position:relative; color:#fff; display:flex; align-items:flex-end; background:var(--deep); overflow:hidden }
.hero-photo { position:absolute; inset:0 0 0 34%; background:url("assets/hero.webp") center 43%/cover no-repeat; filter:saturate(.86) }
.hero-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 72%,transparent) 28%,color-mix(in srgb,var(--deep) 18%,transparent) 75%),linear-gradient(0deg,color-mix(in srgb,var(--deep) 58%,transparent),transparent 58%) }
.hero-watercolor { position:absolute; inset:0; pointer-events:none; opacity:.75; filter:blur(.1px) }
.hero-watercolor:before,.hero-watercolor:after,.hero-watercolor i { content:""; position:absolute; mix-blend-mode:screen; opacity:.25; filter:blur(20px) }
.hero-watercolor:before { width:500px; height:500px; left:-160px; top:-150px; background:var(--primary); border-radius:42% 58% 65% 35% }
.hero-watercolor:after { width:440px; height:380px; right:-140px; bottom:-100px; background:var(--secondary); border-radius:62% 38% 44% 56% }
.hero-watercolor i:nth-child(1) { width:390px; height:470px; left:25%; top:-170px; background:var(--accent); transform:rotate(28deg) }
.hero-watercolor i:nth-child(2) { width:340px; height:250px; left:42%; bottom:-120px; background:var(--primary); transform:rotate(-18deg) }
.hero-watercolor i:nth-child(3) { width:280px; height:320px; right:7%; top:10%; background:var(--secondary) }
.hero-layout { position:relative; z-index:2; min-height:100%; display:flex; align-items:flex-end; padding-bottom:90px }
.hero-copy { max-width:850px }
.kicker { margin:0 0 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em }
.kicker:before { content:""; display:inline-block; width:22px; height:1px; margin:0 10px 3px 0; background:currentColor }
.kicker.light { color:rgba(255,255,255,.75) }
h1,h2,h3,blockquote { font-family:var(--display); font-weight:var(--display-weight); letter-spacing:-.025em; line-height:.98 }
h1 { font-size:clamp(64px,8.4vw,122px); margin:0; max-width:840px }
h1 span,h2 span { color:var(--secondary) }
.hero-intro { max-width:620px; font-size:18px; margin:26px 0 34px }
.button-row { display:flex; gap:12px; flex-wrap:wrap }
.bb-button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:12px 23px; font-size:13px; font-weight:700; transition:transform .2s,background .2s }
.bb-button:hover { transform:translateY(-2px) }
.bb-button.primary { background:var(--secondary); color:#17130d }
.bb-button.on-dark { border:1px solid rgba(255,255,255,.7); color:#fff }
.bb-button.pale { background:#fff; color:var(--deep) }
.hero-ticket { position:absolute; right:0; bottom:0; width:268px; padding:24px 26px; color:#17130d; background:var(--secondary); clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 18%); display:grid; grid-template-columns:1fr auto }
.hero-ticket span { text-transform:uppercase; letter-spacing:.16em; font-size:10px; font-weight:700 }
.hero-ticket strong { font-family:var(--display); font-size:25px; line-height:1.05; margin-top:5px }
.hero-ticket b { grid-row:1/3; grid-column:2; align-self:center; font-size:22px }

.title-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:110px; align-items:end; margin-bottom:64px }
.title-grid h2,.section-topline h2,.service-section h2 { font-size:clamp(52px,6vw,82px); margin:0 }
.section-lead { font-size:17px; max-width:470px; margin:0 0 8px }
.education-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:24px 22px; align-items:start }
.education-card { position:relative }
.card-one { grid-column:1/5 }
.card-two { grid-column:5/9; margin-top:70px }
.card-three { grid-column:9/13; margin-top:15px }
.image-frame { height:360px; position:relative; overflow:hidden; background:var(--soft); clip-path:polygon(0 5%,92% 0,100% 89%,7% 100%) }
.image-frame:after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25) }
.image-frame img { width:100%; height:100%; object-fit:cover; transition:.6s }
.education-card:hover img { transform:scale(1.035) }
.education-copy { position:relative; padding:29px 17px 0 }
.step { position:absolute; right:13px; top:26px; font-size:11px; font-weight:700; color:var(--primary) }
.education-copy h3 { font-size:36px; margin:0 0 14px }
.education-copy>p:not(.kicker) { font-size:14px; margin:0 0 20px }
.education-copy>a,.news-layout a { font-size:12px; font-weight:700; border-bottom:1px solid var(--line); padding-bottom:5px }
.education-copy>a span { float:right; margin-left:20px }
.info-band { margin-top:64px; display:grid; grid-template-columns:180px 1fr; gap:35px; align-items:start; border-block:1px solid var(--line); padding:25px 32px; background:var(--soft) }
.info-band strong { color:var(--primary); text-transform:uppercase; font-size:11px; letter-spacing:.16em }
.info-band p { margin:0; max-width:820px; font-size:14px }

.values-section { background:var(--deep); color:#fff; padding:110px 0 120px; position:relative; overflow:hidden }
.polygon-field { position:absolute; width:680px; height:680px; right:-150px; top:-230px; border:1px solid rgba(255,255,255,.15); clip-path:polygon(48% 0,85% 13%,100% 51%,80% 88%,41% 100%,8% 75%,0 30%); transform:rotate(12deg) }
.polygon-field:before,.polygon-field:after { content:""; position:absolute; inset:62px; border:1px solid rgba(255,255,255,.12); clip-path:polygon(48% 0,85% 13%,100% 51%,80% 88%,41% 100%,8% 75%,0 30%); transform:rotate(18deg) }
.polygon-field:after { inset:130px; transform:rotate(-8deg); background:color-mix(in srgb,var(--primary) 24%,transparent); border:0 }
.values-content { position:relative }
.title-grid.compact { margin-bottom:55px }
.values-section .section-lead { color:rgba(255,255,255,.72) }
.values-list { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.25) }
.values-list article { padding:35px 25px 10px; border-right:1px solid rgba(255,255,255,.17) }
.values-list article:last-child { border:0 }
.values-list span { color:var(--secondary); font-size:12px; font-weight:700 }
.values-list h3 { font-size:36px; margin:13px 0 }
.values-list p { color:rgba(255,255,255,.72); font-size:14px; margin:0 }

.campus-section { overflow:hidden }
.campus-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:95px; align-items:center }
.campus-image { position:relative; min-height:650px }
.campus-image img { width:100%; height:650px; object-fit:cover; clip-path:polygon(7% 0,95% 4%,100% 89%,50% 100%,0 89%,3% 12%) }
.line-polygon { position:absolute; inset:-28px 16px 13px -28px; border:1px solid var(--primary); clip-path:polygon(7% 0,95% 4%,100% 89%,50% 100%,0 89%,3% 12%); pointer-events:none }
.campus-copy h2 { font-size:clamp(50px,5.6vw,75px); margin:0 0 25px }
.campus-copy>p:not(.kicker) { font-size:16px; margin-bottom:24px }
.inline-link { font-size:13px; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:5px }
.campus-copy dl { margin:45px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border-top:1px solid var(--line) }
.campus-copy dl div { padding-top:20px }
.campus-copy dt { color:var(--primary); font-family:var(--display); font-weight:var(--display-weight); font-size:29px; line-height:1 }
.campus-copy dd { margin:8px 0 0; font-size:11px; line-height:1.4 }

.news-section { background:var(--soft) }
.section-topline { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:50px }
.section-topline h2 { font-size:clamp(48px,5vw,70px) }
.news-layout { display:grid; grid-template-columns:1.45fr .72fr .72fr; gap:20px }
.news-feature,.mini-news { background:var(--paper); box-shadow:0 12px 40px rgba(40,28,18,.07) }
.news-feature { display:grid; grid-template-columns:1.1fr .9fr; min-height:430px }
.news-feature>img { width:100%; height:100%; object-fit:cover }
.news-feature>div { padding:40px 34px }
.news-feature time { color:var(--muted); font-size:11px }
.news-layout h3 { font-size:32px; margin:12px 0 16px }
.news-layout p:not(.kicker) { font-size:14px }
.mini-news { display:grid; grid-template-rows:265px 1fr; overflow:hidden }
.mini-news>img { width:78%; height:290px; object-fit:cover; margin:28px auto -18px; box-shadow:0 10px 28px rgba(0,0,0,.15) }
.mini-news>div { padding:26px 25px; position:relative; background:var(--paper) }
.mini-news.accent>div { background:var(--secondary); color:#19130a }

.quote-section { padding:115px 0; text-align:center; background:var(--accent); color:#17130f; position:relative; overflow:hidden }
.quote-section:before { content:""; position:absolute; width:420px; height:420px; left:-180px; top:-160px; border:1px solid rgba(0,0,0,.18); transform:rotate(24deg); clip-path:polygon(48% 0,85% 13%,100% 51%,80% 88%,41% 100%,8% 75%,0 30%) }
.quote-wrap { position:relative }
.quote-section blockquote { max-width:960px; margin:28px auto 34px; font-size:clamp(44px,5.3vw,72px) }
.quote-section p:last-child strong,.quote-section p:last-child span { display:block }
.quote-section p:last-child span { font-size:12px; margin-top:4px }

.start-panel { background:var(--primary); color:#fff; padding:70px 76px; display:grid; grid-template-columns:1fr 1fr; gap:90px; position:relative; clip-path:polygon(0 0,96% 0,100% 14%,98% 100%,3% 97%) }
.start-panel:after { content:""; position:absolute; width:240px; height:240px; right:-70px; top:-70px; background:color-mix(in srgb,var(--secondary) 35%,transparent); clip-path:polygon(48% 0,85% 13%,100% 51%,80% 88%,41% 100%,8% 75%,0 30%) }
.start-panel>div,.start-panel ol { position:relative; z-index:1 }
.start-panel h2 { font-size:clamp(54px,5.6vw,76px); margin:0 0 20px }
.start-panel>div>p:not(.kicker) { max-width:510px }
.start-panel ol { list-style:none; padding:0; margin:0 }
.start-panel li { display:grid; grid-template-columns:50px 1fr; gap:17px; align-items:center; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.35); font-size:12px }
.start-panel li b { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.7); clip-path:polygon(50% 0,100% 25%,92% 84%,45% 100%,0 70%,5% 16%) }
.start-panel li strong { display:block; font-family:var(--display); font-size:27px; line-height:1.1 }

.service-section { padding-top:20px }
.service-section h2 { font-size:clamp(45px,5vw,64px); margin:0 0 40px }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line) }
.service-grid a { padding:27px 22px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; border-right:1px solid var(--line) }
.service-grid a:last-child { border:0 }
.service-grid span { color:var(--primary); font-size:11px; font-weight:700 }
.service-grid strong { font-size:13px }

.bb-footer { margin-top:105px; padding-top:78px; background:var(--deep); color:#fff }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.35fr; gap:70px; padding-bottom:60px }
.footer-mark img { width:190px }
.footer-mark p { font-family:var(--display); color:var(--secondary); font-size:28px }
.footer-grid>div:not(.footer-mark)>a { display:block; color:rgba(255,255,255,.76); font-size:13px; margin:7px 0 }
.footer-grid>div>p:not(.kicker) { color:rgba(255,255,255,.76); font-size:13px }
.footer-bottom { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgba(255,255,255,.18); font-size:11px }
.footer-bottom a { color:var(--secondary); font-weight:600 }

.concept-controls { position:fixed; z-index:80; right:18px; top:110px; width:250px; background:color-mix(in srgb,var(--paper) 94%,transparent); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(16px); padding:14px }
.control-group { display:grid; grid-template-columns:75px 1fr; gap:10px; align-items:center; margin-bottom:9px }
.control-group>span { font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase }
.segmented { display:flex; border:1px solid var(--line); padding:2px }
.segmented button { flex:1; min-width:0; border:0; background:transparent; color:var(--ink); cursor:pointer; font-size:10px; font-weight:700; padding:5px }
.segmented button.is-active { background:var(--deep); color:#fff }
.palette-segments button { display:flex; align-items:center; justify-content:center; gap:3px }
.palette-segments i { width:8px; height:8px; border-radius:50%; background:#d08828 }
.palette-segments button:nth-child(2) i { background:#078da0 }.palette-segments button:nth-child(3) i { background:#e0523f }.palette-segments button:nth-child(4) i { background:#8c3f78 }
.guide-link { border-top:1px solid var(--line); padding-top:9px; display:flex; justify-content:space-between; font-size:10px; font-weight:700 }
button:focus-visible,a:focus-visible { outline:3px solid var(--secondary); outline-offset:3px }

/* Style guide */
.style-guide-body { background:var(--paper) }
.guide-hero { background:var(--deep); color:#fff; padding:155px 0 95px; position:relative; overflow:hidden }
.guide-hero:after { content:""; position:absolute; width:540px; height:540px; right:-100px; top:-180px; background:color-mix(in srgb,var(--primary) 38%,transparent); clip-path:polygon(48% 0,85% 13%,100% 51%,80% 88%,41% 100%,8% 75%,0 30%); transform:rotate(13deg) }
.guide-hero .bb-wrap { position:relative; z-index:1 }
.guide-hero h1 { font-size:clamp(58px,7vw,98px); max-width:900px }
.guide-hero p:last-child { max-width:650px; font-size:17px }
.guide-main { padding:90px 0 }
.guide-section { padding:65px 0; border-bottom:1px solid var(--line) }
.guide-heading { display:grid; grid-template-columns:240px 1fr; gap:60px; margin-bottom:38px }
.guide-number { color:var(--primary); font-weight:700; font-size:12px }
.guide-heading h2 { margin:0; font-size:50px }
.guide-heading p { max-width:700px; margin:10px 0 0 }
.official-swatches { display:grid; grid-template-columns:repeat(6,1fr); gap:10px }
.swatch { min-height:150px; padding:15px; display:flex; flex-direction:column; justify-content:flex-end; font-size:11px; font-weight:600; border:1px solid var(--line) }
.swatch span { font-weight:400 }
.palette-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px }
.palette-card { border:1px solid var(--line); background:var(--paper); padding:22px; cursor:pointer; color:var(--ink); text-align:left }
.palette-card.is-active { outline:3px solid var(--primary); outline-offset:3px }
.palette-card>span { height:80px; display:grid; grid-template-columns:repeat(5,1fr); margin-bottom:17px }
.palette-card i { display:block }
.palette-card strong,.palette-card small { display:block }
.palette-card small { font-weight:400; margin-top:4px }
.palette-card em { font-style:normal; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:15px; font-size:9px }
.palette-card em b { font-weight:500 }
.palette-card em b span { display:block; color:var(--muted); font-weight:400 }
.type-demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px }
.type-demo { padding:30px; border:1px solid var(--line); background:var(--paper); color:var(--ink); text-align:left; cursor:pointer }
.type-demo.is-active { outline:3px solid var(--primary); outline-offset:3px }
.type-demo.hand h3 { font-family:"Caveat",cursive; font-size:62px; margin:12px 0 }
.type-demo.poppins h3 { font-family:"Poppins",sans-serif; font-weight:700; font-size:42px; line-height:1.08; margin:20px 0 }
.type-demo p { font-size:13px }
.hierarchy { margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:end }
.hierarchy article { border-top:2px solid var(--primary); padding-top:17px }
.hierarchy h1,.hierarchy h2,.hierarchy h3,.hierarchy p { margin:5px 0 }
.hierarchy h1 { font-size:52px }.hierarchy h2 { font-size:38px }.hierarchy h3 { font-size:27px }.hierarchy p { font-family:var(--body); font-size:15px; line-height:1.6 }
.shape-demo { min-height:360px; background:var(--soft); position:relative; overflow:hidden; display:grid; place-items:center }
.shape-demo .watercolor { position:absolute; inset:0; background:radial-gradient(ellipse at 10% 20%,color-mix(in srgb,var(--primary) 40%,transparent),transparent 31%),radial-gradient(ellipse at 88% 80%,color-mix(in srgb,var(--secondary) 55%,transparent),transparent 35%),radial-gradient(ellipse at 70% 15%,color-mix(in srgb,var(--accent) 50%,transparent),transparent 28%); filter:blur(10px) }
.shape-demo .shape-one,.shape-demo .shape-two { position:absolute; width:280px; height:280px; border:1px solid var(--ink); opacity:.5; clip-path:polygon(48% 0,85% 13%,100% 51%,80% 88%,41% 100%,8% 75%,0 30%) }
.shape-demo .shape-two { transform:rotate(25deg); width:235px; height:235px }
.shape-note { position:relative; z-index:1; max-width:430px; text-align:center; padding:30px; background:color-mix(in srgb,var(--paper) 86%,transparent) }
.component-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.component-board { padding:35px; background:var(--soft) }
.component-board.dark { background:var(--deep); color:#fff }
.component-board h3 { font-size:31px; margin:0 0 25px }
.demo-buttons { display:flex; gap:10px; flex-wrap:wrap }
.demo-card { margin-top:30px; padding:25px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow) }
.demo-card h4 { font-family:var(--display); font-size:29px; margin:4px 0 10px }
.demo-nav { display:flex; justify-content:space-between; gap:18px; font-size:12px; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:14px }
.tokens { display:grid; grid-template-columns:1fr 1fr; gap:40px }
.spacing-scale { display:flex; align-items:flex-end; gap:12px; min-height:140px }
.spacing-scale i { width:50px; display:grid; place-items:end center; background:var(--primary); color:#fff; font-style:normal; font-size:10px; padding-bottom:5px }
.spacing-scale i:nth-child(1){height:8px}.spacing-scale i:nth-child(2){height:16px}.spacing-scale i:nth-child(3){height:24px}.spacing-scale i:nth-child(4){height:40px}.spacing-scale i:nth-child(5){height:64px}.spacing-scale i:nth-child(6){height:96px}
.radius-demo { display:flex; gap:18px; align-items:center; min-height:140px }
.radius-demo i { width:90px; height:90px; border:2px solid var(--primary); display:grid; place-items:center; font-style:normal; font-size:10px }
.radius-demo i:nth-child(2) { clip-path:polygon(7% 0,95% 4%,100% 89%,50% 100%,0 89%,3% 12%) }
.usage-grid { display:grid; grid-template-columns:1fr 1fr; gap:25px }
.usage-grid article { border-top:4px solid var(--primary); background:var(--soft); padding:25px }
.usage-grid h3 { font-size:30px; margin:0 0 13px }
.usage-grid ul { margin:0; padding-left:20px }
.usage-grid li { margin:8px 0 }

@media (max-width:1000px) {
  .desktop-navigation,.header-action { display:none }
  .menu-button { display:grid; gap:7px; border:0; background:transparent; padding:10px }
  .menu-button>span:not(.sr-only) { display:block; width:28px; height:2px; background:#fff }
  .mobile-navigation { position:fixed; inset:92px 0 0; background:var(--deep); padding:35px 32px; font-family:var(--display); font-size:34px; overflow:auto }
  .mobile-navigation.is-open { display:block }
  .mobile-navigation a { display:block; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.2) }
  .title-grid,.campus-layout { grid-template-columns:1fr; gap:32px }
  .education-grid { grid-template-columns:1fr 1fr }
  .education-card,.card-one,.card-two,.card-three { grid-column:auto; margin-top:0 }
  .card-three { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr }
  .values-list { grid-template-columns:1fr 1fr }
  .values-list article:nth-child(2) { border-right:0 }
  .values-list article:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.17) }
  .campus-layout { gap:65px }
  .campus-image,.campus-image img { min-height:520px; height:520px }
  .news-layout { grid-template-columns:1fr 1fr }
  .news-feature { grid-column:1/-1 }
  .start-panel { grid-template-columns:1fr; gap:35px }
  .service-grid { grid-template-columns:1fr 1fr }
  .service-grid a:nth-child(2) { border-right:0 }
  .service-grid a:nth-child(-n+2) { border-bottom:1px solid var(--line) }
  .guide-heading { grid-template-columns:140px 1fr }
  .official-swatches { grid-template-columns:repeat(3,1fr) }
  .hierarchy { grid-template-columns:1fr 1fr }
}

@media (max-width:680px) {
  :root { --wrap:calc(100% - 32px) }
  .bb-section { padding-block:72px }
  .header-row { min-height:78px }
  .bb-brand { width:126px }
  .mobile-navigation { inset:78px 0 0 }
  .bb-hero { min-height:780px }
  .hero-photo { inset:0; background-position:58% center }
  .hero-photo:after { background:linear-gradient(90deg,color-mix(in srgb,var(--deep) 91%,transparent),color-mix(in srgb,var(--deep) 56%,transparent)),linear-gradient(0deg,var(--deep),transparent 68%) }
  .hero-layout { padding-bottom:145px }
  h1 { font-size:65px }
  .hero-intro { font-size:15px; margin:19px 0 26px }
  .button-row { display:grid }
  .hero-ticket { width:245px }
  .title-grid { margin-bottom:40px }
  .title-grid h2,.section-topline h2,.service-section h2 { font-size:48px }
  .education-grid { grid-template-columns:1fr; gap:45px }
  .card-three { grid-column:auto; display:block }
  .image-frame { height:340px }
  .info-band { grid-template-columns:1fr; gap:8px; padding:22px 20px; margin-top:45px }
  .values-section { padding:75px 0 }
  .values-list { grid-template-columns:1fr }
  .values-list article { border-right:0; border-bottom:1px solid rgba(255,255,255,.17) }
  .campus-image,.campus-image img { min-height:410px; height:410px }
  .campus-copy h2 { font-size:51px }
  .campus-copy dl { grid-template-columns:1fr; gap:0 }
  .campus-copy dl div { display:grid; grid-template-columns:100px 1fr; align-items:end; border-bottom:1px solid var(--line); padding:15px 0 }
  .section-topline { display:block }
  .section-topline .inline-link { display:inline-block; margin-top:20px }
  .news-layout { grid-template-columns:1fr }
  .news-feature { display:block; min-height:0 }
  .news-feature>img { height:270px }
  .mini-news { grid-template-rows:250px 1fr }
  .quote-section { padding:75px 0 }
  .quote-section blockquote { font-size:44px }
  .start-panel { padding:52px 25px; clip-path:polygon(0 0,94% 0,100% 7%,98% 100%,3% 98%) }
  .service-grid { grid-template-columns:1fr }
  .service-grid a { border-right:0; border-bottom:1px solid var(--line) }
  .footer-grid { grid-template-columns:1fr; gap:35px }
  .footer-bottom { padding:20px 0; flex-direction:column; align-items:flex-start; justify-content:center }
  .concept-controls { left:8px; right:8px; top:auto; bottom:8px; width:auto; display:grid; grid-template-columns:1fr 1.2fr auto; align-items:center; gap:8px; padding:8px }
  .control-group { display:block; margin:0 }
  .control-group>span { display:none }
  .guide-link { border:0; padding:8px; font-size:0 }
  .guide-link span { font-size:16px }
  .type-segments button { font-size:9px }
  .guide-hero { padding:125px 0 72px }
  .guide-main { padding:45px 0 }
  .guide-section { padding:45px 0 }
  .guide-heading { grid-template-columns:1fr; gap:7px }
  .guide-heading h2 { font-size:44px }
  .official-swatches { grid-template-columns:1fr 1fr }
  .swatch { min-height:120px }
  .palette-cards,.type-demo-grid,.component-grid,.tokens,.usage-grid { grid-template-columns:1fr }
  .palette-card em { grid-template-columns:1fr 1fr }
  .hierarchy { grid-template-columns:1fr }
  .shape-demo { min-height:420px }
  .demo-nav { flex-wrap:wrap }
}

/* Small facets echo the hero geometry without competing with the content. */
:root { --hexagon: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.hex-marker { display: inline-block; width: 12px; height: 11px; background: var(--secondary); clip-path: var(--hexagon); }
.hex-list { list-style: none; padding: 0; margin: 18px 0; }
.hex-list > li { position: relative; padding-inline-start: 24px; margin: 10px 0; }
.hex-list > li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 8px; background: currentColor; clip-path: var(--hexagon); }
section[id] { scroll-margin-top: 120px; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px #191614; }
.usage-grid ul.hex-list { padding-left: 0; }
.info-band > strong { color: var(--deep); }
.start-panel { background: var(--deep); }

/* Decorative facets must not widen the mobile viewport. */
html { overflow-x: clip; }