/* Creative Dad Company: home page styles (ported from the ChatGPT Sites build) */
:root { --ink: #1e1e1e; --navy: #08172d; --teal: #189ab4; --orange: #f28c28; --green: #6ba53a; --white: #fff; --cream: #fffaf2; --muted: #5d6878; --line: #dce4e8; --shadow: 0 18px 50px rgba(8,23,45,.12); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; color: var(--ink); font-family: "Proxima Nova", Avenir, Arial, sans-serif; background: rgb(255, 255, 255); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: rgb(255, 208, 138) solid 4px; outline-offset: 4px; }
.wrap { width: min(1160px, 100% - 40px); margin: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: rgb(255, 255, 255); padding: 10px; z-index: 99; }
.nav { position: sticky; top: 0px; z-index: 20; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 900; color: var(--navy); }
.brand img { width: 62px; height: 50px; object-fit: contain; }
.brand span { font-size: 1.08rem; }
.links { display: flex; gap: 24px; align-items: center; }
.links a { text-decoration: none; font-weight: 700; color: rgb(51, 65, 88); }
.links a.button { color: rgb(8, 24, 47); }
.links a.button:hover { color: rgb(8, 24, 47); }
.links a.button.alt, .links a.button.alt:hover { color: rgb(255, 255, 255); }
.links a.button.ghost, .links a.button.ghost:hover { color: var(--navy); }
.links a:hover { color: var(--teal); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 999px; background: var(--orange); color: rgb(8, 24, 47); text-decoration: none; font-weight: 900; border: 2px solid var(--orange); transition: transform 0.2s, box-shadow 0.2s; }
.button:hover { transform: translateY(-2px); box-shadow: rgba(242, 140, 40, 0.28) 0px 10px 24px; }
.button.alt { background: var(--teal); border-color: var(--teal); color: rgb(255, 255, 255); }
.button.ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.hero { position: relative; overflow: hidden; background: linear-gradient(135deg,var(--navy) 0%,#0d3150 62%,#126e82 100%); color: rgb(255, 255, 255); padding: 92px 0px 84px; }
.hero::after { content: ""; position: absolute; right: -80px; top: -120px; width: 520px; height: 520px; border-radius: 50%; border: 80px solid rgba(24, 154, 180, 0.17); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 70px; align-items: center; }
.eyebrow { display: inline-block; color: var(--orange); font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.82rem; }
.hero h1, h2, h3 { font-family: "Oaks Bold Semicondensed", "Arial Narrow", Impact, sans-serif; line-height: 1.02; margin: 0px; color: var(--navy); }
.hero h1 { color: rgb(255, 255, 255); font-size: clamp(3.2rem, 7vw, 6rem); max-width: 850px; }
.hero p { font-size: 1.2rem; color: rgb(219, 234, 240); max-width: 720px; margin: 26px 0px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-card { background: rgb(255, 255, 255); padding: 26px; border-radius: 30px; box-shadow: var(--shadow); transform: rotate(2deg); }
.hero-card picture, .offer picture { display: block; }
.hero-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.hero-card strong { display: block; color: var(--navy); font-size: 1.2rem; margin-top: 16px; }
.hero-card span { color: var(--muted); }
section { padding: 88px 0px; scroll-margin-top: 76px; }
.section-head { max-width: 780px; margin-bottom: 38px; }
.section-head h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.section-head p { font-size: 1.1rem; color: var(--muted); }
.offerings { background: var(--cream); }
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.offer { background: rgb(255, 255, 255); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; }
.offer-image { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.offer-body { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 0%; }
.offer h3 { font-size: 2rem; margin-top: 12px; }
.offer p { color: var(--muted); flex: 1 1 0%; }
.tag { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: rgb(233, 247, 250); color: rgb(11, 112, 135); font-weight: 900; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.proof-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0px 22px; }
.proof { padding: 7px 11px; border-radius: 999px; background: rgb(242, 245, 247); color: rgb(52, 66, 86); font-weight: 800; font-size: 0.84rem; }
.services { background: var(--navy); color: rgb(255, 255, 255); }
.services h2, .services h3 { color: rgb(255, 255, 255); }
.services .section-head p { color: rgb(201, 214, 226); }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.service { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); padding: 22px; border-radius: 18px; min-height: 120px; }
.service b { color: rgb(255, 255, 255); }
.professor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.professor-art { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; }
.professor-art img { height: 100%; object-fit: cover; border-radius: 24px; }
.professor-art .stack { display: grid; gap: 14px; }
.about { background: var(--cream); }
.about-grid { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 60px; align-items: center; }
.portrait-wrap { position: relative; max-width: 460px; }
.headshot { border-radius: 28px; box-shadow: var(--shadow); border: 10px solid white; width: 100%; height: auto; }
.about-copy h2 { font-size: clamp(2.7rem, 5vw, 4.6rem); }
.about-copy p { color: rgb(72, 84, 101); }
.family-note { display: flex; gap: 16px; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.family-note picture { flex: 0 0 auto; width: 120px; height: 86px; }
.family-note img { width: 120px; height: 86px; max-width: none; object-fit: cover; border-radius: 16px; }
.contact { background: linear-gradient(120deg,var(--teal),#0e7188); color: rgb(255, 255, 255); }
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; }
.contact h2 { color: rgb(255, 255, 255); font-size: clamp(2.8rem, 5vw, 4.8rem); }
.contact-card { background: rgb(255, 255, 255); color: var(--navy); padding: 30px; border-radius: 24px; }
.contact-card a { display: block; margin: 10px 0px; color: var(--navy); font-weight: 800; }
.footer { background: rgb(5, 15, 32); color: rgb(190, 205, 221); padding: 30px 0px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.footer strong { color: rgb(255, 255, 255); }
.menu { display: none; background: none; border: 0px; font-size: 1.7rem; color: var(--navy); padding: 8px; cursor: pointer; }
@media (max-width: 900px) {
  .nav-inner { position: relative; }
  .links { display: none; position: absolute; top: 77px; left: -20px; right: -20px; background: rgb(255, 255, 255); padding: 22px; box-shadow: rgba(8, 23, 45, 0.18) 0px 18px 30px; border-top: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 8px; }
  .links.open { display: flex; }
  .links a { padding: 10px 6px; }
  .links .button { text-align: center; }
  .menu { display: block; }
  .hero-grid, .professor-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 64px; }
  .hero-card { max-width: 560px; transform: none; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { gap: 34px; }
  .headshot { max-width: 460px; }
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 28px, 1160px); }
  section { padding: 64px 0px; }
  .brand span { font-size: 0.96rem; }
  .hero h1 { font-size: 3.2rem; }
  .service-grid { grid-template-columns: 1fr; }
  .professor-art { grid-template-columns: 1fr; }
  .professor-art .stack { grid-template-columns: 1fr 1fr; }
  .family-note { align-items: flex-start; }
  .footer-inner { display: block; }
  .footer-inner span { display: block; margin-top: 8px; }
}
.nav { position: relative; }
.nav-inner { width: 100%; max-width: none; display: block; min-height: 0px; }
.brand-banner { display: block; height: clamp(170px, 22vw, 260px); overflow: hidden; background: rgb(255, 255, 255); }
.brand-banner picture { display: block; width: 100%; height: 100%; }
.brand-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.links { min-height: 64px; justify-content: center; padding: 8px 20px; }
.blog-section { background: rgb(245, 251, 252); }
.blog-grid { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(260px, 0.72fr); gap: 26px; align-items: center; }
.blog-preview { display: block; color: inherit; text-decoration: none; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.blog-preview img { width: 100%; height: 240px; object-fit: cover; object-position: center 38%; }
.blog-preview div { padding: 24px; }
.blog-preview h3 { font-size: 2rem; margin: 10px 0px; }
.blog-preview p { color: var(--muted); }
@media (max-width: 900px) {
  .brand-banner { height: 170px; background-size: cover; }
  .menu { position: absolute; right: 20px; top: 180px; }
  .links { top: 222px; left: 0px; right: 0px; justify-content: flex-start; }
  .blog-grid { grid-template-columns: 1fr; }
}
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: rgb(190, 205, 221); text-decoration: none; font-weight: 700; }
.footer-links a:hover { color: rgb(255, 255, 255); text-decoration: underline; }
@media (max-width: 560px) {
  .footer-links { margin-top: 10px; }
}
.cdc-choice { background: rgb(255, 250, 242); color: rgb(8, 24, 47); font-family: Avenir, Arial, sans-serif; padding: 64px 0px; }
.cdc-choice-wrap { width: min(1160px, 100% - 40px); margin: 0px auto; }
.cdc-choice-kicker { margin: 0px 0px 8px; color: rgb(14, 113, 136); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }
.cdc-choice h2 { margin: 0px 0px 22px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; color: rgb(8, 24, 47); }
.cdc-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cdc-choice article { background: rgb(255, 255, 255); border: 1px solid rgb(220, 228, 232); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.cdc-choice h3 { margin: 0px; font-size: 1.45rem; color: rgb(8, 24, 47); }
.cdc-choice p { margin: 0px; color: rgb(36, 52, 74); line-height: 1.45; flex: 1 1 0%; }
.cdc-choice-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 16px; border-radius: 999px; background: rgb(242, 140, 40); border: 2px solid rgb(242, 140, 40); color: rgb(8, 24, 47); font-weight: 800; text-decoration: none; text-align: center; }
.cdc-choice-button:hover { background: rgb(224, 125, 24); border-color: rgb(224, 125, 24); color: rgb(8, 24, 47); }
@media (max-width: 800px) {
  .cdc-choice-grid { grid-template-columns: 1fr; }
}
.cdc-contact { display: grid; gap: 12px; margin-top: 18px; }
.cdc-contact-lead { margin: 0px; font-size: 0.95rem; line-height: 1.4; color: rgb(36, 52, 74); font-weight: 700; }
.cdc-contact label { display: grid; gap: 6px; font-weight: 800; font-size: 0.95rem; color: rgb(8, 24, 47); }
.cdc-contact label span { font-weight: 700; color: rgb(82, 101, 120); }
.cdc-contact input, .cdc-contact select, .cdc-contact textarea { width: 100%; box-sizing: border-box; border: 2px solid rgb(213, 226, 234); border-radius: 12px; padding: 10px 12px; font: 700 16px / 1.3 Avenir, Arial, sans-serif; color: rgb(8, 24, 47); background: rgb(255, 255, 255); }
.cdc-contact button { min-height: 48px; border: 2px solid rgb(242, 140, 40); border-radius: 999px; background: rgb(242, 140, 40); color: rgb(8, 24, 47); font: 800 1.05rem / 1.2 Avenir, Arial, sans-serif; cursor: pointer; }
.cdc-contact button:hover { background: rgb(224, 125, 24); border-color: rgb(224, 125, 24); color: rgb(8, 24, 47); }
.cdc-contact-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); }