:root{--paper:#f6f5ef;--ink:#173b38;--muted:#596a63;--line:#d6dcd1;--accent:#d4e985}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #7e9c27;outline-offset:6px}
.wrap{max-width:1200px;margin:auto;padding:0 48px}
header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.nav{height:88px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:19px;letter-spacing:-.6px}
.brand span{display:inline-grid;place-items:center;background:var(--ink);color:var(--paper);width:34px;height:34px;border-radius:50%;margin-right:10px;font-size:12px;letter-spacing:0}
nav{display:flex;gap:30px;font-size:14px}
nav a:hover{border-bottom:1px solid}
.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:bold}
.hero{padding:85px 0 65px;position:relative}
.location{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}
.dot{height:7px;width:7px;background:#557d39;border-radius:50%}
h1{font-size:clamp(56px,7.3vw,96px);line-height:1.03;letter-spacing:-6px;max-width:960px;margin:32px 0}
h1 em{font-family:Georgia,serif;font-weight:400}
p{color:var(--muted)}
.intro{max-width:530px;font-size:18px;line-height:1.75}
.actions{display:flex;gap:24px;align-items:center;margin-top:30px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:35px;padding:14px 22px;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:4px;font-size:14px}
.button:hover{background:#29564c}
.text-link{font-size:14px;border-bottom:1px solid;padding-bottom:3px}
.hero-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;margin-top:64px;font-size:12px;color:var(--muted)}
section{padding:65px 0;border-top:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}
.section-head p{max-width:295px;font-size:14px;margin:0}
h2{font-size:44px;letter-spacing:-2px;line-height:1.15;margin:10px 0 0}
h3{font-size:28px;letter-spacing:-1px;line-height:1.2;margin:12px 0}
.project{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.visual{background:#dfe7da;min-height:360px;padding:36px;display:flex;flex-direction:column;justify-content:center;position:relative}
.art{border:1px solid #a9b8a4;border-radius:12px;padding:30px;box-shadow:0 18px 40px #193c3712;background:#edf1e7;transform:rotate(-3deg)}
.art-name{font-size:42px;letter-spacing:-2px;font-weight:bold}
.art-line{height:7px;background:#d1dbc8;margin-top:14px;border-radius:8px;width:60%}
.art-line.short{width:38%}
.seal{width:64px;height:64px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:30px;margin-bottom:35px}
.caption{font-size:10px;letter-spacing:1px;text-transform:uppercase;position:absolute;bottom:16px;left:24px;color:#52644e}
.project-copy{padding:42px}
.tag{display:inline-block;font-size:11px;border:1px solid #b5c3ad;padding:4px 10px;border-radius:30px}
.project-copy p{font-size:15px}
.project-meta{font-size:12px;color:var(--muted);padding-top:18px;margin:24px 0;border-top:1px solid var(--line)}
.outline{background:transparent;color:var(--ink)}
.outline:hover{background:#e7ecde}
.other{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.small-card{border:1px solid var(--line);padding:28px;border-radius:8px}
.small-card h3{font-size:22px}
.small-card p{font-size:14px}
.number{font:12px monospace;color:var(--muted)}
.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}
.about-copy p{margin-top:0}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}
.principles strong{font-size:14px}
.principles p{font-size:13px}
.contact{background:var(--ink);color:var(--paper);border-radius:8px;padding:48px;display:grid;grid-template-columns:1.3fr 1fr;gap:50px}
.contact h2{font-size:48px}
.contact p{color:#cfdbd2}
.contact-note{border-left:1px solid #56716a;padding-left:30px;align-self:center;font-size:14px}
.contact-note strong{display:block;color:var(--accent);font-size:12px;letter-spacing:1px;text-transform:uppercase}
footer{display:flex;justify-content:space-between;padding:30px 0;font-size:12px;color:var(--muted)}
.draft{background:#e9eddc;padding:9px 20px;text-align:center;font-size:11px;color:#4d6145}
.dialog{border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);width:min(650px,90vw);padding:35px;max-height:85vh;overflow:auto}
.dialog::backdrop{background:#102b28aa}
.close{float:right;border:1px solid var(--line);background:transparent;border-radius:50%;width:36px;height:36px}
.dialog h2{font-size:35px;margin-bottom:20px}
.dialog h3{font-size:18px;letter-spacing:0;margin-top:25px}
.dialog p{font-size:14px}
.placeholder{padding:18px;background:#e8ecdf;border-radius:5px;font-size:13px;color:var(--muted)}
@media(max-width:750px){.wrap{padding:0 23px}
.nav{height:74px}
nav{gap:17px;font-size:12px}
.brand{font-size:16px}
.brand span{display:none}
.hero{padding:55px 0 40px}
h1{letter-spacing:-3px;font-size:58px}
.hero-foot{gap:20px;margin-top:42px}
.hero-foot span:last-child{display:none}
.section-head{display:block}
.section-head p{margin-top:18px}
.project,.about-grid,.contact{grid-template-columns:1fr}
.visual{min-height:300px}
.project-copy{padding:28px}
.other{grid-template-columns:1fr}
.about-grid{gap:25px}
.principles{gap:12px}
.contact{padding:28px;gap:20px}
.contact h2{font-size:39px}
.contact-note{border-left:0;border-top:1px solid #56716a;padding:20px 0 0}
section{padding:45px 0}
h2{font-size:37px}
footer{gap:20px}
.actions{gap:20px}
.button{gap:22px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


/* Palette adaptations from supplied visual references; not exact source hex codes. */
:root{--paper:#f7f2e7;--ink:#103d52;--muted:#4b6370;--line:#cdd6d4;--accent:#e3d4ae;--surface:#dce6e7;--card:#edf2ef;--soft:#c5d6d8;--highlight:#376b83;--on-dark:#f7f2e7}

.theme-bar{display:flex;justify-content:flex-end;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid var(--line);font-size:12px}
.theme-bar label{font-weight:bold}
.theme-bar select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:4px;padding:9px;max-width:100%}
.theme-status{color:var(--muted);font-size:11px}
.theme-swatches{display:flex;gap:4px}
.theme-swatches i{width:13px;height:13px;border-radius:50%;border:1px solid var(--line);background:var(--ink)}
.theme-swatches i+ i{background:var(--accent)}
.theme-swatches i+ i+ i{background:var(--paper)}

.visual,.placeholder,.draft{background:var(--surface);color:var(--muted)}
.art{background:var(--card);border-color:var(--line);box-shadow:0 18px 40px #00000012}
.art-line{background:var(--soft)}
.caption{color:var(--muted)}
.tag{border-color:var(--line)}
.dot{background:var(--highlight)}
.art-name span{color:var(--highlight)!important}
.button{background:var(--ink);color:var(--on-dark)}
.button:hover{background:var(--highlight);color:var(--on-dark)}
.button.outline{background:transparent;color:var(--ink)}
.button.outline:hover{background:var(--surface);color:var(--ink)}
.contact{color:var(--on-dark)}
.contact p{color:var(--on-dark)}
.contact-note{border-color:var(--accent)}
.contact .button.outline{color:var(--on-dark)!important;border-color:var(--accent)!important}
.contact .button.outline:hover{color:var(--ink)!important}
.contact-note strong{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid var(--highlight);outline-offset:4px}
@media(max-width:750px){.theme-bar{justify-content:flex-start;gap:8px}
.theme-status{width:100%}
}


/* Readability and visual rhythm */
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:18px;line-height:1.7}
.wrap{max-width:1240px}
p{max-width:65ch}
.eyebrow,.number{font-size:14px;letter-spacing:1.3px}
.brand{font-size:20px}
nav{font-size:15px}
.location{font-size:15px}
.hero{padding:66px 0 30px}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:55px;align-items:center}
.hero-name{font-size:16px;font-weight:650;letter-spacing:.2px;margin-top:28px}
h1{font-size:clamp(48px,5.5vw,68px);letter-spacing:-2.8px;line-height:1.1;margin:18px 0 24px}
h1 em{font:inherit;color:var(--highlight)}
.intro{font-size:18px;line-height:1.7}
.button,.text-link{font-size:15px}
.button{min-height:48px;transition:transform .2s ease,background .2s ease}
.button:hover{transform:translateY(-3px)}
.hero-foot{font-size:14px;margin-top:40px}
.hero-showcase{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;position:relative}
.preview-kicker{font-size:14px;color:var(--muted);display:flex;justify-content:space-between}
.preview-window{margin:25px 0;background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 15px 30px #0000000d;transform:rotate(-3deg);transition:transform .3s}
.hero-showcase:hover .preview-window{transform:rotate(0)}
.window-bar{display:flex;gap:5px;padding:13px;border-bottom:1px solid var(--line)}
.window-bar i{width:7px;height:7px;border-radius:50%;background:var(--soft)}
.window-content{padding:28px}
.window-content strong{font-size:30px;letter-spacing:-1px}
.window-content p{font-size:15px;margin:8px 0 22px}
.preview-marker{display:inline-block;background:var(--accent);color:var(--ink);padding:6px 12px;font-size:14px;border-radius:5px}
.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:14px}
.preview-bottom a{font-weight:650}
.section-head p{font-size:16px}
h2{font-size:38px;letter-spacing:-1.3px;line-height:1.2}
h3{font-size:28px}
.project-copy p,.small-card p,.dialog p{font-size:17px;line-height:1.7}
.project-meta,.tag{font-size:14px}
.caption{font-size:12px;letter-spacing:.3px}
.project,.small-card{transition:transform .25s,border-color .25s}
.project:hover,.small-card:hover{transform:translateY(-4px);border-color:var(--highlight)}
.project{border-radius:14px}
.small-card{border-radius:14px}
.project-copy{padding:36px}
.about-grid{grid-template-columns:.9fr 1.1fr;gap:65px}
.photo-space{margin-top:28px;max-width:310px;aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line);border-radius:100px 100px 16px 16px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;gap:8px}
.photo-space svg{width:65px;height:65px;stroke:var(--highlight)}
.photo-space strong{font-size:16px}
.photo-space span{font-size:14px;color:var(--muted)}
.personal-note{display:flex;align-items:center;gap:10px;margin:26px 0;padding:14px 18px;border-left:3px solid var(--highlight);background:var(--card);font-size:16px}
.principles{grid-template-columns:1fr;margin-top:28px;gap:0}
.principles>div{display:grid;grid-template-columns:155px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line)}
.principles strong{font-size:16px}
.principles p{font-size:16px;margin:0}
.contact{border-radius:16px}
.contact h2{font-size:40px}
.contact-note,.contact-note strong,footer,.theme-bar,.theme-status{font-size:14px}
.draft{font-size:13px}
.reveal{animation:enter .65s ease both}
@keyframes enter{from{opacity:0;transform:translateY(15px)}
to{opacity:1;transform:translateY(0)}
}
.hero-showcase{animation:enter .8s ease both}
.skip{position:absolute;left:15px;top:-100px;background:var(--ink);color:var(--on-dark);padding:12px;z-index:20}
.skip:focus{top:10px}
@media(max-width:850px){.hero-grid{grid-template-columns:1fr;gap:32px}
.hero-showcase{max-width:500px}
.about-grid{gap:35px}
.hero-name{margin-top:20px}
}
@media(max-width:750px){body{font-size:17px}
.hero{padding:38px 0 26px}
h1{font-size:42px;letter-spacing:-1.7px}
.intro{font-size:17px}
.hero-foot{font-size:13px}
h2{font-size:30px}
h3{font-size:24px}
.project-copy p,.small-card p,.dialog p{font-size:17px}
.about-grid{grid-template-columns:1fr}
.photo-space{max-width:280px}
.principles>div{grid-template-columns:1fr;gap:6px}
.contact h2{font-size:32px}
.nav{height:76px}
nav{gap:14px;font-size:14px}
.brand{font-size:17px}
.project-copy{padding:25px}
.caption{font-size:12px}
.hero-foot span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.project:hover,.small-card:hover,.button:hover{transform:none}
.preview-window{transform:none}
}


/* Stronger typography and mood controls */
body{font-family:"Segoe UI",Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-weight:500}
p{color:var(--ink)}
h1,h2,h3,.brand{font-weight:800}
h1 em{font-weight:800}
.intro,.about-copy>p,.project-copy p,.small-card p{font-weight:550}
.eyebrow,.hero-name,.button,.text-link,nav,.tag{font-weight:700}
.mood-panel{margin-top:24px;padding:22px 24px;border:1px solid var(--line);background:var(--card);border-radius:16px}
.mood-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mood-heading strong{display:block;font-size:19px;font-weight:800}
.mood-heading span{font-size:14px;color:var(--ink)}
.theme-bar{justify-content:flex-start;border:0;padding:16px 0 12px;gap:12px;font-weight:650}
.theme-bar select{font-weight:650;min-height:44px;background:var(--paper);color:var(--ink)}
.size-control{display:flex;align-items:center;gap:10px;margin-left:auto}
.reset-theme{border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);font-size:14px;font-weight:700;padding:8px;min-height:44px}
.palette-options{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 10px}
.palette-option{display:flex;gap:7px;align-items:center;background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:8px 11px;border-radius:24px;font-size:13px;font-weight:650;min-height:44px}
.palette-option[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:1px}
.palette-dot{width:16px;height:16px;display:inline-block;border-radius:50%;border:1px solid #0003}
.theme-tip{position:relative}
.theme-tip button{width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;background:var(--paper);color:var(--ink);font-weight:800}
.theme-tip [role="tooltip"]{display:none;position:absolute;right:0;top:48px;width:min(280px,75vw);padding:15px;background:var(--ink);color:var(--on-dark);border-radius:10px;font-size:14px;line-height:1.6;z-index:10;box-shadow:0 8px 24px #0002}
.theme-tip:hover [role="tooltip"],.theme-tip:focus-within [role="tooltip"],.theme-tip.open [role="tooltip"]{display:block}
.theme-status,.project-meta,.caption{color:var(--ink);font-weight:550}
.contact p{font-weight:550}
html[data-text-size="large"] body{font-size:20px}
html[data-text-size="larger"] body{font-size:22px}
html[data-text-size="large"] :is(.intro,.project-copy p,.small-card p,.dialog p,.about-copy>p,.principles p,.personal-note){font-size:20px}
html[data-text-size="larger"] :is(.intro,.project-copy p,.small-card p,.dialog p,.about-copy>p,.principles p,.personal-note){font-size:22px}
html[data-text-size="large"] h1{font-size:clamp(48px,6vw,74px)}
html[data-text-size="larger"] h1{font-size:clamp(50px,6.5vw,80px)}
@media(max-width:750px){.mood-panel{padding:18px}
.size-control{margin-left:0}
.theme-bar{gap:10px}
.theme-bar>label{width:100%}
.theme-bar select{max-width:100%}
.palette-option{font-size:13px}
.mood-heading strong{font-size:18px}
.mood-heading span{font-size:14px}
html[data-text-size="large"] h1{font-size:46px}
html[data-text-size="larger"] h1{font-size:50px}
}


/* Compact preferences: projects remain the focus. */
.compact-mood{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;margin-top:14px;padding:9px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:14px}
.compact-title{display:flex;align-items:center;gap:8px;margin-right:auto;white-space:nowrap}
.compact-title strong{font-size:14px;font-weight:700}
.compact-control{display:flex;align-items:center;gap:8px;white-space:nowrap}
.compact-control label{font-size:13px;font-weight:650}
.compact-control select{font:600 13px/1.4 "Segoe UI",Arial,sans-serif;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px 24px 7px 9px;min-height:40px;max-width:180px}
.compact-mood .theme-tip button{width:28px;height:28px;font-size:12px}
.compact-mood .reset-theme{font-size:22px;border:0;min-width:36px;padding:0;min-height:40px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.compact-mood .theme-tip [role="tooltip"]{left:0;right:auto;top:36px}
@media(max-width:750px){.compact-mood{gap:8px;padding:9px 0}
.compact-title strong{font-size:0}
.compact-title strong::after{content:'Mood';font-size:13px}
.compact-title{gap:5px;margin-right:0}
.compact-control{gap:4px;min-width:0}
.compact-control label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.compact-control select{font-size:12px;max-width:135px;width:100%;padding:7px 16px 7px 6px}
.compact-mood .theme-tip button{width:25px;height:25px}
.compact-mood .reset-theme{min-width:26px}
.compact-mood .theme-tip [role="tooltip"]{width:min(250px,70vw)}
}
@media(max-width:380px){.compact-mood{gap:5px}
.compact-title strong::after{content:''}
.compact-control select{max-width:124px}
}


.compact-mood{gap:12px}
.daily-quote{margin-right:auto;flex:1;min-width:130px;max-width:380px;line-height:1.45}
.quote-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
#daily-quote{font-size:14px;font-weight:600;display:block}
.compact-title{margin-right:0}
.compact-control{gap:6px}
.compact-control select{max-width:160px}
.compact-title strong{font-size:13px}
.compact-mood .theme-tip [role="tooltip"]{left:auto;right:0}
@media(max-width:1050px){.compact-title strong{font-size:0}
.compact-title strong::after{content:'Your mood';font-size:13px}
.compact-control label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}
@media(max-width:750px){.compact-mood{flex-wrap:wrap;justify-content:flex-end;gap:7px}
.daily-quote{flex:1 1 100%;max-width:none;margin-bottom:5px}
.compact-title{margin-right:auto}
.compact-title strong::after{content:'Your mood, your theme';font-size:12px}
#daily-quote{font-size:14px}
}
@media(max-width:430px){.compact-title strong::after{content:'Mood';font-size:12px}
.compact-control select{max-width:125px}
}
 
.portrait-frame{margin-top:28px;max-width:320px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.portrait-frame img{display:block;width:100%;height:auto;aspect-ratio:1192/1320;object-fit:cover}
.daily-quote{max-width:none}
.compact-control{flex-shrink:0}

@media(max-width:520px){.principles{grid-template-columns:1fr}.actions{flex-wrap:wrap}.compact-mood{gap:12px}.compact-control select{max-width:190px}nav{gap:12px}}

/* Real product imagery stays readable and links directly to SealRight. */
.product-visual{gap:18px;padding:24px;min-width:0;text-decoration:none}
.product-screenshot{display:block;width:100%;height:auto;object-fit:contain;border-radius:10px}
.product-visual .product-screenshot{border:1px solid var(--line);box-shadow:0 16px 36px #0002}
.product-caption{font-size:14px;font-weight:700;color:var(--ink)}
.product-preview{display:block}
.project-copy>.button{margin:0 8px 12px 0;gap:16px}
@media(max-width:750px){.product-visual{min-height:0;padding:18px}}

/* Dedicated Work page. */
.work-intro{padding:48px 0 36px}
.work-intro h1{margin-top:24px}
nav a[aria-current="page"]{border-bottom:2px solid var(--highlight);padding-bottom:4px}
@media(max-width:750px){.work-intro{padding:32px 0 24px}}

/* Shared header: contrasting theme colours on both pages. */
header[data-site-header]{background:var(--ink);color:var(--on-dark);border-bottom:1px solid var(--accent);min-height:88px}
header[data-site-header] .brand span{background:var(--accent);color:var(--ink)}
header[data-site-header] nav a[aria-current="page"]{border-bottom-color:var(--accent)}
header[data-site-header] :is(a:focus-visible){outline-color:var(--accent)}
header[data-site-header] nav a:hover{color:var(--accent)}
@media(max-width:750px){header[data-site-header]{min-height:76px}}

/* Shared featured-project slider. */
.hero-grid>div,.hero-grid>aside{min-width:0}
.project-slider{width:100%;max-width:540px;align-self:center}
.project-slider .preview-kicker{gap:12px;flex-wrap:wrap}
.project-slider .preview-window{transform:none;margin:22px 0;aspect-ratio:1363/936;background:var(--paper)}
.project-slider .product-screenshot{width:100%;height:100%;object-fit:cover;object-position:top}
.slider-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.slider-controls>button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:22px}
.slider-controls>button:hover{background:var(--accent)}
.slider-dots{display:flex;gap:4px}
.slider-dots button{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:var(--ink)}
.slider-dots button::after{content:'';width:9px;height:9px;border:1px solid currentColor;border-radius:50%}
.slider-dots button[aria-pressed="true"]::after{background:currentColor;transform:scale(1.3)}
@media(max-width:850px){.work-intro.hero-grid{gap:28px}}

/* Full-width project browsing on Work. */
.work-flow{margin-top:24px;margin-bottom:28px}
.hero-foot a{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.hero-foot a:hover{color:var(--ink)}
.work-heading{font-size:clamp(32px,4vw,44px);letter-spacing:-1.3px;line-height:1.2;margin:10px 0 0}
.detailed-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.detailed-controls button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);font-size:22px}
.detailed-controls button:hover{background:var(--accent)}
.detailed-controls span{font-size:15px;font-weight:700}
.project-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--highlight) var(--surface);padding:6px 0 16px;position:relative}
.project-track>.project{flex:0 0 100%;min-width:0;scroll-snap-align:start;align-self:stretch}
.project-track>.project:hover{transform:none}
.project-track .project-copy{min-width:0}
.work-flow~#work{scroll-margin-top:110px}
@media(max-width:750px){.hero-foot a{display:block!important}.project-track>.project{grid-template-columns:1fr}.project-track .product-visual{min-height:0}.work-flow{font-size:12px}.detailed-controls span{font-size:14px}}