/* Visual language adapted from the local Matersky portfolio project. */
html[data-theme="portfolio"]{
  color-scheme:dark;
  --night:#06080f;
  --surface:#fafbfe;
  --text:#f5f7f9;
  --muted:#5f6573;
  --accent:#2f6bff;
  --line:#eceef3;
  --paper:#f7f8fb;
  --ink:#0d1018;
  --ink-muted:#5f6573;
  --paper-line:#e6e8ee;
  --content:1380px;
  --chosen-highlight:#ffe600;
  --chosen-highlight-ink:#1a1500;
}
html[data-theme="portfolio"] body{background:#06080f;color:var(--text);font-family:"Satoshi",-apple-system,BlinkMacSystemFont,sans-serif}
html[data-theme="portfolio"] .wrap{width:min(calc(100% - 48px),var(--content))}
html[data-theme="portfolio"] ::selection{background:var(--chosen-highlight);color:var(--chosen-highlight-ink)}
html[data-theme="portfolio"] ::-moz-selection{background:var(--chosen-highlight);color:var(--chosen-highlight-ink)}

/* The source portfolio's compact, translucent pill navigation. */
html[data-theme="portfolio"] .site-header{
  position:sticky;top:16px;z-index:60;min-height:60px;flex-wrap:nowrap;
  margin-block:16px 18px;padding:8px 10px 8px 22px;border:1px solid #ffffff24;
  border-radius:999px;background:#0a0e20b8;
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 34px -14px #0009,inset 0 1px #ffffff1f;
}
html[data-theme="portfolio"] .wordmark{color:#fff;font-size:1.125rem}
html[data-theme="portfolio"] .brand-symbol{color:#fff;font-size:2rem}
html[data-theme="portfolio"] .site-nav{gap:26px;margin-left:auto;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
html[data-theme="portfolio"] .site-nav>a:not(.button){color:#ffffffc7}
html[data-theme="portfolio"] .site-nav>a:not(.button):hover{color:#fff}
html[data-theme="portfolio"] .site-nav>.button{min-height:42px;padding:9px 19px;border-radius:999px;background:#fff;border-color:#fff;color:#0d1018;font-size:.75rem;letter-spacing:.04em}
html[data-theme="portfolio"] .site-nav>.button:hover{background:#e9edf6;border-color:#e9edf6}
html[data-theme="portfolio"] .site-footer{border-color:#ffffff24}
html[data-theme="portfolio"] .site-footer .wordmark{font-size:1rem}
html[data-theme="portfolio"] .site-footer .brand-symbol{font-size:1.75rem}

/* White portfolio hero card with the headline and live commerce flow side by side. */
html[data-theme="portfolio"] .hero{
  min-height:min(760px,calc(100svh - 112px));grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  align-items:center;gap:32px;padding:52px 42px;border:1px solid #ffffff80;border-radius:24px;
  background:repeating-linear-gradient(90deg,#2f6bff08 0 1px,transparent 1px 24px),#fff;
  box-shadow:0 32px 90px -56px #000a;color:#0d1018;
}
html[data-theme="portfolio"] .hero-copy,html[data-theme="portfolio"] .hero-visual{z-index:1}
html[data-theme="portfolio"] .hero-copy{max-width:520px}
html[data-theme="portfolio"] .hero h1{max-width:none;font-size:clamp(2.7rem,4vw,3.3rem);line-height:1.06;letter-spacing:-.045em;color:#0d1018}
html[data-theme="portfolio"] .portfolio-underline{position:relative;display:inline-block;color:#2f6bff;white-space:nowrap}
html[data-theme="portfolio"] .portfolio-underline svg{position:absolute;left:-1%;bottom:-8px;width:102%;height:18px;overflow:visible;pointer-events:none}
html[data-theme="portfolio"] .portfolio-underline path{fill:none;stroke:#2f6bff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:portfolio-underline-draw 1s cubic-bezier(.5,.1,.2,1) .35s forwards}
@keyframes portfolio-underline-draw{to{stroke-dashoffset:0}}
html[data-theme="portfolio"] .intro{max-width:44ch;color:#5f6573;font-size:1.015rem;line-height:1.6;margin-block:25px 28px}
html[data-theme="portfolio"] .hero .button{min-height:52px;border-radius:999px;background:#2f6bff;border-color:#2f6bff;color:#fff;box-shadow:0 14px 30px -15px #2f6bff99}
html[data-theme="portfolio"] .hero .button:hover{background:#2459dc;border-color:#2459dc}
html[data-theme="portfolio"] .hero .text-link{color:#0d1018;text-decoration-color:#aeb5c2}
html[data-theme="portfolio"] .hero-signature{color:#0d1018}
html[data-theme="portfolio"] .hero-signature small{color:#5f6573}
html[data-theme="portfolio"] .hero-signature img{border:1px solid #dfe2e9}
html[data-theme="portfolio"] .live-flow{min-height:420px;gap:24px;padding:20px 0;color:#0d1018}
html[data-theme="portfolio"] .live-flow::before{display:none}
html[data-theme="portfolio"] .live-flow-route{stroke:#c2cad5;stroke-width:1.3}
html[data-theme="portfolio"] .live-flow-end{fill:#72839b}
html[data-theme="portfolio"] .live-flow-node{border-color:#e2e5ec;background:#fff;box-shadow:0 3px 0 #dfe3eb,0 10px 24px #1a29400c}
html[data-theme="portfolio"] .live-flow-node-icon{color:#556782}
html[data-theme="portfolio"] .live-flow-hub{background:#f4f6fa;border-color:#e1e5ed;box-shadow:0 4px 0 #d8dde7;text-align:center}
html[data-theme="portfolio"] .live-flow-app-icon{background:#2f6bff;box-shadow:none}
html[data-theme="portfolio"] .live-flow-app-icon i{background:#fff}
html[data-theme="portfolio"] .live-flow-app-icon i:last-child{background:#bad0ff}
html[data-theme="portfolio"] .live-flow-app-lines i{background:#b8c3d4}
html[data-theme="portfolio"] .live-flow-object-glyph{stroke:#2f6bff;fill:#fff}
html[data-theme="portfolio"] .live-flow-object-glyph .moving-box-body{fill:#d8b98f;stroke:#806044}
html[data-theme="portfolio"] .live-flow-object-glyph .moving-box-detail{stroke:#806044}

/* The source portfolio places its logo marquee between the hero and a white content panel. */
html[data-theme="portfolio"] .platform-strip{
  margin-block:20px 26px;padding:21px 26px;border:1px solid #ffffff30;border-radius:22px;
  background:#fff;color:#0d1018;box-shadow:0 28px 70px -54px #0009;
}
html[data-theme="portfolio"] .platform-strip{width:min(calc(100% - 48px),var(--content))}
html[data-theme="portfolio"] .portfolio-panel{width:min(calc(100% - 48px),var(--content));margin-inline:auto}
html[data-theme="portfolio"] .platform-strip p{color:#5f6573}
html[data-theme="portfolio"] .marquee-window{background:#fff}
html[data-theme="portfolio"] .marquee-tool>span{color:#0d1018}
html[data-theme="portfolio"] .portfolio-panel{
  padding:14px;border-radius:28px;background:#fff;color:#0d1018;
  box-shadow:0 40px 100px -60px #0009;
}
html[data-theme="portfolio"] .portfolio-panel .wrap{width:100%;max-width:none}
html[data-theme="portfolio"] .portfolio-panel .section{padding:68px 42px}
html[data-theme="portfolio"] .portfolio-panel h2,html[data-theme="portfolio"] .portfolio-panel h3{color:#0d1018}
html[data-theme="portfolio"] .portfolio-panel p{color:#5f6573}
html[data-theme="portfolio"] .portfolio-panel .section-heading{margin-bottom:34px}
html[data-theme="portfolio"] .portfolio-panel .section-heading h2{font-size:clamp(2rem,3.5vw,2.9rem);letter-spacing:-.035em}
html[data-theme="portfolio"] .portfolio-panel .heading-split>p{max-width:430px}
html[data-theme="portfolio"] .portfolio-panel .line-icon{display:inline-flex;align-items:center;justify-content:flex-start;width:28px;height:28px;margin:0;color:#2f6bff;border:0;border-radius:0;background:transparent;grid-column:1;grid-row:1}
html[data-theme="portfolio"] .portfolio-panel .line-icon .icon{width:24px;height:24px}
html[data-theme="portfolio"] .portfolio-panel .problem-grid article{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;row-gap:9px;align-items:start;align-content:start}
html[data-theme="portfolio"] .portfolio-panel .problem-grid h3{grid-column:2;grid-row:1;margin:2px 0 0}
html[data-theme="portfolio"] .portfolio-panel .problem-grid p{grid-column:2;margin:0}
html[data-theme="portfolio"] .portfolio-panel .eyebrow{margin:0 0 8px;color:#2f6bff;font-size:.72rem;font-weight:700;letter-spacing:.14em}
html[data-theme="portfolio"] .portfolio-panel .help-grid article{background:#fafbfe;border-color:#eceef3}
html[data-theme="portfolio"] .portfolio-panel .step-index{color:#2f6bff}
html[data-theme="portfolio"] .portfolio-panel .mini-flow{color:#435b7e}
html[data-theme="portfolio"] .portfolio-panel .mini-flow>span{background:#bdc9d9}
html[data-theme="portfolio"] .portfolio-panel .mini-app{border-color:#aebbd0}
html[data-theme="portfolio"] .portfolio-panel .mini-app i{background:#6782af}
html[data-theme="portfolio"] .portfolio-panel .mini-app :is(i,span){border-color:#aebbd0}
html[data-theme="portfolio"] .portfolio-panel .portfolio{border-radius:20px;background:#f7f8fb}
html[data-theme="portfolio"] .portfolio-panel .project-kind{color:#51617a}
html[data-theme="portfolio"] .portfolio-panel .project-details summary{color:#17283f}
html[data-theme="portfolio"] .portfolio-panel .extra-project{background:#fafbfe;border-color:#e4e7ed}
html[data-theme="portfolio"] .portfolio-panel .testimonials figure{border-color:#e0e4eb}
html[data-theme="portfolio"] .portfolio-panel .testimonials blockquote{color:#263348}
html[data-theme="portfolio"] .portfolio-panel .quote-mark{color:#2f6bff}
html[data-theme="portfolio"] .portfolio-panel .person-initial{color:#2f6bff;border-color:#d9e2f2;background:#f7f9fd}
html[data-theme="portfolio"] .portfolio-panel .about-photo>img{border-color:#e4e7ed}
html[data-theme="portfolio"] .portfolio-panel .about-points li{color:#42536d}
html[data-theme="portfolio"] .portfolio-panel .process-list li{border-color:#e2e5ec}
html[data-theme="portfolio"] .portfolio-panel .process-list li>span{color:#2f6bff}
html[data-theme="portfolio"] .portfolio-panel .faq-list details{border-color:#e2e5ec}
html[data-theme="portfolio"] .portfolio-panel .faq{display:block}
html[data-theme="portfolio"] .portfolio-panel .faq .section-heading{margin-bottom:26px}
html[data-theme="portfolio"] .portfolio-panel .faq .hl{display:inline;background:var(--chosen-highlight);color:var(--chosen-highlight-ink);padding:2px 11px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
html[data-theme="portfolio"] .portfolio-panel .faq-list{margin-top:20px;padding:8px 34px;border-radius:24px;background:var(--chosen-highlight);box-shadow:0 24px 60px -34px color-mix(in srgb,var(--chosen-highlight) 52%,transparent)}
html[data-theme="portfolio"] .portfolio-panel .faq-list details,html[data-theme="portfolio"] .portfolio-panel .faq-list details:first-child{border-color:#00000020}
html[data-theme="portfolio"] .portfolio-panel .faq-list summary{color:#1a1500;font-size:1.05rem;font-weight:600}
html[data-theme="portfolio"] .portfolio-panel .faq-list summary>span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#00000012;color:#1a1500;transition:transform .25s}
html[data-theme="portfolio"] .portfolio-panel .faq-list details p{max-width:820px;color:#4a3f10}
html[data-theme="portfolio"] .portfolio-panel .circled{position:relative;display:inline-block;isolation:isolate}
html[data-theme="portfolio"] .portfolio-panel .circle-draw{position:absolute;left:-19%;top:-36px;width:138%;height:calc(100% + 72px);overflow:visible;z-index:-1;pointer-events:none}
html[data-theme="portfolio"] .portfolio-panel .circle-draw path{fill:none;stroke:#2f6bff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s ease}
html[data-theme="portfolio"] .portfolio-panel .circled.in .circle-draw path{stroke-dashoffset:0}
html[data-theme="portfolio"] .portfolio-panel .contact{
  margin-top:18px;padding:58px 42px 64px;border:0;border-radius:22px;background:#0d1018;color:#fff;
}
html[data-theme="portfolio"] .portfolio-panel .contact h2{color:#fff}
html[data-theme="portfolio"] .portfolio-panel .contact h2{max-width:1100px;margin-inline:auto;font-size:clamp(2.35rem,5vw,4.5rem);line-height:1.08;letter-spacing:-.045em}
html[data-theme="portfolio"] .portfolio-panel .contact .rot{display:inline-block;max-width:100%;color:var(--chosen-highlight);transition:opacity .35s ease,transform .35s ease}
html[data-theme="portfolio"] .portfolio-panel .contact .rot.is-changing{opacity:0;transform:translateY(8px)}
html[data-theme="portfolio"] .portfolio-panel .contact p,html[data-theme="portfolio"] .portfolio-panel .contact .booking-points{color:#c5cbd5}
html[data-theme="portfolio"] .portfolio-panel .booking-heading .demo-notice{color:#9ca7b8}
html[data-theme="portfolio"] .portfolio-panel .contact .booking-points li::before{color:#8ab0ff}
html[data-theme="portfolio"] .portfolio-panel .contact .button{background:#2f6bff;border-color:#2f6bff;color:#fff}
html[data-theme="portfolio"] :is(button,a,summary,input,select,textarea):focus-visible{outline:3px solid #2f6bff;outline-offset:4px}

@media(max-width:1050px){
  html[data-theme="portfolio"] .hero{min-height:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;padding:38px 28px}
  html[data-theme="portfolio"] .hero h1{font-size:clamp(2.65rem,4.7vw,3.25rem)}
  html[data-theme="portfolio"] .live-flow{gap:16px;min-height:390px}
  html[data-theme="portfolio"] .portfolio-panel .section{padding-inline:30px}
}
@media(max-width:800px){
  html[data-theme="portfolio"] .wrap{width:calc(100% - 32px)}
  html[data-theme="portfolio"] .site-header{top:8px;margin-block:8px 12px;padding-left:15px}
  html[data-theme="portfolio"] .site-nav{gap:12px}
  html[data-theme="portfolio"] .site-nav>a:not(.button){font-size:.68rem;letter-spacing:.035em}
  html[data-theme="portfolio"] .hero{grid-template-columns:1fr;gap:20px;padding:34px 25px 25px;min-height:0}
  html[data-theme="portfolio"] .hero-copy{max-width:620px}
  html[data-theme="portfolio"] .hero h1{max-width:none;font-size:clamp(2.55rem,7vw,3.2rem)}
  html[data-theme="portfolio"] .intro{max-width:54ch;margin-block:18px 22px}
  html[data-theme="portfolio"] .hero-signature{margin-top:22px}
  html[data-theme="portfolio"] .live-flow{min-height:0;padding:10px 0 0;gap:42px}
  html[data-theme="portfolio"] .platform-strip{padding:18px 16px;margin-block:14px 18px}
  html[data-theme="portfolio"] .portfolio-panel{padding:8px;border-radius:22px}
  html[data-theme="portfolio"] .portfolio-panel .section{padding:48px 18px}
  html[data-theme="portfolio"] .portfolio-panel .contact{padding:45px 20px 50px}
  html[data-theme="portfolio"] .portfolio-panel .heading-split>p{max-width:58ch}
}
@media(max-width:700px){
  html[data-theme="portfolio"] .site-header{flex-wrap:wrap;border-radius:20px}
  html[data-theme="portfolio"] .menu-toggle{border-color:#ffffff45;background:#ffffff0a;color:#fff}
  html[data-theme="portfolio"] .site-nav{margin:0}
  html[data-theme="portfolio"] .site-nav>a:not(.button){color:#fff}
  html[data-theme="portfolio"] .hero{padding:44px 20px 38px;border-radius:20px}
  html[data-theme="portfolio"] .hero-copy{padding-block:16px}
  html[data-theme="portfolio"] .hero .intro{margin-block:24px 28px}
  html[data-theme="portfolio"] .hero h1{font-size:clamp(2.45rem,9vw,3.2rem);max-width:none}
  html[data-theme="portfolio"] .about-copy h2{text-align:center}
  html[data-theme="portfolio"] .portfolio-underline{max-width:100%;white-space:nowrap;font-size:clamp(1.35rem,8.2vw,2rem)}
  html[data-theme="portfolio"] .portfolio-underline svg{left:0;bottom:-5px;width:100%;height:13px}
  @media(max-width:360px){html[data-theme="portfolio"] .portfolio-underline{font-size:clamp(1.2rem,8vw,1.6rem)}}
  html[data-theme="portfolio"] .live-flow-sources{gap:8px}
  html[data-theme="portfolio"] .live-flow-node{background:#fff}
  html[data-theme="portfolio"] .portfolio-panel .section{padding-inline:15px}
  html[data-theme="portfolio"] .portfolio-panel .contact h2{font-size:clamp(2.2rem,10vw,3.2rem)}
  html[data-theme="portfolio"] .portfolio-panel .circle-draw{left:-8%;top:-30px;width:116%;height:calc(100% + 60px)}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="portfolio"] .portfolio-underline path{animation:none;stroke-dashoffset:0}
}

/* Portfolio details refined for aligned sections and the source site's hand-drawn accents. */
@media (prefers-reduced-motion:reduce){
  html[data-theme="portfolio"] .portfolio-panel .circle-draw path{transition:none;stroke-dashoffset:0}
  html[data-theme="portfolio"] .portfolio-panel .contact .rot{transition:none}
}
@media (max-width:800px){
  html[data-theme="portfolio"] .portfolio-panel{width:calc(100% - 32px)}
  html[data-theme="portfolio"] .portfolio-panel .problem-grid article{grid-template-columns:28px minmax(0,1fr);column-gap:10px}
  html[data-theme="portfolio"] .portfolio-panel .faq-list{padding-inline:22px}
}

/* Two accent options for the portfolio preview. */
html[data-accent="blue"]{--chosen-accent:#2f6bff;--chosen-hover:#2459dc;--chosen-on:#fff;--chosen-tint:#2f6bff10}
html[data-accent="green"]{--chosen-accent:#10b981;--chosen-hover:#0c9a6b;--chosen-on:#04261a;--chosen-tint:#10b9811a;--chosen-highlight:#10b981;--chosen-highlight-ink:#04261a}
html[data-accent="orange"]{--chosen-accent:#ff5a00;--chosen-hover:#d94c00;--chosen-on:#1a100a;--chosen-tint:#ff5a001a;--chosen-highlight:#ff5a00;--chosen-highlight-ink:#1a100a}
html[data-accent]{--accent:var(--chosen-accent);--portfolio-accent:var(--chosen-accent);--portfolio-accent-secondary:var(--chosen-accent)}
html[data-accent] .hero{
  position:relative;isolation:isolate;background:#fff;overflow:visible;border-color:#fff;
  box-shadow:0 32px 90px -56px #000a,0 0 62px -22px color-mix(in srgb,var(--chosen-accent) 68%,transparent);
}
html[data-accent] .sky::before{display:none}
html[data-accent] .hero::before{content:"";position:absolute;pointer-events:none;border-radius:inherit}
html[data-accent] .hero::before{z-index:0;inset:-3px;background:var(--chosen-accent);filter:blur(28px);opacity:.17;transition:opacity .25s ease}
.hero-pointer-trail{opacity:.68;position:absolute;inset:0;width:100%;height:100%;z-index:0;border-radius:inherit;pointer-events:none}
@media(prefers-reduced-motion:reduce),(any-pointer:coarse) and (hover:none){.hero-pointer-trail{display:none}}
html[data-accent] .portfolio-underline{color:var(--chosen-accent)}
.projects-underline{position:relative;display:inline-block;max-width:100%;color:var(--chosen-accent,#2f6bff)}
.projects-underline svg{position:absolute;left:0;bottom:-8px;width:100%;height:18px;overflow:visible;pointer-events:none}
.projects-underline path{fill:none;stroke:var(--chosen-accent,#2f6bff);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.projects-underline svg{bottom:-5px;height:13px}}
html[data-accent] .portfolio-underline path{stroke:var(--chosen-accent)}
html[data-accent] .hero .button,html[data-accent] .portfolio-panel .contact .button{background:var(--chosen-accent);border-color:var(--chosen-accent);color:var(--chosen-on);box-shadow:0 14px 30px -15px color-mix(in srgb,var(--chosen-accent) 40%,transparent)}
html[data-accent] .hero .button:hover,html[data-accent] .portfolio-panel .contact .button:hover{background:var(--chosen-hover);border-color:var(--chosen-hover);color:var(--chosen-on)}
html[data-accent] .live-flow-app-icon{background:var(--chosen-accent);box-shadow:none}
html[data-accent] .live-flow-app-icon i{background:var(--chosen-on)}
html[data-accent] .live-flow-app-icon i:last-child{background:var(--chosen-hover)}
html[data-accent] .live-flow-object-glyph{stroke:var(--chosen-accent)}
html[data-accent] .portfolio-panel .line-icon,html[data-accent] .portfolio-panel .eyebrow,html[data-accent] .portfolio-panel .step-index,html[data-accent] .portfolio-panel .quote-mark,html[data-accent] .portfolio-panel .process-list li>span{color:var(--chosen-accent)}
html[data-accent] .portfolio-panel .person-initial{color:var(--chosen-accent);border-color:var(--chosen-accent)}
html[data-accent] .portfolio-panel .circled .circle-draw path{stroke:var(--chosen-accent)}
html[data-accent] .portfolio-panel .mini-flow>span{background:var(--chosen-accent)}
html[data-accent] .portfolio-panel .mini-app{border-color:var(--chosen-accent)}
html[data-accent] .portfolio-panel .mini-app i{background:var(--chosen-accent)}
html[data-accent] .portfolio-panel .mini-app :is(i,span){border-color:var(--chosen-accent)}
html[data-accent] .portfolio-panel .contact .booking-points li::before{color:var(--chosen-accent)}
html[data-accent] :is(button,a,summary,input,select,textarea):focus-visible{outline-color:var(--chosen-accent)}
.palette-picker{display:inline-flex;align-items:center;gap:3px;min-height:38px;padding:4px 7px;border:1px solid #ffffff35;border-radius:999px;background:#ffffff0d;color:#ffffffde;white-space:nowrap}
.palette-label{padding-inline:3px;font-size:.68rem;letter-spacing:.02em}
.palette-choice{width:23px;height:25px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer}
.palette-choice:hover{background:#ffffff1c}
.palette-choice[aria-pressed="true"]{border-color:#ffffffbd;box-shadow:0 0 0 1px #ffffff38}
.palette-swatch{display:block;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1px #ffffff70}
.palette-blue .palette-swatch{background:#2f6bff}
.palette-orange .palette-swatch{background:#ff5a00}
.palette-green .palette-swatch{background:#10b981}
@media(max-width:900px){.palette-picker{align-self:center}}
@media(max-width:700px){.palette-picker{align-self:stretch;justify-content:center;min-height:44px;font-size:.8rem}.palette-choice{width:34px;height:34px}}
html[data-accent="orange"] .calendar-day:not(:disabled){border-color:#ffb58a;background:#fff1e8;color:#863100}
html[data-accent="orange"] .calendar-day[aria-pressed="true"],html[data-accent="orange"] .slot-grid button[aria-pressed="true"]{background:#ff5a00;border-color:#ff5a00;color:#1a100a}
html[data-accent="orange"] .booking-form .button{background:#ff5a00;border-color:#ff5a00;color:#1a100a}
html[data-accent="orange"] .booking-form .button:hover{background:#d94c00;border-color:#d94c00}
html[data-accent="orange"] .portfolio-panel .eyebrow,html[data-accent="orange"] .portfolio-panel .step-index,html[data-accent="orange"] .portfolio-panel .process-list li>span,html[data-accent="orange"] .portfolio-panel .contact .booking-points li::before{color:#b84200}
html[data-accent="orange"] .calendar-nav button:focus-visible,html[data-accent="orange"] .calendar-day:focus-visible,html[data-accent="orange"] .slot-grid button:focus-visible{outline-color:#ff5a00}

.project-title-accent{color:var(--chosen-accent,#2f6bff)}

/* Tablets: three problem columns are too narrow, use two. */
@media(min-width:701px) and (max-width:960px){
  html[data-theme="portfolio"] .problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Green palette: same treatment as orange, dark ink on the accent for contrast. */
html[data-accent="green"] .calendar-day:not(:disabled){border-color:#9fe3c6;background:#e9f9f1;color:#065f46}
html[data-accent="green"] .calendar-day[aria-pressed="true"],html[data-accent="green"] .slot-grid button[aria-pressed="true"]{background:#10b981;border-color:#10b981;color:#04261a}
html[data-accent="green"] .booking-form .button{background:#10b981;border-color:#10b981;color:#04261a}
html[data-accent="green"] .booking-form .button:hover{background:#0c9a6b;border-color:#0c9a6b}
html[data-accent="green"] .portfolio-panel .eyebrow,html[data-accent="green"] .portfolio-panel .step-index,html[data-accent="green"] .portfolio-panel .process-list li>span,html[data-accent="green"] .portfolio-panel .contact .booking-points li::before{color:#047857}
html[data-accent="green"] .calendar-nav button:focus-visible,html[data-accent="green"] .calendar-day:focus-visible,html[data-accent="green"] .slot-grid button:focus-visible{outline-color:#10b981}

/* Nav labels never wrap; on narrow desktops the colour label and the button arrow give way to the longer CTA. */
html[data-theme="portfolio"] .site-nav>a{white-space:nowrap}
@media(min-width:901px) and (max-width:1050px){
  html[data-theme="portfolio"] .palette-label,html[data-theme="portfolio"] .site-nav>.button .icon{display:none}
  html[data-theme="portfolio"] .site-nav>.button{padding-inline:15px}
}