/* Light-surface accents and a shared, rounded form language. */
html[data-mode=light] .home-page .brands-card{border:1px solid var(--line);border-radius:26px;background:var(--surface);padding:28px 30px}
html[data-mode=light] .home-page .brands-label,
html[data-mode=light] .home-page .brands-label span,
html[data-mode=light] .home-page .brand-pill,
html[data-mode=light] .home-page .brand-pill span,
html[data-mode=light] .home-page .designs-sub-meta{color:var(--accent-ink);text-shadow:none}
html[data-mode=light] .home-page .brand-pill{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
html[data-mode=light] .home-page .brand-pill:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:var(--accent)}
html[data-mode=light] .home-page #about .section-heading,
html[data-mode=light] .home-page .insight-num,
html[data-mode=light] .home-page .insight-num span,
html[data-mode=light] .home-page .grow-text{color:var(--accent)!important;-webkit-text-fill-color:currentColor;text-shadow:none!important}
/* Applied to both homepage and inner-page enquiry forms. */
:root{--field-surface:#15151c;--field-line:#ffffff26;--field-ink:#f6f3ef;--field-placeholder:#a9a3ae;--field-shadow:0 5px 16px #00000014;--field-focus:0 0 0 4px #ff642f24,0 8px 22px #00000012}
html[data-mode=light]{--field-surface:#fffdfa;--field-line:#d8d1c8;--field-ink:#292329;--field-placeholder:#7e747b;--field-shadow:0 5px 16px #48312708;--field-focus:0 0 0 4px #ed54231c,0 8px 22px #4831270c}
:root :is(.contact-form,.brief-form) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit])),select,textarea){
 width:100%;min-width:0;min-height:58px;padding:16px 19px!important;border:1px solid var(--field-line)!important;border-radius:18px!important;background:var(--field-surface)!important;color:var(--field-ink)!important;font:inherit;font-size:1rem;line-height:1.5;text-shadow:none!important;box-shadow:var(--field-shadow);outline:none;transition:border-color .18s,box-shadow .18s,background-color .18s
}
:root :is(.contact-form,.brief-form) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])),select,textarea):hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--field-line))!important}
:root :is(.contact-form,.brief-form) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])),select,textarea):focus,
:root :is(.contact-form,.brief-form) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])),select,textarea):focus-visible{border-color:var(--accent)!important;box-shadow:var(--field-focus);outline:0;outline-offset:0}
:root :is(.contact-form,.brief-form) :is(input,textarea)::placeholder{color:var(--field-placeholder)!important;font:inherit;text-transform:none;letter-spacing:normal;opacity:1}
:root :is(.contact-form,.brief-form) textarea{min-height:156px;resize:vertical;border-radius:20px!important}
:root :is(.contact-form,.brief-form) select{appearance:none;padding-right:48px!important;background-image:url('../images/field-chevron.svg')!important;background-repeat:no-repeat!important;background-position:right 18px center!important;background-size:16px 16px!important;cursor:pointer}
:root :is(.contact-form,.brief-form) select option{background:var(--field-surface);color:var(--field-ink)}
:root :is(.contact-form,.brief-form) :is(.form-group,.field){display:flex;flex-direction:column;gap:10px}
:root :is(.contact-form,.brief-form) :is(.form-group,.field)>label{font-size:.78rem;font-weight:700;letter-spacing:.055em;line-height:1.5;margin:0 0 2px}
.contact-form .form-grid{column-gap:28px;row-gap:27px}.contact-form .two-fields,.brief-form .two-fields{gap:22px}
:root :is(.contact-form,.brief-form) input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;flex:none;border-radius:5px;margin-top:4px}
:root :is(.contact-form,.brief-form) .checkbox{align-items:flex-start;gap:12px}
.quick-brief .project-type>span{border-radius:17px;box-shadow:var(--field-shadow);transition:border-color .18s,background-color .18s,box-shadow .18s}
.quick-brief .project-type input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.quick-brief .project-type>span:hover{border-color:var(--accent);box-shadow:0 6px 18px #0000000c}
@media(max-width:700px){html[data-mode=light] .home-page .brands-card{padding:23px 20px;border-radius:22px}.contact-form .form-grid{gap:22px}:root :is(.contact-form,.brief-form) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])),select,textarea){padding:14px 16px!important;min-height:54px;border-radius:16px!important;font-size:16px}:root :is(.contact-form,.brief-form) select{padding-right:44px!important;background-position:right 16px center!important}:root :is(.contact-form,.brief-form) textarea{min-height:145px}}
@media(prefers-reduced-motion:reduce){:root :is(.contact-form,.brief-form) :is(input,select,textarea),.quick-brief .project-type>span{transition:none}}
:root :is(.contact-form,.brief-form) textarea{min-height:156px!important}
@media(max-width:700px){:root :is(.contact-form,.brief-form) textarea{min-height:145px!important}}
/* Allow the step navigation to scroll without stretching the mobile form. */
.brief-layout>.brief-aside,.brief-layout>.brief-form{min-width:0;max-width:100%}
.brief-layout .step-list{max-width:100%}
.brief-form fieldset,.brief-form .two-fields,.contact-form .form-group,.brief-form .field{min-width:0}
@media(max-width:700px){.brief-layout{grid-template-columns:minmax(0,1fr)!important}.brief-form{width:100%}.brief-form .two-fields{grid-template-columns:minmax(0,1fr)}.contact-form .form-grid{grid-template-columns:minmax(0,1fr)}}
.brief-layout .step-list{scrollbar-width:thin;scrollbar-color:var(--field-line) transparent}
.brief-form .two-fields>.field{margin-bottom:0}
/* The portrait hero always keeps its original dark appearance. */
.home-page .hero-section{color:#fff;background:transparent;color-scheme:dark}
.home-page .hero-section .hero-title{text-shadow:0 10px 40px rgba(0,0,0,.9)}
.home-page .hero-section .hero-subtitle{color:rgba(255,255,255,.9);text-shadow:0 2px 10px #000c}
.home-page .hero-section .hero-quote{color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.9)}
.home-page .hero-section .hero-desc{color:rgba(255,255,255,.8);text-shadow:0 2px 10px rgba(0,0,0,.9)}
.home-page .hero-section .stat-num{color:rgba(255,255,255,.6);text-shadow:none}
.home-page .hero-section .stat-label{color:#fff;text-shadow:0 2px 10px #000c}
.home-page .hero-section .hero-actions,.home-page .hero-section .hero-actions *{text-shadow:none!important}
/* Keep the header over the portrait dark; other sections follow the chosen theme. */
.home-page.hero-in-view .navbar{--ink:#f6f3ef;--surface:#0e0e14;--line:rgba(255,255,255,.13);--page:#07070c;color-scheme:dark}
html[data-mode=light] .home-page.hero-in-view .navbar .nav-container{background:rgba(8,8,12,.6);border-color:rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.5)}
html[data-mode=light] .home-page.hero-in-view .navbar .logo,html[data-mode=light] .home-page.hero-in-view .navbar .logo span{color:#fff;text-shadow:0 2px 10px #000c}
html[data-mode=light] .home-page.hero-in-view .navbar .nav-links a{color:rgba(255,255,255,.8);text-shadow:0 2px 10px #000c}
html[data-mode=light] .home-page.hero-in-view .navbar .nav-links a:is(:hover,.active){color:#fff}
html[data-mode=light] .home-page.hero-in-view .bg-scroll-dark{background:linear-gradient(180deg,rgba(4,4,9,.9) 0%,rgba(4,4,9,1) 50%,rgba(3,3,7,1) 100%)}
html[data-mode=light] .home-page.hero-in-view .bg-noise{opacity:.05}

html[data-mode=light] .home-page.hero-in-view .navbar .logo span{color:#ff5522}

/* Keep the portrait hero and its availability strip visually identical in both themes. */
html[data-mode=light] .home-page .hero-section{background:transparent!important;color:#fff!important;color-scheme:dark}
html[data-mode=light] .home-page .bg-gradient-overlay{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.1) 12%,transparent 24%),linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 30%)!important;color:#f6f3ef}
html[data-mode=light] .home-page .bg-scroll-dark{background:linear-gradient(180deg,rgba(4,4,9,.9) 0%,rgba(4,4,9,1) 50%,rgba(3,3,7,1) 100%)!important;color:#f6f3ef}
html[data-mode=light] .home-page .brands-section{background:transparent!important;color:#f6f3ef!important;color-scheme:dark}
html[data-mode=light] .home-page .brands-card{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;color:#f6f3ef!important}
html[data-mode=light] .home-page .brands-label{color:rgba(255,255,255,.7)!important;text-shadow:0 2px 10px rgba(0,0,0,.8)!important}
html[data-mode=light] .home-page .brands-label span{color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.8)!important}
html[data-mode=light] .home-page .brand-pill{background:transparent!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.8)!important}
html[data-mode=light] .home-page .brand-pill:hover{background:rgba(255,255,255,.1)!important;border-color:#ff5522!important}
html[data-mode=light] .home-page .brand-pill>span:not(.pill-icon){color:#fff!important}

html[data-mode=light] .internal-page .check-list li{color:var(--ink)}

.internal-page .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.internal-page .faq-list details{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;padding:0}
.internal-page .faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 25px;list-style:none;font-size:1rem;font-weight:700}
.internal-page .faq-list summary::-webkit-details-marker{display:none}
.internal-page .faq-list summary svg{display:none}
.internal-page .faq-list summary::after{content:"+";display:block;flex:none;color:var(--accent);font-size:1.4rem;font-weight:400;line-height:1;transition:transform .2s}
.internal-page .faq-list details[open] summary::after{transform:rotate(45deg)}
.internal-page .faq-list details>p{padding:0 25px 25px;color:var(--muted);font-size:.91rem;line-height:1.8}

html[data-mode=light] .internal-page .process-grid>div{background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-mode=light] .internal-page .process-grid>div h3{color:var(--ink)}
html[data-mode=light] .internal-page .process-grid>div .step-number{color:var(--accent-ink)}
html[data-mode=light] .internal-page .directory-row{background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-mode=light] .internal-page .directory-arrow{color:var(--accent-ink)}
html[data-mode=light] .internal-page .work-toolbar .filter:not(.active){background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-mode=light] .internal-page .case-overview aside{background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-mode=light] .internal-page .case-approach article{background:var(--surface);border-color:var(--line);color:var(--ink)}

@media(max-width:700px){
 .internal-page .faq-list{grid-template-columns:minmax(0,1fr)}
 .internal-page .faq-list summary{padding:21px;font-size:.93rem}
 .internal-page .faq-list details>p{padding:0 21px 21px}
}