:root { --cream:#f7f4ee; --forest:#1f3d34; --muted:#4f5b55; --sage:#e8ede2; --coral:#ff6e57; --border:#e2ded6; --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Instrument Sans',system-ui,sans-serif; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; scroll-padding-top:24px; }
    body { margin:0; background:var(--cream); color:var(--forest); font-family:var(--sans); font-size:16px; line-height:1.65; }
    img { display:block; max-width:100%; }
    a { color:inherit; text-underline-offset:4px; }
    a:focus-visible,summary:focus-visible { outline:3px solid var(--forest); outline-offset:5px; }
    h1,h2,h3,p { margin:0; }
    h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.08; }
    h2 { font-size:clamp(2.15rem,4vw,3.45rem); letter-spacing:-.025em; }
    h3 { font-size:1.75rem; }
    p { color:var(--muted); }
    .wrap { width:min(1320px,calc(100% - 80px)); margin-inline:auto; }
    .eyebrow { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; margin-bottom:22px; }
    .small { font-size:.85rem; }
    .skip { position:absolute; left:20px; top:-100px; background:white; padding:12px; z-index:10; }
    .skip:focus { top:10px; }
    header { background:var(--cream); border-bottom:1px solid var(--border); }
    .nav { min-height:86px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
    .logo { width:215px; height:auto; }
    nav { display:flex; align-items:center; gap:30px; font-size:.86rem; }
    nav a { text-decoration:none; }
    .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 24px; border:1px solid var(--forest); border-radius:8px; background:var(--forest); color:white; font-family:var(--sans); font-weight:600; font-size:.9rem; text-decoration:none; transition:background .2s; }
    .button:hover { background:#143029; }
    .button.secondary { color:var(--forest); background:#fff9; border-color:var(--border); }
    .button.secondary:hover { background:white; }
    .hero { position:relative; min-height:calc(100svh - 86px); display:flex; align-items:center; overflow:hidden; }
    .hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:66% center; }
    .hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,244,238,.90) 0%,rgba(247,244,238,.80) 25%,rgba(247,244,238,.35) 42%,rgba(247,244,238,0) 66%); }
    .hero-content { position:relative; z-index:1; padding-block:56px; }
    .hero-copy { max-width:590px; }
    .status { display:inline-flex; align-items:center; gap:9px; padding:5px 12px; background:#ffffffb8; border:1px solid #d6ddd0; border-radius:100px; font-size:.74rem; font-weight:600; margin-bottom:24px; }
    .status::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--forest); }
    h1 { font-size:clamp(3.5rem,6vw,5.6rem); letter-spacing:-.04em; max-width:610px; }
    h1 span { display:block; }
    .promise { margin-top:22px; color:#b94332; font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.15; }
    .hero p { margin-top:23px; max-width:460px; font-size:1.08rem; }
    .actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
    .hero .footnote { max-width:450px; margin-top:17px; font-size:.76rem; }
    .section { padding-block:95px; }
    .white { background:white; }
    .intro { display:grid; grid-template-columns:.85fr 1fr; gap:90px; align-items:start; }
    .intro p { font-size:1.15rem; max-width:580px; }
    .intro p+p { margin-top:20px; font-size:1rem; }
    .flow { padding:45px 55px; background:var(--sage); border-radius:14px; margin-top:60px; }
    .flow-head { display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-bottom:38px; }
    .flow-head h3 { font-size:2rem; }
    .flow ol { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; list-style:none; margin:0; padding:0; counter-reset:step; }
    .flow li { counter-increment:step; }
    .flow li::before { content:'0' counter(step); display:block; font-family:var(--serif); font-size:2.2rem; border-bottom:1px solid #cad4c2; padding-bottom:14px; margin-bottom:20px; }
    .flow strong { font-size:.98rem; }
    .flow p { font-size:.9rem; margin-top:9px; }
    .range-head { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:40px; }
    .range-head h2 { max-width:580px; }
    .range-head p { max-width:420px; }
    .audiences { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
    .audience { background:white; border-radius:12px; overflow:hidden; }
    .audience img { width:100%; height:330px; object-fit:cover; }
    .audience-copy { padding:32px 36px 36px; }
    .tag { display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; border-bottom:1px solid #c9d3c3; padding-bottom:5px; margin-bottom:18px; }
    .audience p { margin-top:15px; }
    .audience .examples { font-size:.85rem; border-top:1px solid var(--border); padding-top:17px; margin-top:23px; }
    .range-note { margin-top:25px; font-size:.84rem; max-width:770px; }
    .studio { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; }
    .studio-frame { background:var(--cream); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
    .studio-toolbar { display:flex; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--border); background:white; font-size:.8rem; gap:20px; }
    .studio-frame img { width:100%; height:370px; object-fit:contain; padding:20px; }
    .studio-caption { padding:15px 20px; background:white; border-top:1px solid var(--border); font-size:.76rem; }
    .studio-text p { margin-top:22px; }
    .studio-text ul { list-style:none; padding:0; margin:28px 0 0; }
    .studio-text li { padding:12px 0; border-bottom:1px solid var(--border); }
    .studio-text li::before { content:'✓'; margin-right:12px; }
    .ai { margin-top:70px; display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; border-top:1px solid var(--border); padding-top:50px; }
    .ai h3 { font-size:2.1rem; }
    .ai p { font-size:1.03rem; }
    .ai p+p { font-size:.85rem; margin-top:18px; }
    .principles { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; margin-top:42px; }
    .principles article { padding-top:22px; border-top:1px solid #c7c7ba; }
    .principles h3 { font-size:1.55rem; }
    .principles p { margin-top:14px; font-size:.96rem; }
    .faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
    details { border-bottom:1px solid var(--border); }
    summary { cursor:pointer; padding:22px 28px 22px 0; font-weight:600; }
    details p { padding-bottom:24px; max-width:650px; }
    .contact { background:var(--forest); color:var(--cream); padding-block:75px; }
    .contact-row { display:flex; align-items:center; justify-content:space-between; gap:60px; }
    .contact h2 { max-width:650px; }
    .contact p { color:#e4eadf; max-width:580px; margin-top:18px; }
    .contact a { color:var(--cream); font-size:1.15rem; white-space:nowrap; }
    .contact a:focus-visible { outline-color:var(--cream); }
    footer { padding-block:35px; }
    .footer-row { display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:.78rem; }
    footer .logo { width:165px; }
    footer p { max-width:390px; }
    @media (min-width:1600px) { .hero { min-height:calc(100svh - 86px); } }
    @media (max-width:1000px) { .wrap { width:calc(100% - 48px); } .hero { min-height:670px; } .hero-copy { max-width:500px; } h1 { font-size:4.9rem; } .hero::after { background:linear-gradient(90deg,#f7f4eef7 0%,#f7f4eedb 40%,#f7f4ee24 100%); } .intro,.studio,.ai,.faq { gap:40px; } .section { padding-block:70px; } .flow { padding:35px; } .flow ol { grid-template-columns:1fr 1fr; gap:30px; } .audience img { height:260px; } }
    @media (max-width:700px) { .wrap { width:calc(100% - 36px); } .nav { min-height:76px; gap:14px; } .logo { width:160px; } nav { gap:12px; } nav .optional { display:none; } nav .button { font-size:.75rem; padding:8px 13px; min-height:40px; } .hero { min-height:0; display:block; padding-bottom:260px; } .hero-image { object-fit:cover; object-position:76% 100%; } .hero::after { background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 46%,#f7f4eec7 64%,transparent 85%); } .hero-content { padding-block:42px; } .hero-copy { max-width:none; } h1 { font-size:clamp(3.1rem,11vw,4.7rem); } .hero p { max-width:430px; font-size:1rem; } .hero .promise { font-size:1.65rem; } .section { padding-block:55px; } .intro,.audiences,.studio,.ai,.faq { grid-template-columns:1fr; gap:30px; } .flow { margin-top:35px; padding:25px; } .flow-head,.range-head { display:block; } .flow-head p,.range-head p { margin-top:16px; } .flow ol { gap:25px; } .flow p { font-size:.82rem; } .flow strong { font-size:.88rem; } .audience img { height:auto; aspect-ratio:1.6; } .audience-copy { padding:25px; } .studio-frame img { height:280px; } .ai { margin-top:40px; padding-top:35px; } .principles { grid-template-columns:1fr; gap:28px; } .contact { padding-block:55px; } .contact-row,.footer-row { display:block; } .contact a { display:inline-block; margin-top:28px; font-size:1.05rem; } footer p { margin-top:18px; } .footer-row>span { display:block; margin-top:18px; } }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

    .hero .footnote { max-width:470px; }
    .hero .status { margin-bottom:18px; }
    .hero .promise { margin-top:18px; }
    .hero p { margin-top:18px; }
    .hero .actions { margin-top:24px; }
    @media (max-width:1000px) and (min-width:701px) { .hero { min-height:calc(100svh - 86px); } h1 { font-size:clamp(3.5rem,7vw,4.9rem); } }
    @media (max-width:700px) { .hero { min-height:calc(100svh - 76px); } h1 { font-size:clamp(3rem,10vw,4.3rem); } .hero-content { padding-top:38px; padding-bottom:28px; } .hero { padding-bottom:220px; } .hero::after { background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 50%,#f7f4eec7 68%,transparent 88%); } .hero .actions .button { flex:1; } .hero .footnote { font-size:.8rem; } .hero .status { font-size:.72rem; } }
    @media (max-width:380px) { .nav { gap:10px; } .logo { width:140px; } nav .button { padding-inline:10px; } h1 { font-size:2.85rem; } }
    @media (min-width:701px) { .hero { min-height:calc(100svh - 87px); } }
    @media (min-width:701px) and (max-height:800px) { .hero-content { padding-block:32px; } h1 { font-size:clamp(3.5rem,5.1vw,4.5rem); line-height:1.04; } }
    @media (max-width:700px) { .hero .actions .button { padding-inline:16px; } .flow strong { display:block; min-height:2.8em; } }
    @media (max-width:380px) { .hero .actions { flex-direction:column; } .hero .actions .button { flex:initial; width:100%; } }