/* Page-specific compositions for the studio. Project previews keep their own styling. */
.home-page .home-hero-copy,
.home-page .home-section-heading,
.home-page .home-about-copy,
.designs-page .designs-hero,
.brand-design-page .brand-page-intro,
.services-page .services-page-intro { text-align:left; }
.page-intro-title,.page-intro-aside,.designs-intro-title,.designs-intro-side { min-width:0; }

/* Home: a broad project canvas, offset benefits, and a personal introduction. */
.home-page .home-opening { padding-top:64px; }
.home-page .home-hero-grid { grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr); gap:44px; align-items:start; }
.home-page .home-hero-copy { padding-top:14px; }
.home-page .home-hero-copy h1.hero-service-title { font-size:clamp(36px,4.3vw,62px); line-height:1.08; }
.home-page .home-hero-preview { margin-top:58px; border-radius:4px 24px 4px 4px; padding:26px 22px 22px; }
.home-page .home-offer { margin-top:38px; border-width:0 0 0 3px; border-radius:0; background:transparent; padding:20px 0 20px 24px; }
.home-page .home-benefits { padding-top:80px; padding-bottom:64px; }
.home-page .home-section-heading { max-width:650px; margin-bottom:36px; }
.home-page .visual-benefit-grid { grid-template-columns:1.1fr 1fr 1fr; gap:26px; align-items:start; }
.home-page .visual-benefit-grid>article:nth-child(2) { margin-top:35px; }
.home-page .visual-benefit-grid>article:nth-child(3) { margin-top:70px; }
.home-page .home-seo { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; padding-top:46px; padding-bottom:46px; }
.home-page .home-project-grid { grid-template-columns:1.22fr 1fr 1fr 1fr; gap:18px; align-items:start; }
.home-page .home-project-card { border-radius:4px; }
.home-page .home-project-card:nth-child(even) { margin-top:28px; }
.home-page .strip-project-caption { padding:20px 28px 20px 18px; }
.home-page .strip-project-caption h3 { font-size:20px; }
.home-page .home-about { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:90px; align-items:start; padding-top:70px; padding-bottom:75px; }
.home-page .home-portrait-card { border-radius:4px; margin-top:65px; }
.home-page .home-about-copy { max-width:670px; }
.home-page .home-about-copy p.about-slogan { color:var(--lime); font-size:clamp(21px,2.2vw,28px); line-height:1.35; }
.home-page .closing { background:transparent; border-width:1px 0 0; border-radius:0; padding-top:65px; }
.home-page .inquiry-layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:70px; align-items:start; }
.home-page .inquiry-intro { padding-top:22px; }
.home-page .inquiry-form { background:var(--panel); border-radius:4px; }

