/* Shared by the hub, photo and leather prototypes. In WordPress this becomes the gnecco-base parent theme stylesheet. */

:root{
  /* neutral greys by default; the repair site swaps in its browns in leather.css */
  --ground:#0E0E0F; --raised:#18181A; --band:#141415; --line:#2A2A2D; --line2:#3D3D41;
  --text:#EDEDEC; --soft:#C6C6C4; --muted:#9D9D9B; --danger:#F08A7A;
  --photo:#86AFD3; --leather:#CF8E52; --leather-ground:#18110C; --accent:var(--photo);
  --display:'Rota Pro','Rota Pro fallback',sans-serif;
  --body:var(--display);
  --label:'Gancode Mono','Gancode Mono fallback',ui-monospace,monospace;
  --pad:clamp(20px,5vw,64px);
  --radius:0px;
  --tap:44px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--hdr,0px) + 16px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--ground);color:var(--text);font:16px/1.6 var(--body)}
img{max-width:100%;display:block}
/* the hidden attribute must win over any component's display rule (.btn, flex rows), or JS can't hide them */
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* headings receive focus programmatically after a view change; no ring for that */
[tabindex="-1"]:focus{outline:none}
/* Until the router picks a view (deferred scripts run after first paint), show the first one, so the footer
   doesn't paint under the header and then jump down. */
