/* Supplied 1440px reference, mapped to the existing Boons twelve-column grid.
   Scope excludes the live process renderer and its typography/geometry. */
.reference-design{--margin:2.5rem;--ref-secondary:var(--muted);--ref-intro:var(--muted);--ref-line:var(--line);--ref-space:9.375rem}
.reference-design .webdesign-detail>section:not(.detail-deliverables) h2{font-size:4.5rem;line-height:1.05;letter-spacing:-0.09375rem}
.reference-design .webdesign-detail>section:not(.detail-deliverables) .section-label{font-size:var(--fs-link);line-height:1.3;font-weight:400;letter-spacing:0}
.reference-design .webdesign-detail>section:not(.detail-deliverables) p{letter-spacing:var(--ls-paragraph)}
.reference-design main .button{min-height:3.0625rem;padding:0.75rem 1.5rem;font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--ls-btn);gap:1rem}
.reference-design .service-inquiry .button{min-height:2.5625rem;padding:0.625rem 1rem}
/* Introductory text and image keep the specified 40 / 100 / 150 rhythm. */
.reference-design .webdesign-detail .detail-hero{padding-block:9.375rem 6.25rem}
.reference-design .webdesign-detail .detail-hero h1{font-size:4.5rem;line-height:1.05;letter-spacing:-0.054rem;grid-column:1/5;max-width:none;white-space:nowrap}
.reference-design .detail-hero>.section-label{margin-bottom:2.5rem}
.reference-design .detail-hero-bottom{margin-top:2.5rem}
.reference-design .detail-hero-bottom>p{font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph);color:var(--ref-intro);max-width:27.3125rem}
.reference-design .detail-hero-bottom>.button{font-size:var(--fs-btn);gap:0.75rem}
.reference-design .webdesign-detail .detail-art{padding-bottom:9.375rem}
.reference-design .detail-art .reference-hero-art{height:auto;aspect-ratio:1360/842;border-radius:1.25rem;overflow:hidden}
.reference-design .reference-hero-art figcaption{left:1.25rem;bottom:1.25rem;padding:0.375rem 0.625rem;border-radius:0.375rem;background:var(--scrim-strong);font-size:var(--fs-tiny);line-height:var(--lh-tiny);letter-spacing:var(--ls-tiny)}
/* A two-column definition list, with number and label treated as one row. */
.reference-design .webdesign-detail .reference-metrics{padding-block:0 9.375rem}
.reference-design .reference-metrics #results-title{max-width:41.75rem;font-size:3.625rem;line-height:1.2;letter-spacing:-0.08125rem}
.reference-metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5625rem;margin:6.25rem 0 0;padding:0}
.reference-metric{display:flex;align-items:flex-end;gap:3.125rem;min-width:0;min-height:7.4375rem;padding-block:1.875rem;border-top:1px solid var(--ref-line)}
.reference-metric dd{display:flex;flex:0 0 9.375rem;align-items:baseline;justify-content:flex-end;gap:0.125rem;margin:0;font:400 4.5rem/.8 var(--serif);letter-spacing:-0.09375rem;white-space:nowrap}
.reference-metric dd small{font:inherit;font-size:3rem;line-height:.9}
.reference-metric dt{font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph);color:var(--ref-secondary)}
.reference-design .reference-metrics-note{margin-top:1.5rem;font-size:var(--fs-tiny);line-height:var(--lh-tiny);letter-spacing:var(--ls-tiny);color:var(--ref-secondary)}
/* Story: the content starts on column five and body copy spans four columns. */
.reference-design .webdesign-detail .detail-story{padding-block:9.375rem}
.reference-design .detail-story>div{grid-column:5/9}
.reference-design .detail-story h2{margin-bottom:2.5rem}
.reference-design .detail-story p{font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph);color:var(--ref-secondary);margin-top:0;max-width:27.25rem}
.reference-design .detail-story p+p{margin-top:1.5625rem}
/* The live process stack is intentionally absent from these overrides. */
/* Studio: an 800px hero, then two complementary features under its right half. */
.reference-design .webdesign-detail .reference-studio{margin-inline:0.375rem;padding:9.375rem 2.125rem;border-radius:1.25rem;background:var(--night);color:var(--white)}
.reference-studio-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.reference-studio-left{grid-column:1/6;min-height:50rem;display:flex;flex-direction:column;justify-content:space-between}
.reference-design .reference-studio .reference-studio-left>.section-label{font-size:var(--fs-meta);color:var(--white)}
.reference-studio-pitch{display:flex;flex-direction:column;gap:2.5rem}
.reference-studio-pitch h2{max-width:34.5rem}
.reference-studio-cta{display:flex;flex-direction:column;align-items:flex-start;gap:1.875rem}
.reference-design .reference-studio-cta p{max-width:16.25rem;font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph);color:var(--white)}
.reference-studio-image{grid-column:7/13;height:50rem;overflow:hidden;border-radius:0.75rem;min-width:0}
.reference-studio-image .generated-art{height:100%;width:100%;margin:0}
.reference-studio-features{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5625rem;margin-top:9.375rem}
.reference-studio-features article{padding-right:2.5rem}
.reference-studio-features article:first-child{grid-column:7/10}
.reference-studio-features article:last-child{grid-column:10/13}
.reference-feature-label{display:block;margin-bottom:1.25rem;color:var(--muted-on-dark);font-size:var(--fs-meta);line-height:2.4}
.reference-studio-features article>div{display:flex;flex-direction:column;gap:1.875rem}
.reference-design .reference-studio-features h3{font-size:2.625rem;line-height:1.1;letter-spacing:-0.0375rem}
.reference-design .reference-studio-features p,.reference-design .reference-studio-features .editorial-link{font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph);color:var(--white)}
.reference-design .reference-studio-features .editorial-link{align-self:flex-start;border:0;padding:0;text-decoration:underline;text-underline-offset:0.1875rem}
.reference-design .reference-studio-features .editorial-link:hover{color:var(--red)}
/* Project placeholders have the exact final card proportions, without fake links. */
.reference-design .webdesign-detail .reference-work{padding-block:9.375rem}
.reference-work .service-section-head p{max-width:27.25rem;margin-top:2.5rem;font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph);color:var(--ref-secondary)}
.reference-work .case-preview-grid{margin-top:9.375rem}
.reference-work .case-preview:first-child{grid-column:1/8}
.reference-work .case-preview:last-child{grid-column:9/13;margin-top:9.625rem}
.reference-work .case-preview-art{height:37.3125rem;border-radius:1.5rem}
.reference-work .case-preview-art .generated-art{height:100%;aspect-ratio:auto;overflow:hidden}
.reference-work .case-status{top:1.25rem;left:1.25rem;padding:0.4375rem 0.75rem;font-size:0.875rem;font-weight:400;line-height:1.125rem;letter-spacing:-0.035rem;text-transform:none}
.reference-case-category{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3;padding:0.375rem 0.625rem;border-radius:0.375rem;background:var(--scrim-strong);color:var(--white);font-size:var(--fs-tiny);font-weight:400;line-height:var(--lh-tiny);letter-spacing:var(--ls-tiny)}
/* FAQ: a full-width line, then content aligned with the story. */
.reference-design .webdesign-detail .service-questions{display:block;padding-block:9.375rem 4.6875rem;border-top:0}
.reference-faq-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);padding-top:2rem;border-top:1px solid var(--ref-line)}
.reference-design .reference-faq-layout>.section-label{grid-column:1/5;padding:0;font-size:var(--fs-meta)}
.reference-faq-layout>.service-question-content{grid-column:5/13}
.reference-faq-layout .service-faq-list{margin-top:4.6875rem}
.reference-faq-layout .service-faq-list details{border-color:var(--ref-line)}
.reference-faq-layout .service-faq-list summary{padding-block:1.5625rem;font-size:var(--fs-faq);font-weight:400;line-height:var(--lh-faq);letter-spacing:var(--ls-faq)}
.reference-faq-layout .service-faq-list summary>span{width:1.625rem;font-size:var(--fs-faq)}
.reference-faq-layout .service-faq-list details[open] summary{padding-bottom:0}
.reference-design .reference-faq-layout .service-faq-list p{max-width:41.6875rem;margin-top:1.5625rem;padding-bottom:1.5625rem;font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph);color:var(--ref-secondary)}
/* Contact panel and footer use the supplied structure with real contact details. */
.reference-design .webdesign-detail .reference-contact{margin:4.6875rem 0.375rem 9.375rem;padding:6.25rem 2.125rem;border-top:1px solid var(--ref-line);border-radius:1.25rem;background:var(--night)}
.reference-contact .final-cta-grid{row-gap:0}
.reference-design .reference-contact .section-label{font-size:var(--fs-meta);padding-top:0}
.reference-contact .final-cta-grid h2{max-width:34.5rem}
.reference-design .reference-contact .final-cta-grid>p{grid-column:5/13;max-width:22.5rem;margin-top:2.5rem;font-size:var(--fs-paragraph);line-height:var(--lh-paragraph);letter-spacing:var(--ls-paragraph)}
.reference-contact .final-cta-action{margin-top:1.875rem}
.reference-design .reference-contact .button{min-height:2.5625rem;padding:0.6875rem 0.9375rem;gap:0.5rem;font-size:var(--fs-btn);line-height:var(--lh-btn);letter-spacing:var(--ls-btn)}
.reference-footer{padding-bottom:1.875rem;border-top:1px solid var(--ref-line);background:var(--paper);color:var(--ink);letter-spacing:0}
.reference-footer-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5625rem;padding:2rem 2.5rem 0}
.reference-design .reference-footer-tagline{max-width:20rem;font-size:var(--fs-faq);font-weight:400;line-height:1.3;letter-spacing:0}
.reference-footer-columns{display:grid;grid-template-columns:12.8125rem minmax(0,1fr);gap:1.5625rem}
.reference-footer-columns>nav,.reference-footer-columns>div{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;font-size:var(--fs-meta);line-height:var(--lh-meta)}
.reference-footer a{transition:color .28s}
.reference-footer a:hover{color:var(--red)}
.reference-footer-wordmark{margin-top:6.25rem;padding-inline:2.1875rem;font:400 min(17.7083vw,15.9375rem)/.93333 var(--serif);letter-spacing:-.0196em;white-space:nowrap}
.reference-footer-bottom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5625rem;padding:1.25rem 2.5rem 0;font-size:var(--fs-meta);line-height:var(--lh-meta)}
.reference-footer-bottom>span{font-weight:400}
.reference-footer-bottom>div{display:flex;gap:1.5625rem}
.reference-footer-bottom>div>span{flex:0 1 12.875rem}
@media(max-width:1199px) and (min-width:768px){
 .reference-design{--margin:1.75rem;--ref-space:6.25rem}
 .reference-design .webdesign-detail>section:not(.detail-deliverables) h2,.reference-design .webdesign-detail .detail-hero h1{font-size:3.75rem}
 .reference-design .webdesign-detail .detail-hero{padding-top:6.25rem}
 .reference-design .webdesign-detail .detail-art{padding-bottom:6.25rem}
 .reference-design .webdesign-detail .reference-metrics{padding-bottom:6.25rem}
 .reference-design .webdesign-detail .detail-story{padding-block:6.25rem}
 .reference-design .detail-story>div{grid-column:4/11}
 .reference-metric{gap:1.5625rem}.reference-metric dd{flex-basis:8.125rem;font-size:4rem}.reference-metric dd small{font-size:2.375rem}
 .reference-design .webdesign-detail .reference-studio{padding:6.25rem 1.375rem}
 .reference-studio-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:3.125rem}
 .reference-studio-left,.reference-studio-image{grid-column:auto;min-height:40.625rem;height:40.625rem}
 .reference-studio-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5625rem;margin-top:6.25rem}
 .reference-studio-features article:first-child,.reference-studio-features article:last-child{grid-column:auto}
 .reference-work .case-preview-grid{column-gap:3.75rem}
 .reference-work .case-preview-art{height:31.25rem}
}
@media(max-width:767px){
 .reference-design{--margin:1.25rem;--ref-space:4.5rem}
 .reference-design .webdesign-detail>section:not(.detail-deliverables) h2,.reference-design .webdesign-detail .detail-hero h1{font-size:clamp(2.625rem,9vw,3.75rem);line-height:1.05;letter-spacing:-1px}
 .reference-design .webdesign-detail>section:not(.detail-deliverables) .section-label{font-size:0.875rem}
 .reference-design .webdesign-detail .detail-hero{display:block;padding-block:4.5rem 3rem}
 .reference-design .detail-hero>.section-label{margin-bottom:1.75rem}
 .reference-design .webdesign-detail .detail-hero h1{white-space:normal}
 .reference-design .detail-hero-bottom{display:block;margin-top:1.75rem}
 .reference-design .detail-hero-bottom>p{max-width:27.3125rem}
 .reference-design .detail-hero-bottom>.button{margin-top:2rem}
 .reference-design .detail-art .reference-hero-art{aspect-ratio:4/3;border-radius:0.875rem}
 .reference-design .webdesign-detail .detail-art{padding-bottom:4.5rem}
 .reference-design .reference-hero-art figcaption{left:0.875rem;bottom:0.875rem}
 .reference-design .webdesign-detail .reference-metrics{padding-bottom:4.5rem}
 .reference-design .reference-metrics #results-title{font-size:2.625rem;line-height:1.2;letter-spacing:-1px}
 .reference-metrics-grid{grid-template-columns:1fr;margin-top:3rem}
 .reference-metric{min-height:6.25rem;gap:1.5rem}
 .reference-metric dd{flex-basis:8.125rem;font-size:4rem}.reference-metric dd small{font-size:2.375rem}
 .reference-design .webdesign-detail .detail-story{display:block;padding-block:4.5rem}
 .reference-design .detail-story>.section-label{display:block;margin-bottom:2rem}
 .reference-design .detail-story>div{margin:0}
 .reference-design .detail-story h2{margin-bottom:1.75rem;white-space:normal}
 .reference-design .webdesign-detail .reference-studio{padding:4rem 0.875rem}
 .reference-studio-top{display:block}
 .reference-studio-left{min-height:0;height:auto;gap:3rem}
 .reference-studio-pitch{gap:2.5rem}
 .reference-studio-image{height:auto;aspect-ratio:667/800;margin-top:2.5rem}
 .reference-studio-features{grid-template-columns:1fr;gap:3rem;margin-top:4rem}
 .reference-studio-features article:first-child,.reference-studio-features article:last-child{grid-column:auto;padding-right:0}
 .reference-design .reference-studio-features h3{font-size:2.625rem}
 .reference-design .webdesign-detail .reference-work{padding-block:4.5rem}
 .reference-work .service-section-head{display:block}
 .reference-work .service-section-head>.section-label{margin-bottom:2rem}
 .reference-work .service-section-head p{margin-top:1.75rem}
 .reference-work .case-preview-grid{display:block;margin-top:4.5rem}
 .reference-work .case-preview-art{height:auto;aspect-ratio:4/3;border-radius:1.5rem}
 .reference-work .case-preview+.case-preview{margin-top:2rem}
 .reference-work .case-status{left:1.25rem;top:1.25rem}
 .reference-design .webdesign-detail .service-questions{padding-block:4.5rem 2.25rem}
 .reference-faq-layout{display:block;padding-top:2rem}
 .reference-design .reference-faq-layout>.section-label{display:block;margin-bottom:2rem}
 .reference-faq-layout .service-faq-list{margin-top:2.5rem}
 .reference-faq-layout .service-faq-list summary{font-size:var(--fs-faq);line-height:var(--lh-faq)}
 .reference-design .webdesign-detail .reference-contact{margin:2.25rem 0.375rem 4.5rem;padding:4rem 0.875rem}
 .reference-contact .final-cta-grid>p{margin-top:2.5rem}
 .reference-footer-top,.reference-footer-bottom{padding-inline:1.25rem;grid-template-columns:1fr;row-gap:2rem}
 .reference-footer-columns{grid-template-columns:1fr;gap:2rem}
 .reference-footer-wordmark{margin-top:4rem;padding-inline:0.75rem}
 .reference-footer-bottom>div{flex-wrap:wrap;gap:1rem}
 .reference-footer-bottom>div>span{flex-basis:auto}
}
/* Smaller utility labels inside the dark panel, FAQ and closing CTA. */
.reference-design #craft .reference-studio-left>.section-label,.reference-design #faq .reference-faq-layout>.section-label,.reference-design #contact .section-label{font-size:var(--fs-meta)}
.reference-design .reference-contact h2 .orange-dot{color:inherit}
@media(min-width:768px) and (max-width:1199px){.reference-design .detail-story>div{grid-column:5/13}}