/* Website designs: large, alternating project stories rather than a uniform card grid. */
.designs-page .designs-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.8fr); column-gap:64px; align-items:end; padding-top:70px; padding-bottom:55px; }
.designs-page .designs-hero h1 { font-size:clamp(40px,5.1vw,72px); line-height:1.09; letter-spacing:-2px; max-width:850px; }
.designs-page .designs-hero h1 span { display:inline; }
.designs-page .designs-hero-bottom { display:flex; flex-direction:column; align-items:start; gap:24px; margin:0 0 28px; }
.designs-page .designs-hero-bottom>p { font-size:15px; max-width:390px; }
.designs-page .designs-hero-bottom .button { font-size:12px; padding:15px 18px; gap:16px; }
.designs-page .designs-jump-links { font-size:12px; gap:14px 20px; }
.designs-page .featured-design { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:50px; align-items:start; }
.designs-page .featured-visual { border-radius:4px 24px 4px 4px; padding:38px 24px; }
.designs-page .featured-summary { padding-top:30px; text-align:left; }
.designs-page .concept-showcase { padding-top:50px; }
.designs-page .design-card-grid { display:flex; flex-direction:column; gap:65px; }
.designs-page .design-card-grid>.design-card { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:36px; border:0; border-radius:0; background:transparent; overflow:visible; align-items:start; }
.designs-page .design-card-grid>.design-card>.concept-device-pair { min-width:0; border:1px solid var(--line); border-radius:4px; padding-top:30px; padding-bottom:40px; }
.designs-page .design-card-grid>.design-card>.design-card-copy { padding:25px 0 0; min-width:0; text-align:left; }
.designs-page .design-card-grid>.design-card:nth-child(2) { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
.designs-page .design-card-grid>.design-card:nth-child(2)>.concept-device-pair { grid-column:2; grid-row:1; }
.designs-page .design-card-grid>.design-card:nth-child(2)>.design-card-copy { grid-column:1; grid-row:1; padding-right:10px; }
.designs-page .design-card-copy h3 { font-size:clamp(26px,2.6vw,35px); max-width:500px; }
.designs-page .design-card-copy .scope-price { margin-top:24px; }
.designs-page .design-card-copy .project-actions { gap:14px; }
.designs-page .design-card-copy .design-note { max-width:470px; }
.designs-page .designs-invitation { margin-top:18px; border-top:2px solid var(--lime); background:transparent; color:var(--ink); padding-top:40px; padding-bottom:48px; }
.designs-page .designs-invitation h2 span { color:var(--lime); }
.designs-page .designs-invitation .button { background:var(--lime); color:var(--bg); }

/* Brand design: a varied gallery followed by practical package information. */
.brand-design-page .brand-page-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:70px; align-items:end; padding-bottom:50px; }
.brand-design-page .brand-page-intro h1 { font-size:clamp(40px,5.4vw,74px); }
.brand-design-page .page-intro-aside p { margin:0 0 8px; max-width:380px; font-size:16px; color:var(--muted); }
.brand-design-page .brand-gallery-section { border-top:0; padding-top:8px; padding-bottom:65px; }
.brand-design-page .brand-gallery-section .section-heading { align-items:start; }
.brand-design-page .brand-gallery-section h2 { font-size:clamp(28px,3vw,40px); }
.brand-design-page .brand-gallery { grid-template-columns:repeat(12,minmax(0,1fr)); gap:30px 26px; align-items:start; }
.brand-design-page .brand-gallery figure { grid-column:span 4; border-radius:4px; background:transparent; border:0; }
.brand-design-page .brand-gallery figure:first-child { grid-column:span 7; }
.brand-design-page .brand-gallery figure:nth-child(2) { grid-column:span 5; margin-top:60px; }
.brand-design-page .brand-gallery figure>a { aspect-ratio:auto; height:230px; padding:24px; border:1px solid var(--line); border-radius:4px; }
.brand-design-page .brand-gallery figure:first-child>a { height:350px; }
.brand-design-page .brand-gallery figure:nth-child(2)>a { height:290px; }
.brand-design-page .brand-gallery img { max-height:100%; max-width:100%; }
.brand-design-page .brand-gallery figcaption { padding:18px 0 0; text-align:left; }
.brand-design-page .brand-gallery h3 { font-size:21px; }
.brand-design-page .brand-gallery figcaption p { margin-bottom:10px; }
.brand-design-page .brand-offer { border-top:1px solid var(--line); padding-top:50px; padding-bottom:55px; }
.brand-design-page .brand-package { grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); background:transparent; border:0; border-radius:0; gap:65px; }
.brand-design-page .brand-package>div:first-child { padding:0; }
.brand-design-page .brand-package-price { border-left:2px solid var(--lime); border-radius:0; padding:28px; align-self:start; background:#182012; }
.brand-design-page .brand-style-section { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:75px; align-items:start; padding-top:55px; }
.brand-design-page .style-sheet-example { justify-self:end; max-width:500px; border-radius:3px; }
.brand-design-page .brand-additions { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:0 60px; padding-top:50px; padding-bottom:55px; }
.brand-design-page .brand-additions-heading { margin:0; }
.brand-design-page .brand-additions-heading h2 { font-size:clamp(30px,3vw,42px); }
.brand-design-page .brand-additions-grid { grid-template-columns:1fr; gap:0; }
.brand-design-page .brand-additions-grid article { border:0; border-bottom:1px solid var(--line); padding:20px 0; border-radius:0; background:transparent; }
.brand-design-page .brand-additions-grid article:first-child { padding-top:0; }
.brand-design-page .brand-additions-note { grid-column:2; }

/* Services: visible prices and readable rows for the supporting services. */
.services-page .services-page-intro { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:65px; align-items:end; padding-bottom:50px; }
.services-page .services-page-intro h1 { font-size:clamp(38px,5.1vw,70px); }
.services-page .page-intro-aside p { margin:0 0 8px; max-width:380px; font-size:16px; color:var(--muted); }
.services-page .home-build-card { grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); border:0; border-top:2px solid var(--lime); border-radius:0; background:transparent; align-items:start; }
.services-page .home-build-summary { padding:34px 50px 30px 0; }
.services-page .home-build-summary h3 { font-size:clamp(30px,3vw,40px); }
.services-page .home-build-price { margin-top:34px; padding:28px; border-left:1px solid #577329; border-radius:0; }
.services-page .home-build-price .home-price-label strong { font-size:72px; }
.services-page .home-scope-details,.services-page .home-pricing-conditions { padding-left:0; padding-right:0; }
.services-page .home-build-card>.payment-policy { margin:24px 0; width:100%; border-radius:0; }
.services-page .home-support-heading { margin-top:45px; align-items:start; }
.services-page .extra-services-grid { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.services-page .extra-services-grid>.extra-service { display:grid; grid-template-columns:minmax(0,1fr) minmax(130px,.65fr) minmax(0,1.55fr); align-items:start; column-gap:32px; padding:28px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.services-page .service-row-title { min-width:0; }
.services-page .extra-service .service-row-title h4 { font-size:25px; line-height:1.2; margin:0; }
.services-page .service-row-title .extra-service-label { display:block; margin:0 0 10px; }
.services-page .extra-service>p.extra-service-price { margin:0; display:block; font-size:12px; }
.services-page .extra-service-price strong { display:block; font-size:38px; line-height:1.2; margin:4px 0; }
.services-page .service-row-copy { min-width:0; }
.services-page .service-row-copy>p { margin:0 0 16px; color:var(--muted); font-size:14px; }
.services-page .service-row-copy details { border-top:0; padding-top:0; margin-top:0; }
.services-page .service-row-copy .text-link { margin-top:18px; font-size:12px; }
.services-page .service-insight .insight-panel { border-radius:0; }

/* Stack each composition in reading order on smaller screens. */
@media(max-width:1100px) {
 .home-page .home-hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
 .home-page .home-hero-copy h1.hero-service-title { font-size:clamp(35px,4.3vw,48px); }
 .home-page .home-project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
 .home-page .home-project-card:nth-child(even) { margin-top:24px; }
 .home-page .home-seo,.home-page .home-about,.home-page .inquiry-layout { gap:40px; }
 .designs-page .designs-hero { column-gap:35px; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
 .designs-page .featured-design { gap:30px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
 .designs-page .design-card-grid>.design-card { gap:28px; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
 .designs-page .design-card-grid>.design-card:nth-child(2) { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
 .brand-design-page .brand-page-intro,.brand-design-page .brand-package,.brand-design-page .brand-style-section,.brand-design-page .brand-additions,.services-page .services-page-intro { gap:35px; }
 .brand-design-page .brand-gallery figure>a { height:190px; padding:18px; }
 .brand-design-page .brand-gallery figure:first-child>a { height:300px; }
 .brand-design-page .brand-gallery figure:nth-child(2)>a { height:240px; }
 .services-page .extra-services-grid>.extra-service { column-gap:22px; grid-template-columns:minmax(0,1fr) minmax(115px,.6fr) minmax(0,1.3fr); }
}
@media(max-width:800px) {
 .home-page .home-opening { padding-top:35px; }
 .home-page .home-hero-grid { grid-template-columns:1fr; gap:28px; }
 .home-page .home-hero-copy { padding-top:0; }
 .home-page .home-hero-copy h1.hero-service-title { font-size:clamp(38px,6.5vw,56px); }
 .home-page .home-hero-preview { margin-top:0; width:100%; max-width:680px; }
 .home-page .home-benefits { padding-top:50px; padding-bottom:42px; }
 .home-page .visual-benefit-grid { grid-template-columns:1fr; gap:32px; }
 .home-page .visual-benefit-grid>article:nth-child(n) { margin-top:0; }
 .home-page .home-seo,.home-page .home-about,.home-page .inquiry-layout { grid-template-columns:1fr; gap:30px; }
 .home-page .home-about { padding-top:45px; padding-bottom:45px; }
 .home-page .home-portrait-card { margin-top:0; max-width:340px; }
 .home-page .home-project-card:nth-child(even) { margin-top:0; }
 .home-page .closing { padding-top:42px; }
 .home-page .inquiry-intro { padding-top:0; }
 .designs-page .designs-hero,.brand-design-page .brand-page-intro,.services-page .services-page-intro { grid-template-columns:1fr; gap:26px; padding-top:40px; padding-bottom:35px; }
 .designs-page .designs-hero-bottom { gap:20px; margin-bottom:22px; }
 .designs-page .designs-hero-bottom>p,.page-intro-aside p { max-width:620px; }
 .designs-page .featured-design { grid-template-columns:1fr; }
 .designs-page .featured-summary { padding-top:0; }
 .designs-page .design-card-grid { gap:42px; }
 .designs-page .design-card-grid>.design-card,.designs-page .design-card-grid>.design-card:nth-child(2) { grid-template-columns:1fr; gap:24px; }
 .designs-page .design-card-grid>.design-card:nth-child(2)>.concept-device-pair,.designs-page .design-card-grid>.design-card:nth-child(2)>.design-card-copy { grid-column:auto; grid-row:auto; }
 .designs-page .design-card-grid>.design-card>.design-card-copy { padding:0; }
 .designs-page .design-card-copy .design-note { max-width:650px; }
 .brand-design-page .brand-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; }
 .brand-design-page .brand-gallery figure:nth-child(n) { grid-column:auto; margin-top:0; }
 .brand-design-page .brand-gallery figure:first-child { grid-column:1/-1; }
 .brand-design-page .brand-gallery figure>a,.brand-design-page .brand-gallery figure:nth-child(2)>a { height:230px; }
 .brand-design-page .brand-gallery figure:first-child>a { height:320px; }
 .brand-design-page .brand-package,.brand-design-page .brand-style-section,.brand-design-page .brand-additions { grid-template-columns:1fr; gap:28px; }
 .brand-design-page .brand-package-price { width:100%; border-top:0; }
 .brand-design-page .style-sheet-example { justify-self:start; }
 .brand-design-page .brand-additions-note { grid-column:auto; margin-top:0; }
 .services-page .home-build-card { grid-template-columns:1fr; }
 .services-page .home-build-summary { padding:28px 0; }
 .services-page .home-build-price { margin-top:0; border-top:0; }
 .services-page .extra-services-grid>.extra-service { grid-template-columns:minmax(0,1fr) minmax(125px,.6fr); gap:20px; }
 .services-page .service-row-copy { grid-column:1/-1; }
}
@media(max-width:480px) {
 .home-page .home-hero-copy h1.hero-service-title { font-size:38px; }
 .home-page .home-hero-preview { padding:22px 14px 17px; }
 .home-page .home-project-grid { grid-template-columns:1fr; }
 .home-page .home-offer { padding-left:18px; }
 .designs-page .designs-hero h1 { font-size:39px; letter-spacing:-1.4px; }
 .designs-page .designs-hero-bottom .button { width:auto; }
 .designs-page .featured-visual { padding:22px 14px; }
 .designs-page .design-card-grid>.design-card>.concept-device-pair { padding:18px 35px 33px 12px; }
 .brand-design-page .brand-gallery { grid-template-columns:1fr; }
 .brand-design-page .brand-gallery figure:first-child { grid-column:auto; }
 .brand-design-page .brand-gallery figure:nth-child(n)>a { height:260px; }
 .brand-design-page .brand-package-price { padding:24px; }
 .brand-design-page .brand-page-intro h1,.services-page .services-page-intro h1 { font-size:39px; letter-spacing:-1.5px; }
 .services-page .home-build-price { padding:24px; }
 .services-page .extra-services-grid>.extra-service { grid-template-columns:minmax(0,1fr) minmax(110px,.6fr); column-gap:15px; }
 .services-page .extra-service .service-row-title h4 { font-size:23px; }
 .services-page .extra-service-price strong { font-size:34px; }
}

/* Local SEO is a core website benefit, presented as a distinct feature. */
.home-page section.home-seo-feature{display:block;padding-top:12px;padding-bottom:24px;border:0}
.seo-feature-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:34px 50px;background:linear-gradient(115deg,#233313 0%,#151e10 60%,#10170e 100%);border:1px solid #5b782a;border-left:6px solid var(--lime);border-radius:4px 24px 4px 4px;padding:40px;box-shadow:0 14px 40px #0002}
.home-page .seo-feature-heading .eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:10px;letter-spacing:1.2px;color:var(--lime);margin:0 0 24px}
.seo-feature-heading .eyebrow>span{display:inline-block;padding:6px 9px;border:1px solid #748d48;border-radius:3px;color:#e1ecd4;font-size:10px;letter-spacing:0;text-transform:none;line-height:1.4}
.home-page .seo-feature-heading h2{font-size:clamp(34px,4.4vw,57px);line-height:1.08;letter-spacing:-1.8px;margin:0;text-wrap:balance}
.seo-feature-copy{align-self:end;min-width:0}
.home-page .seo-feature-copy .seo-feature-lead{font-size:21px;line-height:1.4;color:var(--ink);margin:0 0 18px}
.home-page .seo-feature-copy>p:not(.seo-feature-lead){font-size:15px;line-height:1.75;color:#c4ceba;margin:0}
.seo-feature-benefits{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;list-style:none;padding:26px 0 0;margin:2px 0 0;border-top:1px solid #4d6135}
.seo-feature-benefits li{display:flex;align-items:start;gap:12px;min-width:0}
.seo-feature-benefits li>span{font-size:24px;line-height:1;color:var(--lime)}
.seo-feature-benefits h3{font-size:17px;font-weight:500;line-height:1.3;letter-spacing:-.2px;margin:0 0 9px;color:var(--ink)}
.seo-feature-benefits p{font-size:12px;line-height:1.7;color:#b6c4a8;margin:0}
@media(max-width:1000px){.seo-feature-panel{grid-template-columns:1fr;gap:26px;padding:32px}.seo-feature-copy{max-width:700px}.seo-feature-benefits{gap:20px}.home-page .seo-feature-heading h2{font-size:clamp(35px,5vw,49px)}}
@media(max-width:600px){.seo-feature-panel{padding:27px 22px;border-left-width:4px;gap:25px}.home-page .seo-feature-heading .eyebrow{font-size:9px;gap:10px;margin-bottom:22px}.home-page .seo-feature-heading h2{font-size:35px;letter-spacing:-1px}.home-page .seo-feature-copy .seo-feature-lead{font-size:19px}.home-page .seo-feature-copy>p:not(.seo-feature-lead){font-size:14px}.seo-feature-benefits{grid-template-columns:1fr;gap:23px;padding-top:25px}.seo-feature-benefits h3{font-size:18px}.seo-feature-benefits p{font-size:13px}.seo-feature-benefits li>span{font-size:25px}}

/* Match the introductory offer to the local SEO feature treatment. */
.home-page aside.home-offer{background:linear-gradient(115deg,#233313 0%,#151e10 60%,#10170e 100%);color:var(--ink);border:1px solid #5b782a;border-left:6px solid var(--lime);border-radius:4px 24px 4px 4px;padding:28px 32px;gap:24px;box-shadow:0 14px 40px #0002}
.home-page aside.home-offer .eyebrow{color:var(--lime);font-size:9px;font-weight:600;letter-spacing:1px}
.home-page aside.home-offer div>span{color:#c4ceba}
.home-page aside.home-offer strong{color:var(--lime)}
.home-page aside.home-offer>.text-link{color:var(--lime);font-weight:600}
.home-page aside.home-offer>.text-link:hover{text-decoration:underline}
.home-page aside.home-offer>.text-link:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
@media(max-width:480px){.home-page aside.home-offer{padding:24px 22px;border-left-width:4px;gap:20px}}

/* Keep the designer label with the portrait at every screen size. */
.home-page .home-designer-profile{margin-top:65px;max-width:390px;min-width:0}
.home-page .home-designer-profile>.eyebrow{text-align:center;margin:0 0 16px}
.home-page .home-designer-profile .home-portrait-card{margin-top:0}
@media(max-width:800px){.home-page .home-designer-profile{margin-top:0;max-width:340px}}