:root{--paper:#f2efe7;--paper2:#e8e2d6;--ink:#17181b;--muted:#67696d;--line:#d0c9bd;--accent:#7048d7;--dark:#17191d;--radius:30px;--max:1220px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit}.wrap{width:min(calc(100% - 46px),var(--max));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:15px;top:15px;z-index:100;background:white;padding:10px}.site-header{position:sticky;top:0;z-index:50;background:rgba(242,239,231,.92);backdrop-filter:blur(15px);border-bottom:1px solid rgba(120,110,95,.2)}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:950;font-size:1.32rem;letter-spacing:-.06em;text-decoration:none}.brand span{color:var(--accent)}nav{display:flex;align-items:center;gap:30px}nav>a{font-size:.91rem;font-weight:800;text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:var(--dark);color:white;padding:15px 23px;font-weight:850;text-decoration:none;cursor:pointer}.button-small{padding:12px 19px}.button.light{background:white;color:var(--ink)}.button.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.71rem;font-weight:900;color:var(--accent)}.hero{display:grid;grid-template-columns:.86fr 1.14fr;gap:58px;align-items:center;min-height:760px;padding:70px 0 90px}.hero h1{font-size:clamp(4rem,7.3vw,7.5rem);line-height:.83;letter-spacing:-.085em;margin:18px 0 30px}.hero h1 em{font-family:Georgia,serif;font-weight:400}.hero-copy>p{font-size:1.17rem;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:22px;align-items:center;margin:30px 0}.text-link{font-weight:850;text-decoration:none}.text-link span{color:var(--accent)}.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:28px;border-top:1px solid var(--line)}.hero-facts span,.hero-facts b{display:block}.hero-facts span{font-size:.78rem;color:var(--muted)}.hero-facts b{font-size:.84rem;color:var(--ink);margin-bottom:3px}.hero-stage{position:relative;min-height:590px}.browser{background:white;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(29,27,24,.18)}.browser-bar{height:42px;background:#e9e7e1;display:flex;align-items:center;gap:7px;padding:0 14px;color:#72716e;font-size:.72rem}.browser-bar i{width:9px;height:9px;border-radius:50%;background:#b9b6ae}.browser-bar span{margin-left:8px}.browser iframe{border:0;width:200%;height:200%;transform:scale(.5);transform-origin:top left;pointer-events:none}.browser-main{position:absolute;right:0;top:38px;width:94%;height:480px;transform:rotate(1.3deg)}.phone{position:absolute;left:-15px;bottom:10px;width:170px;height:350px;border:9px solid #16181c;border-radius:28px;background:#111;overflow:hidden;box-shadow:0 25px 60px #0004;z-index:3}.phone-speaker{position:absolute;z-index:2;width:55px;height:7px;background:#111;left:50%;transform:translateX(-50%);top:3px;border-radius:0 0 8px 8px}.phone iframe{width:390%;height:390%;transform:scale(.257);transform-origin:top left;border:0;pointer-events:none}.availability{position:absolute;right:10px;bottom:5px;background:white;padding:15px 18px 15px 48px;border-radius:14px;box-shadow:0 15px 40px #0002;z-index:4}.availability span{position:absolute;left:18px;top:20px;width:12px;height:12px;background:#35aa62;border-radius:50%;box-shadow:0 0 0 5px #35aa6222}.availability b,.availability small{display:block}.availability small{color:var(--muted);font-size:.75rem}.credibility{background:var(--dark);color:white;padding:31px 0}.credibility-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:28px;align-items:center}.credibility-lead{color:#aeb0b4}.credibility-grid b,.credibility-grid span{display:block}.credibility-grid span{font-size:.82rem;color:#9da0a5}.work-section{padding:118px 0}.section-head{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:46px}.section-head h2{font-size:clamp(2.9rem,5.5vw,5.7rem);letter-spacing:-.075em;line-height:.91;margin:12px 0 0}.section-head>p{max-width:520px;color:var(--muted)}.feature-project{border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:.88fr 1.12fr;min-height:670px;margin-bottom:28px}.project-marine{background:#0b3b45;color:white}.project-copy{padding:clamp(36px,5vw,72px);display:flex;flex-direction:column;justify-content:center}.project-copy .eyebrow{color:#6dd4dc}.project-number{font-size:.72rem;color:#91c8cd;margin-bottom:54px}.project-copy h3{font-size:clamp(3rem,5vw,5.9rem);letter-spacing:-.075em;line-height:.88;margin:10px 0 22px}.project-copy p{color:#c4dadd;font-size:1.08rem}.results{margin:24px 0 30px}.results div{display:grid;grid-template-columns:110px 1fr;padding:10px 0;border-top:1px solid #ffffff2e}.results dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#87c0c5}.results dd{margin:0}.project-screen{display:flex;align-items:center;padding:50px 50px 50px 0;overflow:hidden}.project-screen .browser{width:118%;height:530px;transform:translateX(5%) rotate(1.2deg)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.project-card{border-radius:var(--radius);overflow:hidden;padding:28px;min-height:570px;display:grid;grid-template-rows:1fr auto}.yellow{background:#f0c43e}.sage{background:#afc1aa}.rust{background:#a94d33;color:white}.slate{background:#454b51;color:white}.plum{background:#8251a0;color:white}.project-wide{grid-column:1/-1;grid-template-columns:1.2fr .8fr;grid-template-rows:none;gap:38px;align-items:center}.mini-browser{background:white;border:8px solid rgba(255,255,255,.55);border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(20,20,20,.16);height:340px}.mini-browser iframe{border:0;width:200%;height:200%;transform:scale(.5);transform-origin:top left;pointer-events:none}.project-card-copy{padding:28px 4px 4px}.project-card-copy span{font-weight:900;text-transform:uppercase;letter-spacing:.13em;font-size:.67rem;opacity:.72}.project-card-copy h3{font-size:2.35rem;letter-spacing:-.055em;margin:8px 0}.project-card-copy p{opacity:.82;max-width:520px}.project-card-copy a{font-weight:900;text-decoration:none}.comparison{padding:0 0 110px}.comparison-card{background:#dcd0fb;border-radius:34px;padding:clamp(35px,6vw,72px);display:grid;grid-template-columns:.85fr 1.15fr;gap:70px}.comparison h2{font-size:clamp(3rem,5vw,5.2rem);line-height:.91;letter-spacing:-.07em;margin:12px 0 22px}.before-after{display:grid;grid-template-columns:1fr 1fr;gap:16px}.before-after article{background:#eee9f8;border-radius:20px;padding:26px}.before-after article.after{background:var(--dark);color:white}.before-after small,.before-after b{display:block}.before-after small{text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--accent);margin-bottom:22px}.before-after b{padding:12px 0;border-bottom:1px solid #0002}.after b{border-color:#fff2}.services-section{padding:110px 0;background:var(--paper2)}.services-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px}.sticky-copy{position:sticky;top:110px}.sticky-copy h2{font-size:clamp(3rem,5vw,5.3rem);letter-spacing:-.075em;line-height:.92;margin:12px 0 24px}.sticky-copy p{color:var(--muted);font-size:1.07rem}.service-list article{display:grid;grid-template-columns:62px 1fr;gap:20px;padding:36px 0;border-bottom:1px solid #c8c0b2}.service-list article:first-child{border-top:1px solid #c8c0b2}.service-list span{color:var(--accent);font-weight:900}.service-list h3{font-size:1.72rem;letter-spacing:-.04em;margin:0 0 8px}.service-list p{margin:0;color:var(--muted)}.why-section{padding:105px 0}.why-card{background:var(--dark);color:white;border-radius:34px;padding:clamp(36px,6vw,76px);display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.why-intro h2{font-size:clamp(3rem,5vw,5.4rem);letter-spacing:-.075em;line-height:.9;margin:12px 0 22px}.why-intro p{color:#b8bbc0}.why-grid{display:grid;grid-template-columns:repeat(2,1fr)}.why-grid div{padding:24px;border-bottom:1px solid #36383c}.why-grid div:nth-child(odd){border-right:1px solid #36383c}.why-grid b,.why-grid span{display:block}.why-grid span{font-size:.86rem;color:#9fa2a7}.process-section,.pricing-section,.faq-section{padding:105px 0}.section-head.compact h2{font-size:clamp(2.8rem,4.8vw,4.9rem)}.process-line{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.process-line article{padding:29px 24px;min-height:225px;border-right:1px solid var(--line)}.process-line article:last-child{border-right:0}.process-line b{color:var(--accent);font-size:1.5rem}.process-line h3{font-size:1.4rem;margin:32px 0 8px}.process-line p{font-size:.9rem;color:var(--muted)}.pricing-section{background:white}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.price-card{border:1px solid var(--line);border-radius:25px;padding:31px;display:flex;flex-direction:column;position:relative}.price-card.featured{border:2px solid var(--accent);transform:translateY(-12px);box-shadow:0 24px 55px rgba(52,34,88,.13)}.popular{position:absolute;top:-14px;left:28px;background:var(--accent);color:white;border-radius:999px;padding:6px 12px;font-size:.71rem;font-weight:900}.price-card>span{color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:.67rem;font-weight:900}.price-card h3{font-size:1.82rem;letter-spacing:-.04em;margin:8px 0}.price-card p{color:var(--muted);min-height:75px}.price{font-size:3.35rem;font-weight:950;letter-spacing:-.07em;margin:18px 0}.price small{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.price.quote{font-size:2.35rem;line-height:.9}.price-card ul{list-style:none;padding:0;margin:5px 0 28px;flex:1}.price-card li{padding:9px 0;border-bottom:1px solid #e9e5dd;font-size:.89rem}.price-card li:before{content:"✓";color:var(--accent);font-weight:900;margin-right:8px}.pricing-note{text-align:center;color:var(--muted);font-size:.84rem;max-width:780px;margin:30px auto 0}.faq-layout{display:grid;grid-template-columns:.62fr 1.38fr;gap:80px}.faq-layout h2{font-size:clamp(3rem,5vw,5rem);letter-spacing:-.075em;line-height:.92;margin:12px 0}.faq-list details{border-top:1px solid var(--line);padding:22px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}.faq-list summary{font-weight:850;font-size:1.12rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.faq-list summary:after{content:"+";color:var(--accent);font-size:1.4rem}.faq-list details[open] summary:after{content:"–"}.faq-list p{color:var(--muted)}.contact-section{padding:80px 0 110px}.contact-card{background:#dcd0fb;border-radius:34px;padding:clamp(32px,6vw,72px);display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}.contact-copy h2{font-size:clamp(3.2rem,5.3vw,5.7rem);letter-spacing:-.078em;line-height:.9;margin:12px 0 24px}.contact-copy>p{font-size:1.08rem}.contact-prompt{border-top:1px solid #0003;margin-top:34px;padding-top:20px}.contact-prompt b,.contact-prompt span{display:block}.contact-prompt span{font-size:.86rem;color:#514a62}form{background:white;border-radius:24px;padding:28px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px;margin-bottom:15px}.field label{font-weight:800;font-size:.86rem}.field input,.field textarea,.field select{width:100%;border:1px solid #d9d5cc;border-radius:11px;padding:12px 13px;font:inherit;background:#fbfaf7}.field textarea{min-height:125px;resize:vertical}.submit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.submit-row small{color:var(--muted)}.thanks{background:#e6f5e9;border-radius:12px;padding:12px}.foot-main{display:grid;grid-template-columns:1fr 1.5fr .8fr;gap:30px;align-items:center;padding:55px 0 35px;border-top:1px solid var(--line)}.foot-main p{color:var(--muted)}.foot-main>a:last-child{text-align:right;font-weight:900}.foot-base{display:flex;justify-content:space-between;gap:20px;padding:22px 0 45px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}
@media(max-width:980px){.hero{grid-template-columns:1fr;padding-top:65px}.hero-stage{min-height:530px}.credibility-grid{grid-template-columns:1fr 1fr}.credibility-lead{grid-column:1/-1}.feature-project,.services-layout,.why-card,.faq-layout,.contact-card,.comparison-card{grid-template-columns:1fr}.project-screen{padding:0 38px 45px}.project-screen .browser{width:100%;transform:none}.sticky-copy{position:static}.process-line{grid-template-columns:repeat(2,1fr)}.process-line article:nth-child(2n){border-right:0}.pricing-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.project-wide{grid-template-columns:1fr;grid-column:auto}.project-grid{grid-template-columns:1fr}.foot-main{grid-template-columns:1fr}.foot-main>a:last-child{text-align:left}}
@media(max-width:700px){.wrap{width:min(calc(100% - 26px),var(--max))}nav a:not(.button){display:none}.topbar{height:70px}.hero{min-height:auto;padding:52px 0 78px}.hero h1{font-size:clamp(3.25rem,15vw,5rem)}.hero-facts{grid-template-columns:1fr}.hero-stage{min-height:400px}.browser-main{height:330px;width:96%}.phone{width:125px;height:260px;left:0}.availability{right:0;bottom:-15px}.availability small{display:none}.credibility-grid{grid-template-columns:1fr}.section-head{display:block}.section-head>p{margin-top:18px}.work-section,.services-section,.why-section,.process-section,.pricing-section,.faq-section{padding:80px 0}.feature-project{grid-template-columns:1fr;min-height:auto}.project-number{margin-bottom:28px}.project-screen{padding:0 20px 25px}.project-screen .browser{height:330px}.project-card{min-height:500px;padding:18px}.mini-browser{height:285px}.before-after{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr}.why-grid div:nth-child(odd){border-right:0}.process-line{grid-template-columns:1fr}.process-line article{border-right:0;border-bottom:1px solid var(--line);min-height:auto}.form-row{grid-template-columns:1fr}.contact-card{gap:32px}.foot-base{display:block}.foot-base span{display:block;margin-top:6px}}
/* Publishable polish pass */
.project-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.case-link{color:#c4e8eb;font-weight:850;font-size:.88rem}.case-study-strip{background:#f6f2e9;border:1px solid #d9d1c4;border-radius:28px;padding:clamp(30px,5vw,58px);margin:0 0 28px;display:grid;grid-template-columns:.85fr 1.15fr;gap:58px}.case-study-lead h3{font-size:clamp(2.3rem,4vw,4.1rem);line-height:.95;letter-spacing:-.06em;margin:12px 0 20px}.case-study-lead p{color:var(--muted);max-width:620px}.case-study-points{display:grid;gap:0}.case-study-points article{display:grid;grid-template-columns:54px 1fr;column-gap:16px;padding:22px 0;border-top:1px solid var(--line)}.case-study-points article:last-child{border-bottom:1px solid var(--line)}.case-study-points span{grid-row:1/3;color:var(--accent);font-weight:950}.case-study-points h4{margin:0;font-size:1.18rem}.case-study-points p{margin:4px 0 0;color:var(--muted);font-size:.92rem}.project-card{position:relative}.concept-badge{position:absolute;top:15px;left:15px;z-index:3;background:rgba(20,20,22,.84);color:#fff!important;border-radius:999px;padding:7px 11px;font-size:.62rem!important;letter-spacing:.11em!important;backdrop-filter:blur(8px)}.audience-section{padding:0 0 105px}.audience-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:58px 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:start}.audience-card h2{font-size:clamp(2.8rem,4.8vw,5rem);line-height:.93;letter-spacing:-.07em;margin:10px 0 0}.audience-card>p{font-size:1.08rem;color:var(--muted);max-width:700px}.audience-tags{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}.audience-tags span{border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-weight:800;font-size:.82rem;background:#fff}.project-card,.feature-project,.button,.text-link,.case-link{transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease}.project-card:hover{transform:translateY(-4px);box-shadow:0 20px 55px rgba(20,20,20,.12)}.button:hover{transform:translateY(-2px)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #9c6bff;outline-offset:4px}.mini-browser,.browser{background:#fff}.site-header{backdrop-filter:blur(14px);background:rgba(242,239,231,.92)}
@media(max-width:980px){.case-study-strip,.audience-card{grid-template-columns:1fr}.audience-tags{grid-column:auto}}
@media(max-width:700px){.case-study-strip{padding:28px 22px}.project-actions{align-items:flex-start;flex-direction:column}.audience-section{padding-bottom:75px}.audience-card{padding:44px 0}.concept-badge{top:9px;left:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-card,.feature-project,.button,.text-link,.case-link{transition:none}.project-card:hover,.button:hover{transform:none}}

/* Occono identity and first-click upgrade */
:root{--accent:#ff5a36;--acid:#d9ff4f;--violet:#7556ff;--deep:#111217}
.occono-brand{font-size:1.48rem;letter-spacing:.08em;font-weight:950}.occono-brand span{color:var(--accent);margin-left:2px}.occono-hero{background:var(--deep);color:#fff;overflow:hidden;position:relative}.hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:58px;align-items:center;min-height:790px;padding:82px 0 70px}.occono-hero .hero-copy{position:relative;z-index:3}.hero-eyebrow{color:#fff}.hero-eyebrow span{display:inline-block;width:28px;height:2px;background:var(--accent);vertical-align:middle;margin-right:8px}.occono-hero h1{font-size:clamp(4.4rem,8.1vw,8.8rem);line-height:.79;letter-spacing:-.088em;margin:22px 0 30px}.occono-hero h1 span{font-weight:950}.occono-hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--acid);white-space:nowrap}.hero-lead{font-size:clamp(1.12rem,1.7vw,1.35rem);max-width:650px;color:#c4c6cb}.button-accent{background:var(--accent);color:#fff}.occono-hero .text-link{color:#fff}.hero-stance{display:flex;gap:10px;flex-wrap:wrap;margin-top:35px}.hero-stance b{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;border:1px solid #ffffff35;border-radius:999px;padding:9px 12px;color:#d9dadd}.occono-hero .hero-stage{min-height:610px}.occono-hero .browser-main{top:54px;width:96%;height:500px;box-shadow:0 35px 95px #0009}.occono-hero .phone{left:-5px;bottom:2px}.hero-orbit{position:absolute;border-radius:999px;padding:10px 15px;font-size:.7rem;font-weight:950;letter-spacing:.11em;text-transform:uppercase;z-index:5;box-shadow:0 12px 30px #0005}.orbit-one{top:4px;right:22%;background:var(--acid);color:#111;transform:rotate(-4deg)}.orbit-two{top:43%;right:-28px;background:var(--violet);color:#fff;transform:rotate(6deg)}.orbit-three{bottom:7%;right:26%;background:var(--accent);color:#fff;transform:rotate(-3deg)}.occono-hero .availability{background:var(--acid);color:#111}.occono-hero .availability small{color:#34352d}.attention-strip{background:var(--accent);color:#111;border-top:1px solid #000;padding:13px 0;overflow:hidden;white-space:nowrap;font-weight:950;letter-spacing:.09em;font-size:.79rem}.attention-strip div{display:inline-block;min-width:200%;animation:marquee 28s linear infinite}.attention-strip i{font-style:normal;margin:0 18px}.credibility{background:#08090c}.work-section{position:relative}.work-section:before{content:"WORK";position:absolute;right:-1vw;top:90px;font-size:clamp(6rem,18vw,16rem);font-weight:950;letter-spacing:-.08em;color:#e9e3d7;line-height:.7;z-index:0;pointer-events:none}.work-section>.wrap{position:relative;z-index:1}.section-head h2 em{font-family:Georgia,serif}.project-marine{background:#073f47}.feature-project{box-shadow:0 30px 75px rgba(24,23,20,.12)}.project-card{border:1px solid rgba(0,0,0,.08)}.why-card{background:#0d0e12}.why-intro h2 br{display:block}.contact-card{background:var(--acid)}.contact-section .eyebrow{color:#141414}.price-card.featured{border-color:var(--accent)}.popular{background:var(--accent)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;padding-top:70px}.occono-hero .hero-stage{min-height:560px}.work-section:before{top:60px}.orbit-two{right:0}}
@media(max-width:700px){.hero-grid{padding:55px 0 55px;min-height:auto}.occono-hero h1{font-size:clamp(3.5rem,18vw,5.7rem)}.occono-hero h1 em{white-space:normal}.hero-stance{gap:7px}.hero-stance b{font-size:.62rem}.occono-hero .hero-stage{min-height:420px}.occono-hero .browser-main{height:335px;top:42px}.hero-orbit{font-size:.58rem;padding:7px 10px}.orbit-one{right:7%}.orbit-two{top:37%}.orbit-three{bottom:4%;right:8%}.attention-strip{font-size:.68rem}.work-section:before{display:none}}
@media(prefers-reduced-motion:reduce){.attention-strip div{animation:none}}

/* Occono professional brand system — v2 */
:root{
  --paper:#f3efe6;
  --paper2:#e8e1d5;
  --ink:#20201e;
  --muted:#68645e;
  --line:#cfc5b7;
  --accent:#b94f2f;
  --accent-dark:#8f351e;
  --dark:#20201e;
  --deep:#20201e;
  --radius:18px;
}
body{background:var(--paper);color:var(--ink)}
.site-header{background:rgba(243,239,230,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.topbar{height:88px}
.occono-brand{font-size:1.36rem;letter-spacing:.15em;font-weight:900;display:inline-flex;align-items:center;gap:9px}
.occono-brand .brand-mark{display:inline-block;width:10px;height:10px;background:var(--accent);margin:0;transform:rotate(45deg)}
nav{gap:34px}
nav>a{font-size:.88rem;letter-spacing:.01em}
.button{border-radius:4px;padding:15px 22px;letter-spacing:.01em}
.button-small{padding:12px 18px}
.button-accent{background:var(--accent)}
.button-accent:hover{background:var(--accent-dark)}
.eyebrow{color:var(--accent);letter-spacing:.14em}

/* Professional hero */
.occono-hero.professional-hero{background:var(--paper);color:var(--ink);overflow:hidden;border-bottom:1px solid var(--line)}
.professional-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;min-height:690px;padding:86px 0 72px}
.professional-hero-copy{max-width:650px}
.professional-hero .hero-eyebrow{color:var(--accent);margin-bottom:24px}
.professional-hero h1{font-size:clamp(3.8rem,6.4vw,7rem);line-height:.91;letter-spacing:-.071em;margin:0 0 28px;font-weight:850;max-width:760px}
.professional-hero .hero-lead{color:var(--muted);font-size:clamp(1.08rem,1.5vw,1.28rem);max-width:620px;line-height:1.6}
.professional-hero .text-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.professional-hero .text-link span{color:var(--accent)}
.professional-proof{display:grid;grid-template-columns:repeat(3,1fr);margin-top:42px;padding-top:27px;border-top:1px solid var(--line)}
.professional-proof div{padding-right:20px}
.professional-proof div+div{padding-left:20px;border-left:1px solid var(--line)}
.professional-proof b,.professional-proof span{display:block}
.professional-proof b{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.professional-proof span{font-size:.8rem;color:var(--muted);line-height:1.45}
.professional-hero-stage{position:relative;padding:30px 0 38px 30px}
.professional-hero-stage:before{content:"";position:absolute;inset:0 8% 0 0;background:var(--accent);z-index:0}
.professional-browser{position:relative;z-index:2;width:104%;height:505px;border-radius:7px;box-shadow:0 28px 65px rgba(32,32,30,.24);transform:none}
.professional-browser .browser-bar{background:#e6e2da;border-bottom:1px solid #d1ccc2}
.stage-label{position:absolute;z-index:3;top:0;left:0;background:var(--dark);color:white;padding:16px 20px;min-width:220px}
.stage-label span,.stage-label b{display:block}.stage-label span{text-transform:uppercase;letter-spacing:.12em;font-size:.62rem;color:#c8c3bb}.stage-label b{font-size:.94rem;margin-top:2px}
.stage-note{position:absolute;z-index:4;right:0;bottom:0;background:var(--paper);border:1px solid var(--line);padding:18px 22px;min-width:310px}
.stage-note b,.stage-note span{display:block}.stage-note b{font-size:.9rem}.stage-note span{font-size:.75rem;color:var(--muted);margin-top:3px}
.professional-band{background:var(--dark);color:white}
.professional-band .wrap{display:grid;grid-template-columns:repeat(5,1fr);min-height:78px;align-items:center}
.professional-band span{text-align:center;text-transform:uppercase;letter-spacing:.11em;font-weight:800;font-size:.68rem;border-right:1px solid #ffffff25;padding:12px}
.professional-band span:last-child{border-right:0}

/* Professional section system */
.credibility{background:#2a2926;padding:38px 0}
.credibility-grid span{color:#c4beb5}.credibility-lead{color:#e5dfd5}
.work-section:before{display:none}
.work-section{padding-top:125px}
.section-head h2,.comparison h2,.sticky-copy h2,.why-intro h2,.contact-copy h2,.audience-card h2{letter-spacing:-.062em}
.feature-project{border-radius:12px;box-shadow:none;border:1px solid #174c54}
.project-card{border-radius:12px;border:1px solid rgba(32,32,30,.15);box-shadow:none}
.project-card:hover{box-shadow:0 18px 38px rgba(32,32,30,.12)}
.tone-warm{background:#d8b46f;color:#20201e}.tone-stone{background:#c9c1b2;color:#20201e}.tone-dark{background:#5b4035;color:white}.tone-charcoal{background:#3a3936;color:white}.tone-rust{background:#b94f2f;color:white}
.concept-badge{border-radius:3px;background:rgba(32,32,30,.9)}
.case-study-strip{border-radius:12px;background:#ece5da}
.audience-tags span{border-radius:3px;background:transparent}
.comparison-card{background:#d9cabc;border-radius:12px}
.before-after article{border-radius:8px;background:#eee7dd}.before-after article.after{background:var(--dark)}
.services-section{background:#e9e1d5}
.why-card{border-radius:12px;background:var(--dark)}
.price-card{border-radius:10px}.price-card.featured{border-color:var(--accent);box-shadow:0 20px 40px rgba(95,53,37,.12)}
.popular{background:var(--accent);border-radius:3px}
.contact-card{background:#d7c6b2;border-radius:12px}
.field input,.field textarea,.field select{border-radius:4px}
form{border-radius:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:var(--accent)}

@media(max-width:980px){
  .professional-hero-grid{grid-template-columns:1fr;min-height:auto;padding:70px 0 60px}
  .professional-hero-stage{max-width:760px;width:100%;margin:0 auto;padding-left:24px}
  .professional-browser{height:470px;width:100%}
  .professional-band .wrap{grid-template-columns:repeat(3,1fr)}
  .professional-band span:nth-child(3){border-right:0}
}
@media(max-width:700px){
  .topbar{height:72px}.occono-brand{font-size:1.08rem}
  .professional-hero-grid{padding:55px 0 45px;gap:45px}
  .professional-hero h1{font-size:clamp(3.25rem,15vw,5rem)}
  .professional-proof{grid-template-columns:1fr;gap:0}
  .professional-proof div{padding:14px 0!important;border-left:0!important;border-bottom:1px solid var(--line)}
  .professional-hero-stage{padding:22px 0 30px 12px}
  .professional-browser{height:325px}
  .stage-label{padding:11px 14px;min-width:180px}
  .stage-note{min-width:0;right:0;left:34px;padding:13px 15px}
  .stage-note span{display:none}
  .professional-band .wrap{grid-template-columns:1fr 1fr}
  .professional-band span{border-bottom:1px solid #ffffff20}
  .professional-band span:nth-child(odd){border-right:1px solid #ffffff25}
  .professional-band span:nth-child(even){border-right:0}
}


/* Occono refinement pass — v3 */
.card-actions{display:flex;gap:18px;flex-wrap:wrap}.card-actions a:last-child{opacity:.68;font-weight:750}.case-study-cta{display:inline-block;margin-top:22px;color:var(--accent);font-weight:850;text-decoration:none}.case-page{background:var(--paper)}.case-hero{padding:82px 0 92px;border-bottom:1px solid var(--line)}.case-hero-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center}.case-back{display:inline-block;margin-bottom:46px;color:var(--muted);font-weight:800;text-decoration:none}.case-hero h1{font-size:clamp(4rem,7vw,7.5rem);line-height:.86;letter-spacing:-.075em;margin:16px 0 28px}.case-hero>div>div>p,.case-hero-grid>div>p{font-size:1.22rem;color:var(--muted);max-width:650px}.case-meta{display:grid;grid-template-columns:1fr;gap:0;margin-top:40px;border-top:1px solid var(--line)}.case-meta div{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}.case-meta span{text-transform:uppercase;letter-spacing:.11em;font-size:.65rem;color:var(--accent);font-weight:900}.case-meta b{font-size:.86rem}.case-preview{background:var(--accent);padding:34px 0 34px 34px}.case-preview .browser{height:520px;border-radius:7px}.case-body{padding:110px 0}.case-body-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px}.case-sticky{position:sticky;top:125px;align-self:start}.case-sticky h2{font-size:clamp(2.7rem,4.6vw,4.8rem);line-height:.93;letter-spacing:-.063em;margin:14px 0}.case-large{font-size:clamp(1.45rem,2.4vw,2.1rem);line-height:1.42;margin:0}.case-rule{height:1px;background:var(--line);margin:55px 0}.decision-list{list-style:none;counter-reset:item;padding:0;margin:18px 0 65px}.decision-list li{counter-increment:item;display:grid;grid-template-columns:58px 1fr;padding:24px 0;border-top:1px solid var(--line);font-size:1.06rem}.decision-list li:before{content:"0" counter(item);color:var(--accent);font-weight:900}.decision-list li:last-child{border-bottom:1px solid var(--line)}.case-outcome{background:var(--dark);color:#fff;padding:42px}.case-outcome h3{font-size:clamp(2rem,3.4vw,3.4rem);line-height:1.04;letter-spacing:-.05em;margin:14px 0 0}.case-live{padding:78px 0;background:#ded3c4}.case-live .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px}.case-live h2{font-size:clamp(2.5rem,4.5vw,4.6rem);line-height:.92;letter-spacing:-.06em;margin:10px 0 0;max-width:720px}
@media (min-width:981px) and (max-width:1220px){.professional-hero-grid{grid-template-columns:.95fr 1.05fr;gap:42px}.professional-hero h1{font-size:clamp(3.65rem,5.75vw,5.3rem);max-width:600px}.professional-hero-stage{padding-left:20px}.stage-note{right:-2px;min-width:280px}.professional-proof span{font-size:.74rem}}
@media(max-width:980px){.case-hero-grid,.case-body-grid{grid-template-columns:1fr}.case-preview{padding:26px 0 26px 26px}.case-sticky{position:static}.case-body-grid{gap:45px}}
@media(max-width:700px){.case-hero{padding:55px 0 65px}.case-back{margin-bottom:30px}.case-hero h1{font-size:clamp(3.4rem,16vw,5rem)}.case-preview{padding:14px 0 14px 14px}.case-preview .browser{height:330px}.case-body{padding:75px 0}.case-live .wrap{align-items:flex-start;flex-direction:column}.case-outcome{padding:30px 24px}.case-meta div{grid-template-columns:1fr;gap:3px}.card-actions{gap:12px}.card-actions a{font-size:.9rem}}

/* Launch-readiness additions */
.legal-page{padding:90px 0 120px}.legal-shell{max-width:900px}.legal-shell h1{font-size:clamp(3rem,7vw,6rem);line-height:.95;margin:20px 0 30px}.legal-shell h2{font-size:1.45rem;margin:42px 0 12px}.legal-shell p,.legal-shell li{font-size:1.05rem;line-height:1.75;color:#56514c}.legal-shell ul{padding-left:1.4rem}.legal-meta{border-top:1px solid #cfc6bb;border-bottom:1px solid #cfc6bb;padding:16px 0;color:#6b655f}.legal-note{background:#ebe3d8;padding:20px 24px;border-left:5px solid #c45a2d;margin:28px 0}.legal-nav{display:flex;gap:20px;flex-wrap:wrap}.legal-nav a{color:inherit}.consent{display:flex;align-items:flex-start;gap:10px;margin:18px 0}.consent input{width:auto;margin-top:4px}.consent label{font-size:.92rem;line-height:1.45}.form-status{margin-top:16px;padding:14px 16px;background:#ebe3d8;border-left:4px solid #c45a2d}.foot-base{gap:20px;flex-wrap:wrap}.foot-links{display:flex;gap:14px;flex-wrap:wrap}.foot-links a{color:inherit}.not-found{min-height:70vh;display:grid;place-items:center;text-align:center}.not-found h1{font-size:clamp(5rem,18vw,12rem);margin:0}.not-found p{font-size:1.2rem;color:#6b655f}.hp-field{position:absolute!important;left:-9999px!important;opacity:0!important}.preview-note{font-size:.78rem;color:#6b655f}

/* Static portfolio previews: faster than loading complete websites in iframes. */
.website-preview-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:#ddd}
.professional-hero-grid,.professional-hero-stage,.project-screen,.project-card,.mini-browser{min-width:0}
.professional-hero-stage{overflow:visible;padding-right:0}
.professional-browser{width:100%;max-width:100%;overflow:hidden}
.professional-browser .website-preview-image{height:calc(100% - 42px)}
.project-screen .browser{width:100%;max-width:100%;height:530px;transform:rotate(1.2deg)}
.project-screen .browser .website-preview-image{height:calc(100% - 42px)}
.mini-browser .website-preview-image{height:100%}
body{overflow-x:hidden}
@media (min-width:981px) and (max-width:1220px){
  .professional-hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
  .professional-hero-stage{padding-left:14px}
  .professional-browser{height:440px}
  .stage-note{position:relative;right:auto;bottom:auto;margin:-1px 0 0 auto;max-width:100%;min-width:0}
}
@media(max-width:980px){
  .professional-hero-stage{overflow:hidden}
  .professional-browser{width:100%;max-width:100%}
  .project-screen{padding-right:32px}
  .project-screen .browser{transform:none}
}
@media(max-width:700px){
  .professional-hero-stage{padding-left:0}
  .professional-hero-stage:before{inset:0 0 0 10px}
  .project-screen{padding:20px}
  .project-screen .browser{height:300px}
}

/* Hybrid live portfolio previews: accurate current sites, deferred below the fold */
.website-preview-frame{display:block;width:100%;height:100%;min-height:0;border:0;background:#fff;pointer-events:none}
.professional-browser .website-preview-frame{aspect-ratio:1280/782;height:auto}
.project-screen .website-preview-frame{aspect-ratio:1280/782;height:auto}
.mini-browser .website-preview-frame{aspect-ratio:1280/782;height:auto}
@media (max-width:1100px){.professional-browser .website-preview-frame{aspect-ratio:16/10}}