/* Approved homepage: native carousel, project archive and service links. */
#featured-projects { text-align:left; color:var(--color-text-body); }
#featured-projects [hidden] { display:none!important; }
#featured-projects .ps-heading { margin-bottom:var(--space-6); }
#featured-projects h2 { margin:0; color:var(--color-brand-navy); font-size:clamp(26px,2.6vw,36px); font-weight:800; letter-spacing:-.025em; line-height:1.2; text-transform:none; }
#featured-projects a.ps-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--color-border-default); border-radius:var(--radius-md); overflow:hidden; color:var(--color-text-body); background:var(--color-surface-page); text-decoration:none; box-shadow:none; transition:border-color var(--motion-standard),box-shadow var(--motion-standard); }
#featured-projects a.ps-card:hover { opacity:1!important; border-color:var(--color-border-accent); box-shadow:var(--shadow-soft); }
#featured-projects a:focus-visible, #featured-projects button:focus-visible, #featured-projects .nr-rail:focus-visible { outline:var(--focus-ring); outline-offset:4px; }
#featured-projects a.ps-need-main:focus-visible { outline-offset:-4px; }
#featured-projects .ps-media { display:block; position:relative; width:100%; aspect-ratio:1.8; flex-shrink:0; background:var(--color-surface-subtle); overflow:hidden; border-bottom:1px solid var(--color-border-default); }
#featured-projects .ps-media > img { display:block; width:100%; height:100%; object-fit:cover; }
#featured-projects .ps-media-logo { background:var(--color-surface-page); }
#featured-projects .ps-media-logo > img { object-fit:contain; padding:25px 30px; }
#featured-projects .ps-media-top > img { object-position:center top; }
#featured-projects .ps-card-copy { display:flex; flex-direction:column; flex:1; min-width:0; padding:var(--space-5); }
#featured-projects .ps-card-copy h4 { margin:0; color:var(--color-brand-navy); font-size:var(--font-size-base); font-weight:600; line-height:var(--line-height-snug); letter-spacing:0; text-transform:none; }
#featured-projects .ps-result { display:block; padding-top:var(--space-3); margin-top:auto; }
#featured-projects .ps-result > strong { display:block; color:var(--color-action-primary-dark); font-size:var(--font-size-3xl); font-weight:800; line-height:1.25; letter-spacing:-.035em; }
#featured-projects .ps-result > span { display:block; color:var(--color-text-muted); font-size:var(--font-size-xs); line-height:var(--line-height-normal); margin-top:3px; }
#featured-projects .ps-result-text > strong { font-size:var(--font-size-2xl); letter-spacing:-.015em; }
#featured-projects .ps-read { display:inline-flex; align-items:center; align-self:flex-start; gap:var(--space-1); min-height:var(--control-min-size); margin-top:var(--space-3); color:var(--color-action-primary); font-size:var(--font-size-xs); font-weight:650; }
#featured-projects a.ps-card:hover .ps-read { text-decoration:underline; text-underline-offset:4px; }
#featured-projects .ps-need { min-width:0; display:grid; grid-template-rows:subgrid; grid-row:span 2; scroll-snap-align:start; }
#featured-projects .ps-need-heading { position:relative; padding:0 15px var(--space-5) 0; }
#featured-projects .ps-need-heading h3 { margin:0; color:var(--color-brand-navy); font-size:21px; font-weight:750; line-height:var(--line-height-snug); letter-spacing:-.015em; text-transform:none; }
#featured-projects .ps-need-heading p { margin:var(--space-3) 0 0; font-size:13px; line-height:1.65; color:var(--color-text-muted); }
#featured-projects .nr-showcase { position:relative; display:flow-root; }
/* Gutters keep the hover shadow inside the horizontal clipping boundary. */
#featured-projects .nr-rail { display:grid; grid-template-rows:auto 1fr; grid-auto-flow:column; grid-auto-columns:calc((100% - var(--space-5) * 2) / 3); gap:0 var(--space-5); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--space-5); padding:0 var(--space-5) var(--space-8); margin:0 calc(var(--space-5) * -1) calc(var(--space-6) * -1); scrollbar-width:thin; scrollbar-color:var(--color-border-accent) transparent; }
#featured-projects .nr-showcase[data-ready] .nr-rail { scrollbar-width:none; }
#featured-projects .nr-showcase[data-ready] .nr-rail::-webkit-scrollbar { display:none; }
#featured-projects .nr-controls { display:flex; align-items:center; gap:var(--space-2); position:absolute; top:50%; left:calc(var(--control-min-size) / -2); right:calc(var(--control-min-size) / -2); transform:translateY(-50%); justify-content:space-between; pointer-events:none; }
#featured-projects .nr-controls button { display:grid; place-items:center; min-width:var(--control-min-size); min-height:var(--control-min-size); padding:var(--space-2); border:1px solid var(--color-border-default); border-radius:var(--radius-pill); background:var(--color-surface-page); color:var(--color-action-primary); cursor:pointer; pointer-events:auto; }
#featured-projects .nr-controls button:hover:enabled { border-color:var(--color-action-primary); background:var(--color-surface-accent); }
#featured-projects .nr-controls button:disabled { color:var(--color-text-subtle); cursor:default; }
#featured-projects .nr-controls button.nr-next:enabled { background:var(--color-action-primary-dark); color:var(--color-surface-page); border-color:var(--color-action-primary-dark); box-shadow:var(--shadow-soft); }
#featured-projects .nr-controls button.nr-next:hover:enabled { background:var(--color-action-primary); border-color:var(--color-action-primary); }
#featured-projects .nr-position { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#featured-projects .nr-consultation { background:var(--color-surface-accent); }
#featured-projects .nr-plan { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%; height:100%; padding:var(--space-4); color:var(--color-action-primary); }
#featured-projects .nr-plan-note { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); min-width:0; }
#featured-projects .nr-plan-note svg { width:var(--control-min-size); height:var(--control-min-size); padding:var(--space-2); border:1px solid var(--color-border-accent); border-radius:var(--radius-sm); background:var(--color-surface-page); }
#featured-projects .nr-plan-note b { font-size:var(--font-size-xs); font-weight:600; color:var(--color-brand-navy); white-space:nowrap; }
#featured-projects .nr-plan-arrow { font-size:var(--font-size-lg); padding-bottom:var(--space-5); }
/* Secondary archive, progressively enhanced: all projects remain readable without JS. */
#featured-projects .ex-archive { margin:var(--space-6) 0 0; padding:var(--space-6) 0 0; border:0; border-top:1px solid var(--color-border-default); text-align:left; }
#featured-projects .ex-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-5); margin-bottom:var(--space-5); }
#featured-projects .ex-heading h3 { margin:0; color:var(--color-brand-navy); font-size:var(--font-size-2xl); font-weight:700; line-height:var(--line-height-snug); letter-spacing:0; text-transform:none; }
#featured-projects .ex-preview { position:relative; }
#featured-projects button.ex-preview-toggle { position:absolute; z-index:4; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; border-radius:var(--radius-md); background:transparent; box-shadow:none; cursor:pointer; }
#featured-projects .ex-window { position:relative; }
#featured-projects .ex-archive[data-expanded="false"] .ex-window { height:calc(var(--space-8) * 4 + var(--space-4)); overflow:hidden; }
#featured-projects .ex-archive[data-expanded] .ex-window::after { content:""; position:absolute; z-index:4; inset:calc(var(--space-8) * 2 + var(--space-6)) 0 0; pointer-events:none; background:linear-gradient(180deg,transparent,var(--color-surface-page) 85%); }
#featured-projects .ex-archive[data-expanded="true"] .ex-window::after { opacity:0; }
#featured-projects .ex-archive .ex-window[data-animating="true"] { overflow:hidden; overflow-anchor:none; }
#featured-projects .ex-archive[data-expanded="false"] .exp-card-goto { visibility:hidden; }
#featured-projects .ex-more { display:flex; justify-content:center; position:relative; z-index:5; margin-top:calc(var(--space-5) * -1); }
#featured-projects .ex-toggle { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:var(--control-min-size); padding:var(--space-2) var(--space-4); border:1px solid var(--color-border-accent); border-radius:var(--radius-pill); background:var(--color-surface-page); color:var(--color-action-primary); font-family:inherit; font-size:var(--font-size-sm); font-weight:600; line-height:var(--line-height-normal); cursor:pointer; flex-shrink:0; }
#featured-projects .ex-toggle:hover { border-color:var(--color-action-primary); background:var(--color-surface-accent); }
#featured-projects .ex-archive .filter-chips { margin:0 0 var(--space-5); padding:0; gap:var(--space-2); overflow-x:auto; }
#featured-projects .ex-archive .filter-chip { position:relative; min-height:calc(var(--space-6) + var(--space-1)); font-size:var(--font-size-sm); padding:var(--space-1) var(--space-3); flex-shrink:0; white-space:nowrap; }
#featured-projects .ex-archive .exp-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); align-items:stretch; margin:0; padding:0; }
#featured-projects .ex-archive .exp-card { margin:0!important; grid-column:auto; padding:var(--space-4); border-radius:var(--radius-md); box-shadow:none; background:linear-gradient(to left,color-mix(in srgb,var(--color-surface-accent) 55%,var(--color-surface-page)) 0%,var(--color-surface-page) 55%); }
#featured-projects .ex-archive .exp-card::before, #featured-projects .ex-archive .exp-card::after, #featured-projects .ex-archive .exp-timeline::before { display:none; }
#featured-projects .ex-archive .exp-card:hover { transform:none; border-color:var(--color-border-accent); box-shadow:none; }
#featured-projects .ex-archive .exp-body { height:100%; gap:var(--space-3); }
#featured-projects .ex-archive .exp-top { flex-direction:row; align-items:flex-start; gap:var(--space-4); }
#featured-projects .ex-archive .exp-logo { width:clamp(144px,15vw,213px); height:120px; flex:0 0 clamp(144px,15vw,213px); margin:0; box-shadow:none; }
#featured-projects .ex-archive .exp-logo img { box-shadow:none; }
#featured-projects .ex-archive .exp-text { gap:var(--space-2); }
#featured-projects .ex-archive .exp-header { flex-direction:row; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
#featured-projects .ex-archive .exp-title { font-size:var(--font-size-base); font-weight:600; line-height:var(--line-height-snug); }
#featured-projects .ex-archive .exp-summary { font-size:var(--font-size-md); line-height:var(--line-height-relaxed); }
#featured-projects .ex-archive .exp-period { margin-left:auto; font-size:var(--font-size-xs); line-height:var(--line-height-normal); color:var(--color-text-muted); }
#featured-projects .ex-archive .exp-footer { padding-left:0; flex-wrap:wrap; gap:var(--space-2); overflow:visible; }
#featured-projects .ex-archive .exp-footer .exp-card-goto { margin-left:auto; font-size:var(--font-size-xs); }
#featured-projects .ex-archive .exp-footer .project-note, #featured-projects .ex-archive .exp-footer .exp-links { max-width:100%; white-space:normal; }
/* Service navigation keeps the approved icon-left, arrow-right proportions. */
#featured-projects .rs-services { margin-top:var(--space-8); text-align:left; }
#featured-projects .rs-services > h3 { margin:0 0 var(--space-4); font-size:var(--font-size-2xl); font-weight:700; line-height:var(--line-height-snug); color:var(--color-brand-navy); text-transform:none; letter-spacing:0; }
#featured-projects .rs-service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
#featured-projects a.rs-service-card { display:grid; grid-template-columns:var(--control-min-size) minmax(0,1fr) auto; gap:var(--space-3); align-items:center; grid-column:auto; min-height:calc(var(--control-min-size) + var(--space-6) * 2); padding:var(--space-4) var(--space-5); box-shadow:none; border-radius:var(--radius-md); color:var(--color-text-body); }
#featured-projects .rs-service-copy { order:1; display:grid; row-gap:var(--space-1); min-width:0; }
#featured-projects .rs-service-copy h4 { margin:0; font-size:var(--font-size-md); font-weight:700; line-height:var(--line-height-snug); color:var(--color-brand-navy); letter-spacing:0; text-transform:none; white-space:nowrap; }
#featured-projects .rs-service-copy p { margin:0; font-size:var(--font-size-xs); font-weight:400; line-height:var(--line-height-normal); color:var(--color-text-muted); text-transform:none; letter-spacing:0; }
#featured-projects .rs-service-arrow { order:2; font-size:var(--font-size-md); color:var(--color-action-primary); }
#featured-projects .rs-service-card .service-item-icon { order:0; width:var(--control-min-size); height:var(--control-min-size); border-radius:var(--radius-sm); }
#featured-projects .rs-service-card .service-item-icon svg { width:23px; height:23px; }
#featured-projects a.rs-service-card:hover { opacity:1!important; background:var(--color-surface-accent); border-color:var(--color-border-accent); box-shadow:none; transform:none; }
#featured-projects a.rs-service-card:focus-visible { background:var(--color-surface-accent); }
#featured-projects .ps-next-step { display:grid; grid-template-columns:minmax(0,1fr) max-content; grid-template-rows:auto auto; align-items:center; gap:var(--space-2) var(--space-5); padding:22px 25px; margin-top:30px; border-radius:var(--radius-md); background:var(--color-surface-accent); }
#featured-projects .ps-next-step > span { display:grid; grid-template-rows:subgrid; grid-row:span 2; align-items:center; min-width:0; }
#featured-projects .ps-next-step strong { display:block; }
#featured-projects .ps-next-step strong { color:var(--color-brand-navy); font-size:17px; font-weight:700; }
#featured-projects .ps-next-step > span > span { display:block; color:var(--color-text-body); font-size:13px; margin:0; }
#featured-projects .ps-next-step .case-primary-button { width:100%; min-height:var(--control-min-size); white-space:nowrap; justify-content:center; font-size:13px; padding:11px 18px; }
#featured-projects .ps-next-step-action { display:grid; grid-template-rows:subgrid; grid-row:span 2; align-items:center; max-width:100%; }
#featured-projects .ps-chat-hint { max-width:calc(var(--space-8) * 6); color:var(--color-text-body); font-size:var(--font-size-xs); line-height:var(--line-height-normal); text-align:center; }
@media(min-width:961px) and (max-width:1100px){
  #featured-projects a.rs-service-card { padding:var(--space-4); gap:var(--space-2); }
}
@media(max-width:960px){
  #featured-projects h2 { font-size:var(--font-size-3xl); }
  #featured-projects .ps-need-heading h3 { font-size:23px; }
  #featured-projects .ps-need-heading p { font-size:14px; }
  #featured-projects .nr-rail { grid-auto-columns:calc((100% - var(--space-5)) / 2); padding-inline:var(--space-4); margin-inline:calc(var(--space-4) * -1); scroll-padding-inline:var(--space-4); }
  #featured-projects .nr-controls { left:var(--space-2); right:var(--space-2); }
  #featured-projects .ex-archive .exp-timeline, #featured-projects .rs-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #featured-projects .ex-archive .exp-timeline { grid-template-columns:minmax(0,1fr); }
  #featured-projects .ps-next-step { padding:var(--space-5); }
}
@media(max-width:600px){
  #featured-projects .ps-need-heading { padding-bottom:var(--space-4); }
  #featured-projects .nr-rail { column-gap:var(--space-4); grid-auto-columns:calc(100% - var(--space-6)); }
  #featured-projects .nr-controls { position:static; transform:none; justify-content:center; margin-top:var(--space-3); pointer-events:auto; }
  #featured-projects .ex-archive { margin-top:var(--space-5); padding-top:var(--space-5); }
  #featured-projects .ex-archive[data-expanded="false"] .ex-window { height:calc(var(--space-8) * 5 + var(--space-6)); }
  #featured-projects .ex-archive[data-expanded] .ex-window::after { inset:calc(100% - var(--space-8) * 2) 0 0; }
  #featured-projects .ex-heading { align-items:flex-start; flex-direction:column; gap:var(--space-3); }
  #featured-projects .ex-archive .filter-chips { padding:var(--space-1) 0; margin-bottom:calc(var(--space-5) - var(--space-1)); }
  #featured-projects .ex-archive .exp-card { padding:var(--space-3); }
  #featured-projects .ex-archive .exp-top { flex-direction:column; gap:var(--space-3); }
  #featured-projects .ex-archive .exp-logo { width:min(100%,213px); height:120px; flex-basis:auto; }
  #featured-projects .ex-archive .exp-text { width:100%; }
  #featured-projects .rs-service-grid { grid-template-columns:1fr; gap:var(--space-3); }
  #featured-projects a.rs-service-card { gap:var(--space-2); min-height:calc(var(--control-min-size) + var(--space-6) + var(--space-5)); padding:var(--space-4); }
  #featured-projects .rs-service-copy h4 { font-size:var(--font-size-base); }
  #featured-projects .rs-service-copy p { font-size:var(--font-size-sm); }
  #featured-projects .ps-next-step { display:flex; flex-direction:column; align-items:start; gap:17px; }
  #featured-projects .ps-next-step > span, #featured-projects .ps-next-step-action { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2); }
  #featured-projects .ps-next-step-action { width:100%; }
  #featured-projects .ps-chat-hint { width:100%; max-width:none; }
  #featured-projects .ps-next-step .case-primary-button { width:100%; justify-content:center; }
}
@media(prefers-reduced-motion:reduce){
  #featured-projects a.ps-card, #featured-projects a.rs-service-card { transition:none; }
}

