/* Agency layouts on the actual CTO Teachings stylesheet, generated as brand.css. */
:root { color-scheme:dark; --line:rgba(255,255,255,.12); }
html { scroll-padding-top:170px; }
body { overflow-x:clip; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { text-transform:uppercase; letter-spacing:.005em; text-wrap:balance; }
h1 { font-size:clamp(2.3rem,5.2vw,5rem); margin-bottom:32px; }
h2 { font-size:clamp(2.1rem,4.5vw,4rem); margin-bottom:28px; }
h3 { font-size:1.55rem; line-height:1.2; margin-bottom:16px; }
p { margin-bottom:24px; }
em { font-style:normal; color:var(--purple-light); }
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:40px; }
.section { padding:110px 0; }
.eyebrow { font-size:1rem; margin-bottom:24px; }
.number { color:var(--purple-light); font-size:2rem; font-family:var(--font-display); font-weight:700; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; }
.button:not(.btn) { background:var(--white); color:#0a0a0a; border-radius:var(--radius-pill); padding:18px 30px; font-weight:600; }
.button:not(.btn):hover { background:var(--btn-grad); }
.text-link { display:inline-flex; align-items:center; gap:12px; color:var(--purple-light); font-weight:600; padding-block:12px; }
.text-link:hover { color:var(--white); }
a:focus-visible,summary:focus-visible { outline:3px solid var(--purple-light); outline-offset:5px; }
.small { font-size:.95rem; color:var(--muted); }
.skip { position:fixed; top:-100px; left:16px; z-index:200; padding:12px 20px; background:var(--white); color:var(--black); border-radius:var(--radius-pill); }
.skip:focus { top:16px; }
.header { position:sticky; top:0; z-index:100; background:rgba(0,0,0,.9); backdrop-filter:blur(10px); }
.contact-bar { display:flex; justify-content:center; align-items:center; gap:40px; padding:8px 24px; background:#190d2a; border-bottom:1px solid rgba(147,51,234,.4); font-size:.9rem; color:var(--white); }
.contact-bar a { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:32px; font-weight:600; }
.contact-bar a:last-child { color:#d8b4fe; }
.contact-bar a:hover { text-decoration:underline; text-underline-offset:4px; }
.header-inner { justify-content:space-between; }
.brand { align-items:center; white-space:nowrap; }
.brand img { flex:none; }
.desktop-nav { display:flex; align-items:center; }
.desktop-nav .nav-link { font-size:.95rem; padding:12px 17px; }
.nav-link[aria-current] { color:var(--purple-light); }
.nav-call { white-space:nowrap; font-size:.85rem; padding:18px 25px; }
.mobile-menu { display:none; }
.home-hero { position:relative; isolation:isolate; padding:65px 0 95px; background:var(--black) url('/assets/hero-poster.jpg') center/cover no-repeat; }
.home-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.25) 65%,#000); z-index:-1; }
.home-hero .wrap { max-width:1440px; }
.home-hero .hero-content { padding:45px 0 25px; }
.home-hero h1 { margin-inline:auto; max-width:1180px; font-size:clamp(2.5rem,5.5vw,5rem); }
.hero-lead { font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:760px; color:var(--text); line-height:1.6; }
.home-hero .hero-lead { margin-inline:auto; }
.actions { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:20px; margin-top:36px; }
.hero-foot { color:var(--text); margin:42px 0 0; font-size:.95rem; }
.paper { background:#0b0912; }
.intro-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:0 75px; align-items:center; }
.intro-grid .eyebrow { grid-column:1/-1; }
.outcomes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:45px; }
.outcomes article,.steps article,.deliverables article { background:linear-gradient(180deg,rgba(28,24,48,.7),rgba(12,10,22,.7)); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:34px 28px; }
.growth-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.growth-card { display:flex; flex-direction:column; min-width:0; border:1px solid rgba(147,51,234,.25); border-radius:var(--radius); padding:34px 28px; background:linear-gradient(180deg,#1c142c,#0c0a16); }
.growth-card .number { color:#b780ff; margin-bottom:28px; }
.growth-card h3 { font-size:1.6rem; }
.growth-card>p { font-size:1.02rem; }
.growth-tags { color:#c4b5fd; font-size:.8rem!important; padding-top:16px; border-top:1px solid var(--line); }
.growth-card .text-link { margin-top:auto; align-self:flex-start; }
.channel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.channel-fit { margin-top:auto; padding-top:20px; border-top:1px solid var(--line); color:#c4b5fd; }
.shop-checklist { border:1px solid var(--line); border-radius:var(--radius); padding:36px; background:#160f24; }
.shop-checklist ul { margin:24px 0 0; padding-left:22px; }
.shop-checklist li { padding-block:9px; }
.shop-checklist li::marker { color:var(--purple-light); }
.shop-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
.quote-contact { justify-content:flex-start; }
.quote-note { margin:28px 0 0; font-size:1rem; color:var(--muted); }
.message-example { padding:24px; background:#170f25; border-left:3px solid #9333ea; border-radius:0 14px 14px 0; overflow-wrap:anywhere; }
.outcomes article>span { display:block; color:var(--purple-light); font-size:2.4rem; margin-bottom:24px; }
.outcomes p,.steps p,.deliverables p { font-size:1rem; margin-bottom:0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:44px; }
.section-heading h2 { margin:0; }
.section-heading>p { max-width:330px; }
.service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.service-row { display:grid; grid-template-columns:38px minmax(0,1fr) 20px; align-items:start; gap:16px; padding:34px 26px; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); background:linear-gradient(180deg,rgba(28,24,48,.7),rgba(12,10,22,.7)); transition:transform .25s var(--ease),border-color .25s var(--ease); }
.service-row:hover { transform:translateY(-4px); border-color:rgba(122,100,255,.5); }
.service-row .number { font-size:1.2rem; }
.service-row h3 { font-size:1.45rem; }
.service-row p { font-size:1rem; margin:0; }
.service-row>span:last-child { color:var(--purple-light); font-size:1.5rem; }
.industry-section { background:#0b0912; }
.industry-grid,.principles,.closing,.about-grid,.contact-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; }
.industry-grid>*,.principles>*,.closing>*,.about-grid>*,.contact-grid>* { min-width:0; }
.industry-grid h2 { font-size:clamp(2.1rem,4vw,3.5rem); }
.industry-grid .small { margin-top:24px; }
.bay-art { position:relative; aspect-ratio:1; padding:30px; overflow:hidden; background:#141020 url('/assets/wave-bg.jpg') center/cover; border:1px solid var(--line); border-radius:var(--radius); }
.bay-label { font-size:.75rem; letter-spacing:.08em; color:var(--white); }
.bay-art strong { position:absolute; left:30px; bottom:30px; font-family:var(--font-display); font-size:clamp(1.8rem,3.3vw,3rem); line-height:1.05; color:var(--white); }
.car-outline { position:absolute; left:12%; right:12%; top:38%; height:22%; border:3px solid #c7bcff; border-radius:40% 40% 15% 15%; background:#201840; box-shadow:0 15px 50px #0008; }
.car-outline div { position:absolute; left:18%; right:18%; top:-45%; height:58%; border:3px solid #c7bcff; border-bottom:0; border-radius:50% 50% 0 0; background:#201840; }
.car-outline span { position:absolute; width:17%; height:45%; border:3px solid #c7bcff; border-radius:12px; bottom:-25%; left:8%; background:#120e20; }
.car-outline span:last-child { left:auto; right:8%; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:40px; }
.steps h3,.deliverables h3 { margin-top:26px; }
.principles h2,.closing h2 { margin-bottom:0; }
.closing-section { background:#0c0818 url('/assets/wave-bg.jpg') center/cover; border-block:1px solid var(--line); }
.closing-section .text-link { display:flex; margin-top:18px; }
.page-hero { padding-top:80px; padding-bottom:90px; text-align:center; background:radial-gradient(ellipse at 80% 0,rgba(122,100,255,.22),transparent 65%); }
.page-hero h1 { max-width:1050px; margin-inline:auto; }
.page-hero .hero-lead { margin:0 auto 32px; }
.reading { max-width:850px; margin-inline:auto; }
.reading>h2:not(:first-child) { margin-top:48px; font-size:clamp(1.8rem,3vw,2.6rem); }
.page-hero .reading { text-align:left; }
.large-copy { font-size:1.2rem; line-height:1.8; }
.reading a:not(.button) { text-decoration:underline; text-underline-offset:5px; }
.deliverables { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:44px 0; }
.faq { border-block:1px solid var(--line); padding:26px 0; margin-top:40px; }
.faq summary { cursor:pointer; font-size:1.1rem; font-weight:600; color:var(--white); }
.faq p { margin:24px 0 0; }
.related { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }
.founder-mark { display:flex; flex-direction:column; align-items:center; justify-content:center; aspect-ratio:1; background:radial-gradient(circle at 60% 30%,#39256c,#100b20); border:1px solid var(--line); border-radius:var(--radius); color:var(--white); font-family:var(--font-display); font-size:7rem; }
.founder-mark span { font-size:.85rem; letter-spacing:.15em; color:var(--purple-light); }
.contact-grid { align-items:start; }
.call-list { padding-left:26px; margin:0; }
.call-list li { padding:0 0 24px 12px; }
.call-list li::marker { color:var(--purple-light); }
.call-list h3 { font-size:1.4rem; margin-bottom:12px; }
.call-list p { font-size:1rem; }
.contact-number { display:inline-block; font-size:clamp(1.4rem,3.5vw,2.8rem); margin-bottom:24px; color:var(--purple-light); }
.footer { border-top:1px solid var(--line); padding:70px 0 20px; background:var(--black); }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr .8fr; gap:36px; padding:0; }
.footer-top h2 { font-size:1.05rem; text-transform:none; margin:0 0 24px; }
.footer-top a:not(.brand) { display:block; margin-bottom:12px; font-size:.95rem; color:var(--muted); }
.footer-top a:hover { color:var(--purple-light); }
.footer-top p { margin-top:24px; font-size:1rem; }
.footer .brand { color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1.5rem; gap:0; }
.footer-bottom { display:flex; justify-content:space-between; gap:24px; padding:24px 0 0; margin-top:50px; font-size:.8rem; }
@media(max-width:1200px) { .header-inner { padding-inline:24px; gap:16px; }.desktop-nav .nav-link { padding:10px 12px; font-size:.85rem; }.brand-name { font-size:1.3rem; }.nav-call { padding:16px 20px; }.steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1000px) {
 .growth-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .desktop-nav,.header-inner>.nav-call { display:none; }.mobile-menu { display:block; }.mobile-menu summary { cursor:pointer; padding:12px 18px; border:1px solid rgba(255,255,255,.45); border-radius:var(--radius-pill); color:var(--white); list-style:none; }.mobile-menu summary::-webkit-details-marker { display:none; }.mobile-menu summary span { margin-left:10px; }
 .mobile-menu nav { position:absolute; top:100%; left:0; right:0; background:rgba(10,10,12,.98); border-bottom:1px solid var(--line); padding:18px 24px; box-shadow:0 20px 30px #0006; }.mobile-menu nav a { display:flex; padding:14px; }
 .industry-grid,.principles,.closing,.about-grid,.contact-grid { gap:36px; }.service-row { grid-template-columns:26px minmax(0,1fr) 16px; gap:12px; padding:26px 20px; }
}
@media(max-width:760px) {
 .contact-bar { display:grid; grid-template-columns:1.35fr .65fr 1fr; gap:8px; padding:4px 12px; font-size:.75rem; }
 .contact-bar a { min-height:44px; gap:4px; text-align:center; }
 .contact-bar a:first-child { flex-direction:column; gap:0; line-height:1.35; }
 .contact-bar a:first-child span { white-space:nowrap; }
 .contact-bar a:last-child { flex-wrap:wrap; align-content:center; line-height:1.3; }
 .growth-grid,.channel-grid,.shop-steps { grid-template-columns:1fr; }
 .growth-card { padding:28px 24px; }.growth-card .number { margin-bottom:20px; }
 .shop-checklist { padding:28px 24px; }
 .contact-actions .btn { max-width:100%; }
 .wrap { padding-inline:24px; }.header-inner { padding:18px 24px; }.brand-name { font-size:1.35rem; }.brand img { width:30px; height:30px; }.section { padding:70px 0; }
 .home-hero { padding:36px 0 55px; }.home-hero .hero-content { padding:22px 0; }.home-hero h1 { font-size:clamp(2.2rem,8.8vw,3.8rem); }.hero-lead { font-size:1.1rem; }.actions { flex-direction:column; gap:16px; }.actions .btn { justify-content:center; width:100%; max-width:380px; padding:17px 22px; font-size:.85rem; }.hero-foot { margin-top:28px; font-size:.85rem; }
 .intro-grid,.outcomes,.industry-grid,.principles,.closing,.about-grid,.contact-grid,.deliverables,.service-list { grid-template-columns:1fr; gap:28px; }.intro-grid .eyebrow { grid-column:auto; }.intro-grid h2 { margin:0; }.outcomes { margin-top:30px; }.section-heading { display:block; }.section-heading>p,.section-heading>.text-link { margin-top:24px; }.service-row { padding:28px 22px; }.service-row h3 { font-size:1.4rem; }
 .steps { gap:18px; }.steps article { padding:24px 20px; }.steps h3 { font-size:1.3rem; }.steps p { font-size:.95rem; }.bay-art { width:100%; max-width:500px; margin-inline:auto; }.bay-art strong { font-size:2rem; }.industry-grid .button { font-size:.9rem; }.closing-section .button { padding:18px 22px; font-size:.85rem; }
 .page-hero { padding-top:55px; }.deliverables { margin:32px 0; }.founder-mark { max-width:320px; width:100%; margin:auto; }.large-copy { font-size:1.1rem; }.footer-top { grid-template-columns:1fr 1fr; gap:36px 24px; }.footer-top>div:first-child { grid-column:1/-1; }.footer-bottom { display:block; }.related { display:grid; gap:8px; }
}
@media(max-width:420px) { h2 { font-size:1.8rem; overflow-wrap:break-word; }.steps { grid-template-columns:1fr; }.wrap { padding-inline:20px; }.header-inner { padding-inline:20px; }.mobile-menu summary { padding:10px 14px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }* { transition:none!important; } }