/* Without JavaScript every view stays visible, stacked, and the menu links jump to them (each view's id is its #/ address). */
.js .page{display:none}
.js .page.on,.js main:not(:has(.page.on))>.page:first-child{display:block}
/* each view starts right under the header, so when the browser jumps to the #/ address on load it must land at the very top */
.js .page{scroll-margin-top:100vh}
/* hidden until a keyboard user tabs to it */
.skip-link{position:absolute;left:var(--pad);top:-100px;z-index:10;padding:12px 18px;background:var(--text);color:var(--ground);font:500 13px var(--label);text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header */
header.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:14px var(--pad);border-bottom:1px solid var(--line);background:var(--ground);z-index:5}
.mark{display:flex;flex-direction:column;justify-content:center;min-height:var(--tap);line-height:1;text-decoration:none}
.mark b{font:700 22px var(--display);letter-spacing:.03em;text-transform:uppercase}
.mark small{font-size:11px;font-family:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.bar-nav{order:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;flex:1}
.bar-actions{order:3;display:flex;align-items:center;gap:12px;margin-left:auto}
nav.links{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;font:500 15px var(--body)}
nav.links a,.dd>button{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
nav.links a:hover,nav.links a[aria-current=page],.dd>button:hover,.dd>button.cur{color:var(--accent)}
.right{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cross{display:inline-flex;align-items:center;min-height:var(--tap);font:500 15px var(--body);color:var(--muted);text-decoration:none}
.cross:hover{color:var(--text)}
.bar .menu-toggle{display:none}
.dd{position:relative}
.dd>button{background:none;border:0;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.dd ul{display:none;position:absolute;left:-16px;top:100%;margin:0;padding:8px 0;list-style:none;background:var(--raised);border:1px solid var(--line);min-width:240px;z-index:6}
.dd.open ul{display:block}
.dd ul a{display:flex;padding:0 16px}
@media (min-width:1100px){header.bar{position:sticky;top:0}}
@media (max-width:1099px){
  .bar-actions{order:2}
  .bar-nav{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;padding:8px 0 4px;border-top:1px solid var(--line)}
  .js .bar-nav{display:none}
  .js header.bar.nav-open .bar-nav{display:flex}
  .js .bar .menu-toggle{display:inline-flex}
  nav.links{flex-direction:column;align-items:stretch}
  .right{flex-direction:column;align-items:stretch}
  .dd ul{position:static;border:0;background:none;padding:0 0 0 16px;min-width:0}
}
/* keeps the wordmark and header buttons on one row on small phones */
@media (max-width:479px){
  header.bar{column-gap:12px}
  .mark b{font-size:19px}
  .bar-actions{gap:8px}
  .bar-actions .btn.small{padding:6px 12px}
}

/* buttons & type */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:8px 22px;line-height:1.25;text-align:center;border:0;border-radius:var(--radius);background:var(--raised);color:var(--text);font:700 15px var(--body);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--line)}
.btn.solid{background:var(--accent);color:var(--ground)}
/* secondary actions next to a button are links, so the page has one clear thing to press */
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-weight:700;text-decoration:none}
.link-arrow::after{content:"→";content:"→" / "";color:var(--accent);transition:transform .2s}
.link-arrow:hover::after{transform:translateX(4px)}
.btn.solid:hover{filter:brightness(1.08)}
.btn.big{min-height:56px}
.btn.small{min-height:var(--tap);padding:6px 16px}
.count{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--accent);color:var(--ground);font-size:12px;font-weight:700;display:inline-grid;place-items:center;letter-spacing:0}
.eyebrow{font-size:13px;font-family:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0}
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(38px,5.5vw,76px);line-height:1.02}
h2{font-size:clamp(28px,3.8vw,50px);line-height:1.08}
h3{margin:0;font-size:20px;font-weight:700}
p{margin:0}
.lede{color:var(--soft);max-width:560px}
.muted{color:var(--muted)}
.note{font-size:13px;color:var(--muted)}
.label-sm{font-family:var(--body);font-size:13px;font-family:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.status{font-size:14px;color:var(--soft);min-height:1.6em}

/* layout */
.wrap{max-width:1440px;margin:0 auto;padding:clamp(44px,6vw,80px) var(--pad)}
.wrap.tight{padding-top:clamp(32px,4vw,56px)}
.wrap.flush-top{padding-top:0}
.band.dark{background:var(--band)}
.stack{display:flex;flex-direction:column;gap:18px}
.stack.tight{gap:10px}
.stack.loose{gap:24px}
.chips{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.chips.spaced{margin-top:8px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,5vw,72px)}
.split.middle{align-items:center}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:40px}
.self-start{align-self:flex-start}
.num{font:500 13px var(--label);color:var(--muted)}
.page-hero .wrap{display:flex;flex-direction:column;gap:20px}
.portrait{max-width:460px;width:100%;height:auto}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:40px;margin:0;padding:0;list-style:none}
.steps p{color:var(--muted)}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.rows{margin:0;padding:0;list-style:none}
.rows .row{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.rows .row:last-child{border-bottom:1px solid var(--line)}
.rows .row .sub{color:var(--muted)}

/* footer: a closing line with the one action, then the link groups, then the small print */
/* the side padding grows past 1440px so the footer lines up with .wrap content on wide screens */
footer.foot{display:flex;flex-direction:column;gap:clamp(40px,5vw,64px);padding:clamp(56px,7vw,96px) max(var(--pad),calc((100% - 1440px) / 2 + var(--pad))) 28px;border-top:1px solid var(--line);font-size:15px}
.foot-pitch{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.foot-line{font:700 clamp(28px,3.6vw,48px)/1.08 var(--display);letter-spacing:-.015em;max-width:20ch}
.foot-email{font:700 clamp(20px,2.6vw,32px) var(--display);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px;overflow-wrap:anywhere}
.foot-email:hover{color:var(--accent)}
.foot-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:32px}
.foot-id{display:flex;flex-direction:column;gap:4px;color:var(--muted)}
.foot-name{font:700 22px var(--display);color:var(--text)}
/* columns size to their links on wider screens, so the email address stays on one line */
.foot-nav{display:flex;flex-wrap:wrap;gap:28px clamp(32px,4vw,64px);grid-column:span 2}
@media (max-width:599px){.foot-nav{display:grid;grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot-k{margin:0 0 6px;font:500 12px var(--label);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
footer.foot ul{margin:0;padding:0;list-style:none}
footer.foot li a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--soft);text-decoration:none;overflow-wrap:anywhere}
/* a mouse doesn't need finger-sized rows, so the lists tighten up on desktop */
@media (pointer:fine){footer.foot li a{min-height:32px}}
footer.foot li a:hover{color:var(--accent)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:22px;border-top:1px solid var(--line);font:500 12px var(--label);color:var(--muted)}

/* filters (toggle buttons) */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.filters button{min-height:var(--tap);padding:0 16px;border:0;border-radius:var(--radius);background:var(--raised);color:var(--soft);font:500 15px var(--body);cursor:pointer}
.filters button:hover{background:var(--line);color:var(--text)}
.filters button[aria-pressed=true]{background:var(--accent);color:var(--ground);font-weight:700}
/* the tick is decoration (aria-pressed already says which is on); the second declaration hides it from screen readers where supported */
.filters button[aria-pressed=true]::before{content:"✓";content:"✓" / "";margin-right:8px}

/* forms */
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field > label:not(.check),.field .label{font-size:15px;font-weight:700;color:var(--soft)}
.field .hint{font-size:14px;color:var(--muted)}
.field input:not([type=radio]):not([type=checkbox]),.field select,.field textarea{min-height:48px;padding:12px 14px;background:var(--raised);border:0;border-bottom:1px solid var(--line2);border-radius:var(--radius) var(--radius) 0 0;color:var(--text);font:16px var(--body)}
/* the accent underline replaces the outline, so focus stays visible without boxing the field */
.field input:not([type=radio]):not([type=checkbox]):focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0;border-bottom:2px solid var(--accent)}
.field input[type=file]{padding:10px;cursor:pointer}
.field input[type=file]::file-selector-button{margin-right:14px;min-height:40px;padding:0 16px;border:0;border-radius:var(--radius);background:var(--line);color:var(--text);font:700 14px var(--body);cursor:pointer}
.field textarea{min-height:120px;resize:vertical}
.field .err{font-size:14px;color:var(--danger)}
.field .err:empty{display:none}
.field.bad input,.field.bad textarea,.field.bad select{outline:1px solid var(--danger);outline-offset:4px}
.field.wide{grid-column:1 / -1}
/* spam trap: people never see this field, form-filling bots usually fill it */
.trap{display:none}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
.check{display:flex;gap:12px;align-items:flex-start;min-height:var(--tap);cursor:pointer}
.check input{width:20px;height:20px;margin-top:3px;accent-color:var(--accent);flex:none}
.panel{padding:clamp(20px,3vw,30px);background:var(--ground);border:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.line{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.line span:first-child{color:var(--soft)}
.cfg{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,64px);align-items:flex-start}
.cfg-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:36px}
.summary{flex:1 1 300px;min-width:0}
@media (min-width:900px){.summary{position:sticky;top:calc(var(--hdr,80px) + 24px)}}

details.faq{border-top:1px solid var(--line);padding:18px 0}
details.faq:last-of-type{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px;min-height:var(--tap);align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}
details.faq[open] summary::after{content:"−"}
details.faq p{margin-top:12px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}