/* Supporting sections share the approved typography and spacing. */
#content.homepage-content > .section-band,
#content.homepage-content > .project-sections.section-band {
  padding-top:calc(var(--space-8) + var(--space-5));
  padding-bottom:calc(var(--space-8) + var(--space-5));
}
#content.homepage-content .ui-section-heading {
  color:var(--color-brand-navy); font-size:clamp(26px,2.6vw,36px); font-weight:800;
  letter-spacing:-.025em; line-height:1.2; text-transform:none; text-align:left;
  margin:0 0 var(--space-6);
}
#content.homepage-content .ui-section-heading::after { display:none; }
#featured-projects .ps-heading { margin-bottom:var(--space-6); }
#content.homepage-content .ui-about-grid {
  display:grid; grid-template-columns:1.35fr 1fr; gap:var(--space-8); text-align:left;
}
#content.homepage-content .ui-about-grid p {
  font-size:var(--font-size-md); line-height:var(--line-height-relaxed);
  color:var(--color-text-body); margin:0 0 var(--space-4);
}
#content.homepage-content .ui-about-grid p:last-child { margin-bottom:0; }
#content.homepage-content .ui-about-personal { border-left:1px solid var(--color-border-default); padding-left:var(--space-8); }
#content.homepage-content .intro-facts { gap:var(--space-2); margin-top:var(--space-5); }
#content.homepage-content .intro-fact { background:var(--color-surface-page); border-color:var(--color-border-default); }
#content.homepage-content .ui-education .project-section-heading { margin-bottom:0; }
#content.homepage-content .ui-education .exp-timeline { margin:0; padding:0; }
#content.homepage-content .ui-education > .exp-timeline > .exp-card {
  padding:var(--space-5); border-radius:var(--radius-md); box-shadow:none;
}
#content.homepage-content .ui-education > .exp-timeline > .exp-card:hover { transform:none; border-color:var(--color-border-accent); }
#content.homepage-content .ui-education .exp-top { gap:var(--space-5); }
#content.homepage-content .ui-education .exp-logo {
  width:160px; height:92px; flex:0 0 160px; margin:0; border-radius:var(--radius-sm); box-shadow:none;
  background:var(--color-surface-subtle); border:1px solid var(--color-border-default);
}
#content.homepage-content .ui-education .exp-title { font-size:var(--font-size-lg); line-height:var(--line-height-snug); color:var(--color-brand-navy); }
#content.homepage-content .ui-education .exp-header { margin-bottom:var(--space-3); }
#content.homepage-content .ui-education .exp-sub { margin-top:var(--space-4); }
#content.homepage-content .ui-education .exp-sub-title { font-size:var(--font-size-md); }
#content.homepage-content .ui-technology { --section-band-bg:var(--color-surface-subtle); }
#content.homepage-content .ui-technology .skills-showcase { gap:var(--space-6); }
#content.homepage-content .ui-technology .skills-panel {
  padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible;
}
#content.homepage-content .ui-technology .skills-panel:hover { transform:none; box-shadow:none; }
#content.homepage-content .ui-technology .skills-panel-header {
  text-align:left; margin:0 0 var(--space-5); padding:0; border:0;
}
#content.homepage-content .ui-technology .skills-panel-header h3 { margin:0; }
#content.homepage-content .ui-technology .skills-groups { gap:var(--space-6) var(--space-8); }
#content.homepage-content .ui-technology .skills-group { gap:var(--space-3); }
#content.homepage-content .ui-technology .skills-chip { min-height:1.9rem; }
#content.homepage-content .ui-technology .skills-panel-earlier { padding-top:var(--space-6); border-top:1px solid var(--color-border-default); }
#content.homepage-content .skills-panel-earlier .skills-panel-header h3 { color:var(--color-text-muted); }
#content.homepage-content .skills-panel-earlier .skills-group h4 { color:var(--color-text-heading); }
#content.homepage-content .skills-panel-earlier .skills-chip { color:var(--color-text-muted); background:var(--color-surface-page); border-color:var(--color-border-default); }
@media(max-width:960px){
  #content.homepage-content > .section-band,
  #content.homepage-content > .project-sections.section-band { padding-top:var(--space-8); padding-bottom:var(--space-8); }
  #content.homepage-content .ui-section-heading { font-size:28px; }
  #content.homepage-content .ui-about-grid { gap:var(--space-5); grid-template-columns:1fr; }
  #content.homepage-content .ui-about-personal { border-left:0; padding-left:0; border-top:1px solid var(--color-border-default); padding-top:var(--space-5); }
  #content.homepage-content .ui-education .exp-header { flex-direction:column; align-items:flex-start; }
}
@media(max-width:600px){
  #content.homepage-content .ui-education .exp-top { flex-direction:column; gap:var(--space-4); }
  #content.homepage-content .ui-education .exp-logo { width:140px; height:80px; flex:0 0 auto; }
  #content.homepage-content .ui-education > .exp-timeline > .exp-card { padding:var(--space-4); }
  #content.homepage-content .ui-technology .skills-groups { grid-template-columns:1fr; }
}