/* Slate, warm ivory and restrained gold; one visual language down the page. */
:root{--studio-ink:var(--brand-ink);--studio-muted:var(--brand-muted);--studio-paper:var(--brand-paper);--studio-gold:var(--brand-gold);--studio-line:#ddd7cb}
body{font-family:Arial,Helvetica,sans-serif}main>.section{scroll-margin-top:24px}.kicker{color:var(--studio-gold);font-size:11px;letter-spacing:3px;font-weight:600}.section h2,.contact h2{font-size:clamp(32px,4vw,56px);font-weight:700;line-height:1.08;letter-spacing:-1.7px}.section h2 span,.contact h2 span{color:var(--studio-gold)}
/* No outlines on hover: a soft surface and a lit gold circle. */
.service-track .service-item{border:0!important;border-radius:12px;box-shadow:none;transition:background .25s,filter .25s}.service-track .service-item:is(:hover,:focus-visible),.preview-service-hover .service-item{box-shadow:none}.service-track .service-item h3{font-weight:700;letter-spacing:.25px}.service-track .service-estimate{font-weight:400}.service-track .service-estimate strong{font-weight:700}.service-no{color:var(--brand-muted)}.service-track .service-item>b{border-color:var(--brand-gold);color:var(--brand-ink);transition:background .25s,color .25s,box-shadow .25s,transform .25s}.custom-service-style .service-item:is(:hover,:focus-visible)>b,.custom-service-style.preview-service-hover .service-item>b{background:linear-gradient(140deg,#ffe1a0,var(--brand-gold-bright));color:#4b3b21;border-color:transparent;box-shadow:0 0 14px #e4ad4355,0 4px 10px #a87e2525}.service-item:focus-visible{outline:2px solid #ae873e;outline-offset:3px}
.hero-menu-group nav a{font-weight:600}.hero-menu-group>.outline{border-radius:24px}.hero .gold{border-radius:8px;box-shadow:0 6px 20px #e4ad4320}.hero .play i{transition:background .25s,box-shadow .25s}.hero .play:hover i{background:var(--brand-gold-bright);color:var(--brand-ink);box-shadow:0 0 16px #e4ad4360}
/* Portfolio: spacious imagery, quiet captions, gold as the signpost. */
#works{background:var(--brand-paper);color:var(--studio-ink);padding-bottom:68px;border-bottom:1px solid var(--studio-line)}#works h2{margin:12px 0 30px}#works .kicker{margin-bottom:0}#works .real-project{border:0;border-radius:18px;background:#fff;box-shadow:0 7px 24px #42495b0a;overflow:hidden;transition:box-shadow .3s}#works .real-project:hover{box-shadow:0 12px 28px #42495b14}#works .project-devices{background:radial-gradient(ellipse at 50% 90%,#d7c69b35,transparent 70%),#f0eee7}#works .real-project-caption{padding:22px 24px 10px}#works .real-project-caption h3{font-size:23px;letter-spacing:-.5px;color:var(--studio-ink)}#works .real-project-caption p{color:var(--studio-muted);font-size:12px;line-height:1.6}#works .real-project-caption small{color:var(--studio-gold);font-size:9px;letter-spacing:1px}#works .real-project-caption>span{background:#faf6ec;border:0;color:var(--studio-gold)}#works .real-project-status{padding:8px 24px 22px;color:var(--brand-muted);letter-spacing:1.2px}.studio-carousel-arrow{transition:background .2s,box-shadow .2s}.studio-carousel-arrow:hover:not(:disabled){box-shadow:0 0 16px #d9ab4940}
/* Process keeps the existing illustrations and clear linear timeline. */
#steps{background:#edf0f5;padding:66px 0 60px;color:var(--studio-ink);border-bottom:1px solid #dce0e8}#steps h2{margin:12px 0 25px}#steps .story-scene{opacity:1;height:180px}#steps .process-collage{max-width:260px;filter:saturate(.72)}#steps .story-step h3{font-size:18px;color:var(--studio-ink);margin-top:22px}#steps .story-step p{color:var(--studio-muted);font-size:13px}#steps .story-node{width:44px;height:44px;background:#f7f8fb;border:1px solid #c8b482;color:var(--brand-ink);box-shadow:0 0 0 7px #edf0f5}#steps .is-active .story-node{background:#f9e7bb;border-color:#d0a558;color:var(--brand-ink);box-shadow:0 0 0 7px #edf0f5,0 0 16px #d9ab4930}#steps .story-track{background:#d1c6ac}
/* Compact comments on a calm slate surface. */
#reviews{background:#505568;padding:56px 0 48px;border:0;color:var(--brand-white)}#reviews h2 span{color:var(--brand-gold)}#reviews .kicker{color:var(--brand-gold)}#reviews .testimonials-intro{color:#d5d7df;font-size:13px;line-height:1.8}#reviews .testimonial-card{background:#ffffff08;border:1px solid #ffffff15;border-radius:16px;padding:0 18px 18px;box-shadow:none}#reviews .testimonial-card:hover{background:#ffffff0d}#reviews .testimonial-comment{padding-top:20px;min-height:122px}#reviews blockquote p{color:#f2f2f6;font-size:13px;line-height:1.65}#reviews blockquote:before{color:var(--brand-gold)}#reviews .testimonial-top>span:first-child{border:0;background:#ffffff08;border-radius:20px;color:#e7d6af;font-size:8px}#reviews .testimonial-deliverables{color:var(--brand-gold)}#reviews .testimonial-deliverables svg{stroke:var(--brand-gold)}#reviews .review-project-summary,#reviews figcaption{border-color:#ffffff18}#reviews .testimonial-project{border:2px solid #cfb47870;box-shadow:0 0 0 5px #ffffff04}#reviews .review-work p{color:#e1e2e9;font-size:11px;line-height:1.6}#reviews .review-work>small,#reviews .review-example{color:#c5c8d3}#reviews figcaption strong{color:#f5f4f7;font-size:12px}#reviews figcaption small{color:#c8c5bd}#reviews .testimonial-avatar{background:#e3c28115;border-color:#e3c28140;color:var(--brand-gold)}#reviews .testimonials-bottom a{color:var(--brand-gold)}#reviews .testimonials-note{color:#bec2cf}#reviews .reviews-carousel-frame{padding:0}#reviews .studio-carousel-arrow{background:#5b6075;border-color:#d4b77765;color:var(--brand-gold)}
/* Benefits: white paper cards with gold symbols, readable gray body text. */
#why{background:var(--brand-paper);padding:68px 0 58px;border-bottom:1px solid var(--studio-line);color:var(--studio-ink)}#why .value-card{border:0;border-radius:18px;background:#fff;box-shadow:0 5px 18px #42495b07;padding:26px;transition:background .25s,box-shadow .25s;transform:none}#why .value-card:hover{background:#fffdf8;transform:none;box-shadow:0 9px 26px #42495b12}#why .value-card h3{font-size:19px;color:var(--studio-ink)}#why .value-card p{font-size:13px;line-height:1.75;color:var(--studio-muted)}#why .value-symbol{background:#faf6eb;border:0;color:var(--studio-gold)}#why .value-symbol svg{stroke:var(--brand-gold)}#why .value-top>span{color:var(--brand-muted);font-size:9px}#why .value-outcome{border-color:#ece8de;color:var(--brand-ink);font-size:11px}#why .values-intro{color:var(--studio-muted);font-size:14px;line-height:1.8}#why .values-bottom{justify-content:flex-end;margin-top:26px}
/* Calculator: light controls, slate estimate, the same gold CTA. */
#prices{background:#edf0f5;padding:66px 0;color:var(--studio-ink);border:0}#prices h2{margin:12px 0 30px}.calc-controls{border:0;border-radius:18px;padding:30px;box-shadow:0 7px 25px #42495b08}.calc-field>span,.calc-extras legend,.calc-parameter>label{font-size:11px;letter-spacing:1px;color:var(--studio-ink)}.calc-field select{background:#f7f8fa;border-color:#e1e4eb;border-radius:10px;color:var(--studio-ink);font-size:14px}.calc-extras label{background:#f7f8fa;border-color:transparent;border-radius:10px;padding:14px}.calc-extras label:hover,.calc-extras label:has(input:checked){background:#f6efdf;border-color:transparent}.calc-extras span{font-size:12px;color:#555d6f}.calc-extras b{color:var(--brand-ink);font-size:12px}.calc-range-controls input[type=number]{border-color:#e1e4eb;background:#f7f8fa;border-radius:8px;color:var(--brand-ink)}.calc-result{background:linear-gradient(150deg,#505568,#62697f);border:0;border-radius:18px;padding:32px}.calc-result strong{color:#efd098;font-size:clamp(36px,4vw,54px)}.calc-result a{border-radius:9px;background:linear-gradient(120deg,#f0c66b,#e1ae49);color:#423920;transition:filter .2s}.calc-result a:hover{filter:brightness(1.06)}.calc-breakdown b{color:#e9c886}.calc-help{color:#7b8190}
/* Final invitation and footer close the same palette. */
#contact{background:var(--brand-paper);padding:72px 0;color:var(--studio-ink)}#contact h2{margin-top:14px}#contact .contact-grid>div>p:not(.kicker){color:var(--studio-muted);font-size:14px;line-height:1.8;max-width:440px}#contact form{background:#fff;border-radius:18px;padding:30px;box-shadow:0 8px 28px #42495b08}#contact form label{color:#7b8190;font-size:10px;letter-spacing:1px}#contact input,#contact textarea{color:var(--studio-ink);border-color:#e3e4e9;font-size:14px}#contact input:focus,#contact textarea:focus{outline:none;border-color:var(--brand-gold)}#contact form button{border:0;border-radius:9px;background:linear-gradient(120deg,#f0c66b,#e1ae49);color:#423920;cursor:pointer;transition:filter .2s}#contact form button:hover{filter:brightness(1.06)}#contact form small{color:#9599a3;font-size:9px}.footer{background:#494e60;border:0;padding:30px 0}.footer p{color:#c7cad4;font-size:11px}
@media(min-width:901px){#reviews>.shell{width:min(1180px,calc(100% - 144px))}#reviews .studio-carousel-arrow:first-child{left:-60px}#reviews .studio-carousel-arrow:last-child{right:-60px}}
@media(max-width:900px){#reviews .studio-carousel-arrow{display:none}.hero-menu-group nav a:after{bottom:-4px}#steps .story-scene{height:145px}}
@media(max-width:650px){.section h2,.contact h2{font-size:34px;letter-spacing:-1px}.kicker{font-size:10px;letter-spacing:2.5px}#works{padding-bottom:42px}#works .real-project-caption{padding:20px}#works .real-project-status{padding-left:20px}#steps,#reviews,#why,#prices,#contact{padding-top:44px;padding-bottom:42px}#steps .story-scene{height:145px}#steps .story-step h3{font-size:20px}#reviews .testimonial-comment{min-height:0}#reviews .testimonial-card{padding:0 16px 16px}#why .value-card{padding:22px 18px}.calc-controls,.calc-result,#contact form{padding:24px}.price-calculator{gap:16px}#contact .contact-grid{gap:28px}}
@media(prefers-reduced-motion:reduce){.service-track .service-item,.service-track .service-item>b,.hero .play i,#works .real-project,#why .value-card{transition:none}}
#works h2,#steps h2,#reviews h2,#why h2,#prices h2{font-size:clamp(32px,4vw,56px);line-height:1.08;letter-spacing:-1.7px}#why .values-heading h2 span{color:var(--studio-gold)}
@media(max-width:650px){#works h2,#steps h2,#reviews h2,#why h2,#prices h2{font-size:34px;letter-spacing:-1px}}
/* The hero, services and portfolio now share one slate canvas. */
#works{background:var(--hero-shared-bg,var(--brand-slate));color:#f8f8fa;border:0}#works:after{display:none}#works>.shell>.kicker{color:var(--brand-gold-bright)}#works h2{color:#f8f8fa}#works h2 span{color:var(--brand-gold-bright)}.service-track .service-no{color:#d7c394}.service-track .service-item>b{border-color:#e4ad4380;color:var(--brand-gold-bright)}.custom-service-style .service-item:is(:hover,:focus-visible)>b,.custom-service-style.preview-service-hover .service-item>b{background:linear-gradient(140deg,#ffe1a0,var(--brand-gold-bright));box-shadow:0 0 18px #e4ad4360;color:#4b3b21}#works .studio-carousel-arrow{background:#ffffff08;color:var(--brand-gold-bright);border-color:#e4ad4366}#works .studio-carousel-arrow:hover:not(:disabled){background:var(--brand-gold-bright);color:var(--brand-ink);box-shadow:0 0 16px #e4ad4340}#works .portfolio-swipe-indicators button:before{background:#82879a}#works .portfolio-swipe-indicators button[aria-current=true]:before{background:var(--brand-gold-bright)}
/* Fade only the photograph into the shared slate canvas near the shoulders. */
.hero-portrait-stage{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 130px),#000c calc(100% - 80px),#0004 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 130px),#000c calc(100% - 80px),#0004 calc(100% - 30px),transparent 100%)}
@media(max-width:650px){.hero-portrait-stage{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 90px),transparent 100%)}}
/* Project circles select one spacious, readable review. */
#reviews{padding:56px 0}#reviews h2{margin:12px 0 36px}.review-project-picker{display:flex;justify-content:center;margin:0 auto 34px;max-width:650px;isolation:isolate}.review-project-tab{position:relative;width:190px;flex:0 1 190px;min-width:0;border:0;padding:0;background:none;color:#d3d6e0;cursor:pointer}.review-project-tab+.review-project-tab{margin-left:-22px}.review-circle{display:block;width:170px;height:170px;border:6px solid #505568;border-radius:50%;margin:0 auto 14px;overflow:hidden;box-shadow:0 0 0 1px #ffffff20;transition:box-shadow .25s,transform .25s}.review-circle img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}.review-project-tab[aria-selected=true]{z-index:3;color:#f3cf86}.review-project-tab[aria-selected=true] .review-circle{box-shadow:0 0 0 2px var(--brand-gold-bright),0 6px 24px #191e3030;transform:translateY(-4px)}.review-project-tab:hover .review-circle{box-shadow:0 0 0 2px #e4ad4370}.review-tab-name{display:block;font-size:14px;font-weight:600;padding:0 8px;line-height:1.4}.review-project-tab:focus-visible{outline:2px solid var(--brand-gold-bright);outline-offset:6px;border-radius:12px}.review-selected-project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;background:#ffffff07;border-radius:20px;padding:32px}.selected-review-example{font-size:11px;color:#c4c8d5;letter-spacing:.4px}.selected-review-copy blockquote{position:relative;margin:18px 0 20px;padding-left:26px}.selected-review-copy blockquote:before{content:'“';position:absolute;left:0;top:-10px;font:52px Georgia;color:var(--brand-gold)}.selected-review-copy blockquote p{margin:0;font-size:clamp(18px,1.8vw,23px)!important;line-height:1.55!important;color:#f8f8fa!important}.selected-review-author{display:block;font-size:16px;color:var(--brand-gold)}.selected-review-description{margin:24px 0 20px;padding-top:20px;border-top:1px solid #ffffff1c}.selected-review-type{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--brand-gold);font-size:14px}.selected-review-type svg{width:23px;height:23px;fill:none;stroke:var(--brand-gold);stroke-width:1.5;flex:none}.selected-review-description p{font-size:15px;line-height:1.6;color:#dce0eb;margin:12px 0 8px}.selected-review-description small{font-size:12px;color:#c0c5d2}.selected-review-copy>a{display:inline-flex;gap:24px;font-size:14px;color:var(--brand-gold);padding:10px 0}.selected-review-preview{display:block;border-radius:16px;overflow:hidden;background:#eef0f4}.selected-review-preview .project-devices{background:#eef0f4;aspect-ratio:1.45}.review-selected-project:focus-visible{outline:2px solid var(--brand-gold-bright);outline-offset:4px}
/* More legible process steps, without changing the working timeline. */
#steps .process-story{gap:20px}#steps .story-step{padding:12px 14px 20px;border-radius:16px;background:#ffffff65}#steps .story-step h3{font-size:20px;line-height:1.35}#steps .story-step p{font-size:15px;line-height:1.7;max-width:260px;color:var(--brand-muted)}#steps .story-scene{height:170px}#steps .story-node{font-size:14px;font-weight:700}#steps .story-track{background:#c6b68f}
@media(max-width:900px){.review-selected-project{gap:22px;padding:24px}.review-circle{width:145px;height:145px}.review-project-tab{flex-basis:166px}.selected-review-copy blockquote p{font-size:20px!important}#steps .story-step h3{font-size:18px}#steps .story-step p{font-size:14px}#steps .story-scene{height:145px}}
@media(max-width:650px){#reviews h2{margin-bottom:30px}.review-circle{width:105px;height:105px;border-width:4px}.review-project-tab{flex-basis:123px}.review-project-tab+.review-project-tab{margin-left:-12px}.review-tab-name{font-size:12px;line-height:1.4;padding:0 3px}.review-project-picker{margin-bottom:26px}.review-selected-project{grid-template-columns:1fr;padding:22px;gap:22px}.selected-review-copy blockquote{padding-left:22px}.selected-review-copy blockquote p{font-size:19px!important}.selected-review-description{margin-top:20px}.selected-review-type{font-size:13px}.selected-review-description p{font-size:15px}.selected-review-preview .project-devices{aspect-ratio:1.4}#steps .story-step{padding:18px 12px;background:#ffffff70;column-gap:14px}#steps .story-step h3{font-size:21px}#steps .story-step p{font-size:15px;max-width:none}#steps .story-scene{height:140px}}
@media(prefers-reduced-motion:reduce){.review-circle{transition:none}.review-project-tab[aria-selected=true] .review-circle{transform:none}}
/* Full-width review panel and a swipeable ribbon of overlapping project circles. */
#reviews>.shell{width:min(1400px,calc(100% - 144px));max-width:none}.review-circle-carousel{position:relative;margin:0 0 30px}.review-project-picker{justify-content:flex-start;max-width:none;width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;margin:0;padding:10px 4px 12px;scroll-snap-type:x proximity}.review-project-picker::-webkit-scrollbar{display:none}.review-project-tab{flex:0 0 142px;width:142px;scroll-snap-align:start}.review-project-tab+.review-project-tab{margin-left:-18px}.review-circle{width:136px;height:136px}.review-tab-name{font-size:13px;min-height:38px}.review-circle-arrow{position:absolute;top:66px;transform:translateY(-50%);width:40px;height:40px;border:1px solid #e4ad4366;border-radius:50%;background:#ffffff08;color:var(--brand-gold-bright);font:28px Arial;cursor:pointer}.review-circle-arrow:first-child{left:-60px}.review-circle-arrow:last-child{right:-60px}.review-circle-arrow:hover:not(:disabled){background:var(--brand-gold-bright);color:var(--brand-ink)}.review-circle-arrow:disabled{opacity:.3;cursor:default}.review-circle-arrow:focus-visible{outline:2px solid var(--brand-gold-bright);outline-offset:4px}.selected-review-copy blockquote p{font-size:clamp(20px,1.8vw,25px)!important}.review-selected-project{padding:36px;gap:42px}
/* One icon family and type scale for the four process steps. */
#steps{background:#edf0f5}#steps .kicker{color:var(--brand-gold)}#steps h2{color:var(--brand-ink)}#steps h2 span{color:var(--brand-gold-bright)}#steps .story-step{background:transparent;padding:12px 16px 18px}#steps .story-scene{height:155px}.process-symbol{display:grid;place-items:center;width:120px;height:120px;border-radius:32px;background:#505568;box-shadow:0 10px 24px #42495b12}.process-symbol svg{width:65px;height:65px;fill:none;stroke:var(--brand-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#steps .story-node{background:#edf0f5;border-color:#bfc5d1;color:#505568;box-shadow:0 0 0 7px #edf0f5}#steps .is-active .story-node{background:var(--brand-gold-bright);border-color:var(--brand-gold-bright);color:var(--brand-ink);box-shadow:0 0 0 7px #edf0f5,0 0 16px #e4ad4330}#steps .story-track{background:#c5cbd6}#steps .story-step h3{color:var(--brand-ink);font-size:21px;font-weight:700;letter-spacing:-.3px}#steps .story-step p{color:var(--brand-muted);font-size:15px;line-height:1.7}
@media(max-width:900px){#reviews>.shell{width:calc(100% - 96px)}.review-circle-arrow:first-child{left:-42px}.review-circle-arrow:last-child{right:-42px}.review-circle-arrow{width:32px;height:32px}.review-selected-project{padding:26px;gap:26px}.process-symbol{width:100px;height:100px;border-radius:26px}.process-symbol svg{width:56px;height:56px}}
@media(max-width:650px){#reviews>.shell{width:calc(100% - 28px)}.review-circle-arrow{display:none}.review-project-tab{flex-basis:122px;width:122px}.review-circle{width:116px;height:116px}.review-project-tab+.review-project-tab{margin-left:-16px}.review-tab-name{font-size:12px}.review-selected-project{padding:22px;gap:24px}.selected-review-copy blockquote p{font-size:20px!important}#steps .story-step{padding:12px 0}#steps .story-scene{height:125px;justify-content:start}.process-symbol{width:104px;height:104px}#steps .story-step h3{font-size:21px}}
/* Align the process with the portfolio edges and strengthen the icon family. */
#steps>.shell{width:min(1400px,calc(100% - 144px));max-width:none}#steps .kicker{color:var(--brand-gold-bright)}#steps .process-story{gap:24px}#steps .story-step{padding-left:0;padding-right:0}#steps .story-scene{height:180px}.process-symbol{width:140px;height:140px;border-radius:30px;background:linear-gradient(145deg,#5b6176,var(--brand-slate));box-shadow:0 12px 28px #42495b20,inset 0 1px 0 #ffffff18}.process-symbol svg{width:80px;height:80px;stroke:var(--brand-gold-bright);stroke-width:2.2;filter:drop-shadow(0 2px 3px #191e3025)}#steps .story-fill{background:var(--brand-gold-bright);box-shadow:0 0 10px #e4ad4340}#steps .story-step h3{font-size:22px;letter-spacing:-.4px}#steps .story-step p{font-size:15px;max-width:280px}
@media(max-width:900px){#steps>.shell{width:calc(100% - 40px)}#steps .process-story{gap:16px}.process-symbol{width:112px;height:112px;border-radius:26px}.process-symbol svg{width:64px;height:64px}#steps .story-scene{height:150px}#steps .story-step h3{font-size:19px}}
@media(max-width:650px){#steps>.shell{width:calc(100% - 28px)}#steps .story-scene{height:135px}.process-symbol{width:116px;height:116px}.process-symbol svg{width:66px;height:66px}#steps .story-step h3{font-size:21px}}
/* The review heading is the palette reference for every section heading. */
:root{--studio-heading:var(--brand-white);--studio-heading-gold:var(--brand-gold)}
.hero h1,#works h2,#steps h2,#reviews h2,#why h2,#prices h2,#contact h2{color:var(--studio-heading)}
.hero h1 span,#works h2 span,#steps h2 span,#reviews h2 span,#why .values-heading h2 span,#prices h2 span,#contact h2 span{color:var(--studio-heading-gold)}
.hero .eyebrow,#works .kicker,#steps .kicker,#reviews .kicker,#why .kicker,#prices .kicker,#contact .kicker{color:var(--studio-heading-gold)}
#steps{background:#edf0f5;border:0}
#why,#contact{background:var(--brand-paper);border:0}
#prices{background:#505568;border:0}
#why .values-intro,#contact .contact-grid>div>p:not(.kicker){color:var(--brand-muted)}
#prices .calc-help{color:#d5d7df}
#why>.shell,#prices>.shell,#contact>.shell{width:min(1400px,calc(100% - 144px));max-width:none}
/* Larger versions of the hero's round gold symbols, on one glowing track. */
#steps .process-circles{gap:24px}
#steps .process-circles .story-scene{height:138px;opacity:1}
#steps .process-circles .story-node{width:104px;height:104px;border-radius:50%;background:#505568;border:1.5px solid #bda979;color:#d6bd88;box-shadow:0 0 0 7px #505568;position:relative;transition:color .6s,border-color .6s,box-shadow .6s,background .6s}
#steps .process-circles .story-node svg{width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#steps .process-circles .process-number{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);padding:2px 8px;background:#505568;color:inherit;font-size:12px;letter-spacing:1px}
#steps .process-circles .is-active .story-node{background:#66616a;border-color:#fff0bd;color:#fff0bd;box-shadow:0 0 0 7px #505568,0 0 13px #e8b74a80,0 0 28px #f4ae314a}
#steps .process-circles .story-track{background:#a99a78}
#steps .process-circles .story-fill{background:#edbb57;box-shadow:0 0 9px #f6b73c88}
#steps .process-circles .story-dot{width:9px;height:9px;background:#fff2bd;box-shadow:0 0 7px #fff,0 0 18px #f6b73c,0 0 30px #d98c13}
#steps .process-circles .story-step h3{color:var(--brand-white);margin-top:22px}
#steps .process-circles .story-step p{color:#d5d7df}
@media(max-width:900px){#why>.shell,#prices>.shell,#contact>.shell{width:calc(100% - 40px)}}
@media(max-width:650px){#why>.shell,#prices>.shell,#contact>.shell{width:calc(100% - 28px)}}
@media(max-width:600px){
 #steps .process-circles .story-step{grid-template-columns:88px minmax(0,1fr);column-gap:22px;align-items:start;min-height:150px}
 #steps .process-circles .story-scene{grid-column:1;grid-row:1 / span 2;height:auto;justify-content:start;align-self:start}
 #steps .process-circles .story-node{width:80px;height:80px;margin:0}
 #steps .process-circles .story-node svg{width:42px;height:42px}
 #steps .process-circles .story-step h3{grid-column:2;grid-row:1;margin:8px 0}
 #steps .process-circles .story-step p{grid-column:2;grid-row:2}
}
@media(prefers-reduced-motion:reduce){#steps .process-circles .story-node{transition:none}}

/* Light and dark chapters remain distinct; only hero and portfolio share a canvas. */
#steps h2,#why h2,#contact h2{color:var(--brand-ink)}
#steps .process-circles .story-step h3{color:var(--brand-ink)}
#steps .process-circles .story-step p{color:var(--brand-muted)}
#steps .process-circles .story-node{box-shadow:0 0 0 7px #edf0f5}
#steps .process-circles .is-active .story-node{box-shadow:0 0 0 7px #edf0f5,0 0 13px #e8b74a80,0 0 28px #f4ae314a}
/* Compact process strip: less height, with the same circles and moving light. */
#steps{padding-top:30px;padding-bottom:28px}
#steps .kicker{margin-top:0;margin-bottom:0}
#steps h2{font-size:clamp(30px,3.3vw,44px);margin:8px 0 14px}
#steps .process-circles{gap:24px}
#steps .process-circles .story-step{padding:0}
#steps .process-circles .story-scene{height:90px}
#steps .process-circles .story-node{width:68px;height:68px;box-shadow:0 0 0 5px #edf0f5}
#steps .process-circles .story-node svg{width:34px;height:34px}
#steps .process-circles .process-number{font-size:10px;bottom:-7px;padding:1px 6px}
#steps .process-circles .is-active .story-node{box-shadow:0 0 0 5px #edf0f5,0 0 11px #e8b74a80,0 0 22px #f4ae314a}
#steps .process-circles .story-step h3{font-size:18px;line-height:1.3;margin:12px 0 7px;letter-spacing:-.2px}
#steps .process-circles .story-step p{font-size:13.5px;line-height:1.5;max-width:280px}
@media(max-width:900px){#steps .process-circles{gap:16px}#steps .process-circles .story-step h3{font-size:17px}}
@media(max-width:600px){
 #steps{padding-top:26px;padding-bottom:26px}
 #steps h2{font-size:30px;letter-spacing:-1px;margin-bottom:22px}
 #steps .process-circles{gap:18px}
 #steps .process-circles .story-step{grid-template-columns:68px minmax(0,1fr);column-gap:18px;min-height:90px}
 #steps .process-circles .story-scene{height:auto}
 #steps .process-circles .story-node{width:62px;height:62px;margin:0}
 #steps .process-circles .story-node svg{width:32px;height:32px}
 #steps .process-circles .story-step h3{font-size:18px;margin:2px 0 5px}
 #steps .process-circles .story-step p{font-size:14px;line-height:1.5;max-width:none}
}
/* One route joins the hero to the compact dark process strip. */
#steps{background:var(--hero-shared-bg,var(--brand-slate));padding:22px 0 24px}
#steps .process-circles .story-scene{height:78px}
#steps .process-circles .story-node{width:58px;height:58px;background:var(--hero-shared-bg,var(--brand-slate));box-shadow:0 0 0 5px var(--hero-shared-bg,var(--brand-slate))}
#steps .process-circles .story-node svg{width:29px;height:29px}
#steps .process-circles .process-number{background:var(--hero-shared-bg,var(--brand-slate))}
#steps .process-circles .is-active .story-node{background:#66616a;box-shadow:0 0 0 5px var(--hero-shared-bg,var(--brand-slate)),0 0 13px #e8b74a80,0 0 28px #f4ae314a}
#steps .process-circles .story-step h3{color:var(--brand-white)}
#steps .process-circles .story-step p{color:#d5d7df}
[data-connected-process]>.rail-track,[data-connected-process]>.rail-progress,[data-connected-process]>.rail-dot,.process-circles>.story-track,.process-circles>.story-fill,.process-circles>.story-dot{display:none}
.connected-process-route{position:absolute;top:0;left:0;z-index:20;pointer-events:none;overflow:hidden}
.connected-process-track{stroke:#bda979;opacity:.42;stroke-width:1.5;fill:none;stroke-linejoin:round}
.connected-process-fill{stroke:#edbb57;stroke-width:2;fill:none;stroke-linejoin:round;filter:drop-shadow(0 0 4px #f6b73c88)}
.connected-process-light{fill:#fff2bd;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px #f6b73c)}
/* Reviews on light paper; gold accents remain, with dark readable text. */
#reviews{background:var(--brand-paper);color:var(--brand-ink)}
#reviews h2{color:var(--brand-ink)}
#reviews .review-circle{border-color:var(--brand-paper);box-shadow:0 0 0 1px #40475a25}
#reviews .review-project-tab{color:var(--brand-muted)}
#reviews .review-project-tab[aria-selected=true]{color:var(--brand-ink)}
#reviews .review-selected-project{background:#fff;box-shadow:0 6px 24px #42495b09}
#reviews .selected-review-copy blockquote p{color:var(--brand-ink)!important}
#reviews .selected-review-author,#reviews .selected-review-type,#reviews .selected-review-copy>a{color:var(--brand-ink)}
#reviews .selected-review-description{border-color:#40475a18}
#reviews .selected-review-description p{color:var(--brand-muted)}
#reviews .selected-review-example,#reviews .selected-review-description small{color:var(--brand-muted)}
#reviews .selected-review-type svg{stroke:var(--brand-gold)}
#reviews .review-circle-arrow{background:#fff;color:var(--brand-ink);border-color:#bda97970}
@media(max-width:600px){
 #steps .process-circles .story-step{grid-template-columns:62px minmax(0,1fr);min-height:86px;column-gap:18px}
 #steps .process-circles .story-scene{height:auto}
 #steps .process-circles .story-node{width:54px;height:54px}
 #steps .process-circles .story-node svg{width:27px;height:27px}
}

/* Remove the extra rule above the process icons. */
#steps:before{display:none}
/* Visible hover and selection on the light review ribbon. */
#reviews .review-project-tab[aria-selected=true] .review-circle{box-shadow:0 0 0 2px var(--brand-gold-bright),0 5px 18px #b4873830}
@media(hover:hover){
 #reviews .review-project-tab:hover{z-index:4;color:var(--brand-ink)}
 #reviews .review-project-tab:hover .review-circle{box-shadow:0 0 0 3px var(--brand-gold-bright),0 0 20px #e4ad4355;transform:translateY(-4px);filter:brightness(1.04)}
}
#reviews .review-project-tab:focus-visible .review-circle{box-shadow:0 0 0 3px var(--brand-gold-bright),0 0 20px #e4ad4355}
@media(prefers-reduced-motion:reduce){#reviews .review-project-tab:hover .review-circle{transform:none}}

#reviews .review-demo-note{margin:24px 0 0;color:var(--brand-muted);font-size:12px;line-height:1.6}