/* South West Websites homepage: a run of painted boards on a Mist wall.
   Boards are flat paint with an inset lining; lettering is Archivo at its narrowest. */

.home{
  --wall:var(--paper);
  --gutter:clamp(8px,1vw,14px);
  --pad:clamp(24px,4.6vw,72px);
  --inset:clamp(8px,.85vw,12px);
  --peek:clamp(110px,17svh,176px);
  --edge:max(var(--gutter),calc((100vw - 1720px) / 2));
  --paint-slate:#17313A;
  --paint-estuary:#1F6B63;
  --paint-white:#FFFFFF;
  --gorse-paint:#E2B340;
  --on-dark:#F4F6F4;
  --on-dark-muted:#C9DAD5;
  --lining-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 1H49A10 10 0 0 0 59 11V49A10 10 0 0 0 49 59H11A10 10 0 0 0 1 49V11A10 10 0 0 0 11 1Z' fill='none' stroke='%2317313A' stroke-width='2'/%3E%3C/svg%3E");
  --lining-ink-fixed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 1H49A10 10 0 0 0 59 11V49A10 10 0 0 0 49 59H11A10 10 0 0 0 1 49V11A10 10 0 0 0 11 1Z' fill='none' stroke='%2317313A' stroke-width='2'/%3E%3C/svg%3E");
  --lining-mist:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 1H49A10 10 0 0 0 59 11V49A10 10 0 0 0 49 59H11A10 10 0 0 0 1 49V11A10 10 0 0 0 11 1Z' fill='none' stroke='%23D6E7E2' stroke-opacity='.7' stroke-width='2'/%3E%3C/svg%3E");
  --ease-out:cubic-bezier(.16,1,.3,1);
  background:var(--wall);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .home{
    --paint-slate:#1D3942;
    --paint-white:#16232A;
    --on-dark-muted:#BCCFCA;
    --lining-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 1H49A10 10 0 0 0 59 11V49A10 10 0 0 0 49 59H11A10 10 0 0 0 1 49V11A10 10 0 0 0 11 1Z' fill='none' stroke='%23839C9D' stroke-width='2'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .home{
  --paint-slate:#1D3942;
  --paint-white:#16232A;
  --on-dark-muted:#BCCFCA;
  --lining-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M11 1H49A10 10 0 0 0 59 11V49A10 10 0 0 0 49 59H11A10 10 0 0 0 1 49V11A10 10 0 0 0 11 1Z' fill='none' stroke='%23839C9D' stroke-width='2'/%3E%3C/svg%3E");
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.home .studio-nav-wrap{max-width:none;padding-inline:calc(var(--edge) + var(--pad))}

/* ---------- Lettering ---------- */
.lettering{font-family:var(--lettering);font-weight:800;font-stretch:74%;line-height:.9;letter-spacing:-.012em;text-wrap:balance}
/* One accented phrase per heading at most, never in the hero. */
.lettering em{font-style:normal;color:var(--accent)}
.trade-line{font-family:var(--trade);font-stretch:125%;font-weight:560;font-size:clamp(.94rem,1.15vw,1.12rem);line-height:1.4;letter-spacing:0}

/* ---------- Boards ---------- */
.board{position:relative;margin-inline:var(--edge);padding:var(--pad);border-radius:6px;isolation:isolate}
.board::before{content:"";position:absolute;inset:var(--inset);border:20px solid transparent;border-image:var(--lining) 20 / 20px stretch;pointer-events:none;z-index:-1}
.board-slate{background:var(--paint-slate);color:var(--on-dark);--lining:var(--lining-gorse);--shade:var(--gorse-paint);--accent:var(--gorse-paint)}
.board-estuary{background:var(--paint-estuary);color:var(--on-dark);--lining:var(--lining-mist);--accent:var(--gorse-paint)}
.board-white{background:var(--paint-white);color:var(--ink);--lining:var(--lining-ink);--accent:var(--estuary)}
.wall-section{--accent:var(--estuary)}
/* Only the hero keeps a signwriter's block shade, kept light so the lettering reads crisply. Everything else is flat paint. */
.fascia-title{text-shadow:.006em .006em 0 var(--shade),.012em .012em 0 var(--shade),.018em .018em 0 var(--shade),.024em .024em 0 var(--shade),.03em .03em 0 var(--shade)}

/* ---------- Plates and links ---------- */
.plate{--plate-bg:var(--btn);--plate-ink:var(--on-btn);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 30px;border:0;border-radius:4px;background:var(--plate-bg);color:var(--plate-ink);font:720 1.1rem/1.2 var(--sans);font-stretch:86%;letter-spacing:.004em;text-align:center;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease-out)}
.plate::after{content:"";position:absolute;inset:5px;border:2px solid var(--plate-ink);border-radius:2px;opacity:0;transform:scale(1.04);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);pointer-events:none}
.plate:hover::after{opacity:1;transform:none}
.plate:active{transform:translateY(1px)}
.plate-gorse{--plate-bg:var(--gorse-paint);--plate-ink:#17232B}
.plate-estuary{--plate-bg:var(--btn);--plate-ink:var(--on-btn)}
.board :focus-visible{outline-color:var(--gorse-paint)}
.board-white :focus-visible{outline-color:var(--estuary)}

.sign-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:650 1.02rem/1.3 var(--sans);color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:var(--link-line,var(--gorse-paint));transition:text-underline-offset .25s var(--ease-out)}
.sign-link svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease-out)}
.sign-link:hover{text-underline-offset:4px}
.sign-link:hover svg{transform:translateX(5px)}
.board-white .sign-link,.wall-section .sign-link{--link-line:var(--estuary)}

/* ---------- The fascia (hero) ---------- */
.stack{position:relative}
.fascia{--fs:clamp(3.4rem,10.4vw,12rem);margin-top:0;min-height:calc(100svh - var(--hh) - var(--gutter) - var(--peek));display:grid;z-index:1;transform-origin:50% 0}
.fascia-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto auto auto 1.25fr;align-items:end;min-height:100%}
.fascia-title{grid-column:1/-1;grid-row:2;font-size:var(--fs);color:var(--on-dark);margin:0}
.fascia-title .word{display:inline-block;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.fascia-title .br-m{display:none}
.fascia-line{grid-column:1;grid-row:3;max-width:44ch;margin-top:clamp(22px,2.6vw,38px);color:var(--on-dark-muted);font-size:clamp(1rem,1.35vw,1.3rem)}
.fascia-actions{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-top:clamp(24px,2.8vw,40px)}
.roundel{grid-column:2;grid-row:3/5;align-self:end;justify-self:end;position:relative;z-index:1;container-type:inline-size;width:clamp(124px,15.5vw,236px);aspect-ratio:1;margin:0;border-radius:50%;display:grid;place-items:center;background:var(--paint-slate)}
.roundel-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-outer{fill:none;stroke:var(--gorse-paint);stroke-width:2.4}
.ring-inner{fill:none;stroke:var(--gorse-paint);stroke-opacity:.55;stroke-width:1.2}
.ring-mark{fill:var(--gorse-paint)}
.ring-text{fill:var(--on-dark-muted);font:600 15px var(--trade);font-stretch:112%;text-rendering:geometricPrecision}
.roundel strong{position:relative;font:800 31cqi/.86 var(--lettering);font-stretch:62%;letter-spacing:-.01em;color:var(--gorse-paint)}

/* ---------- Work ---------- */
.work-wall{position:relative;z-index:2;background:var(--wall);padding-top:var(--gutter)}
.work-board{padding-top:clamp(30px,3.2vw,48px)}
.work-title{font-size:clamp(3rem,8.7vw,9.2rem);color:var(--ink);margin-bottom:clamp(36px,5vw,80px)}
.job-name{font-size:clamp(2.3rem,4.5vw,4.7rem);margin-bottom:16px}
.job-name a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .45s var(--ease-out)}
.job-name a:hover{background-size:100% 3px}
.job .trade-line{color:var(--estuary)}
.job p:not(.trade-line):not(.status){margin-top:18px;max-width:44ch;color:var(--muted);font-size:1.06rem}
.job .sign-link{margin-top:14px}
.status{margin-top:14px;font:600 .9rem/1.4 var(--trade);font-stretch:110%;color:var(--ink)}
.shot{display:block;width:100%;height:auto;border-radius:6px;background:#E7EBE4;box-shadow:0 1px 2px rgba(23,49,58,.14),0 22px 44px -26px rgba(23,49,58,.45)}

.job-boka{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:center}
.job-media{position:relative;padding:0 0 clamp(24px,4vw,56px) clamp(24px,4vw,64px)}
.shot-phone{position:absolute;left:0;bottom:0;width:27%;border-radius:14px;border:4px solid #17232B;background:#17232B}

.job-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);margin-top:clamp(72px,9vw,140px);align-items:start}
.job-pair .job-name{font-size:clamp(2.1rem,3.7vw,3.7rem);margin-top:clamp(28px,3vw,40px)}
.shot-link{display:block}
.job-clubs{padding-top:clamp(40px,7vw,120px)}
.shot-stack{position:relative;padding:0 0 0 14%}
.shot-stack .shot-back{position:absolute;left:0;top:-14%;width:70%;opacity:1}
.shot-stack .shot-front{position:relative;margin-top:12%}
.link-row{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:14px}
.link-row .sign-link{margin-top:0}
.work-note{margin-top:clamp(56px,7vw,104px);padding-top:24px;border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;color:var(--muted);font-size:1.06rem}
.work-note a{font-weight:650;color:var(--ink);text-decoration-color:var(--estuary);text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- The person ---------- */
.person{margin-top:var(--gutter)}
.person-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,104px);align-items:end}
.person h2{font-size:clamp(2.5rem,6vw,6.4rem);max-width:11ch;color:var(--on-dark)}
.person-intro>p{margin-top:clamp(22px,2.6vw,34px);max-width:44ch;color:var(--on-dark);font-size:1.15rem}
.person-intro .sign-link{margin-top:18px}
.plaque{position:relative;isolation:isolate;padding:clamp(28px,3.4vw,44px);border-radius:4px;background:#F4F6F4;color:#17232B;--lining:var(--lining-ink-fixed)}
.plaque::before{content:"";position:absolute;inset:8px;border:20px solid transparent;border-image:var(--lining) 20 / 20px stretch;pointer-events:none;z-index:-1}
.plaque-name{font-size:clamp(2.2rem,3.5vw,3.4rem);color:#17313A}
.plaque .trade-line{margin-top:14px;color:#1F6B63}
/* The plaque is a light painted panel in both themes, so its lining and muted text are fixed too. */
.plaque-place{margin-top:4px;color:#3F5058;font-size:1rem}
.plaque a{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font:600 .98rem/1.4 var(--sans);color:#17232B;text-decoration-color:#1F6B63;text-decoration-thickness:2px;text-underline-offset:5px;overflow-wrap:anywhere}
.plaque :focus-visible{outline-color:#1F6B63}
.order{margin-top:clamp(56px,7vw,112px);padding-top:clamp(26px,3vw,40px);border-top:2px solid rgba(244,246,244,.5)}
.order-line{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.22em .42em;font-size:clamp(2rem,4vw,3.9rem);font-stretch:66%;line-height:1;color:var(--on-dark)}
.order-line li{display:inline-flex;align-items:center;gap:.42em}
.order-line li+li::before{content:"";flex:none;width:1.25em;height:.34em;background:var(--gorse-paint);clip-path:polygon(0 42%,70% 42%,70% 6%,100% 50%,70% 94%,70% 58%,0 58%)}
.order-detail{margin-top:clamp(18px,2vw,26px);max-width:72ch;color:var(--on-dark);font-size:1.08rem}

/* ---------- Tariff ---------- */
.tariff{margin-top:var(--gutter)}
.tariff h2{font-size:clamp(2.5rem,5.9vw,6.2rem);max-width:13ch;color:var(--on-dark)}
.tariff-head p{margin-top:clamp(20px,2.4vw,30px);max-width:52ch;color:var(--on-dark-muted);font-size:1.12rem}
.tariff-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,6vw,104px);margin-top:clamp(48px,6vw,96px)}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding-bottom:12px;border-bottom:2px solid var(--gorse-paint)}
.group-head h3{font:800 clamp(2rem,2.8vw,2.7rem)/1 var(--lettering);font-stretch:66%;letter-spacing:0;color:var(--gorse-paint)}
.group-head a,.tariff-aside a,.tariff-foot p a,.ask{color:var(--on-dark);font:600 .98rem/1.4 var(--sans);text-decoration:underline;text-decoration-color:var(--gorse-paint);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-underline-offset .25s var(--ease-out)}
.group-head a:hover,.tariff-aside a:hover,.tariff-foot p a:hover,.ask:hover{text-underline-offset:3px}
.group-head a{display:inline-flex;align-items:center;min-height:44px}
.tariff-list{list-style:none;margin:0;padding:0}
.tariff-list li{display:grid;padding:22px 0 18px}
.tariff-list li+li{border-top:1px solid rgba(214,231,226,.18)}
.tariff-line{display:flex;align-items:baseline;gap:12px;margin:0}
.item{font:800 clamp(1.6rem,2.1vw,2rem)/1 var(--lettering);font-stretch:72%;letter-spacing:0;color:var(--on-dark)}
.leader{flex:1;min-width:24px;border-bottom:3px dotted rgba(226,179,64,.6);transform:translateY(-.28em)}
.cost{font:800 clamp(1.9rem,2.6vw,2.6rem)/1 var(--lettering);font-stretch:66%;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;color:var(--gorse-paint);white-space:nowrap}
.cost small{font-family:var(--trade);font-size:.5em;font-weight:600;font-stretch:110%;margin:0 .15em;color:var(--on-dark-muted)}
.tariff-desc{margin-top:8px;max-width:48ch;color:var(--on-dark-muted);font-size:1rem}
.ask{justify-self:start;display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:.94rem}
.tariff-aside{margin-top:20px;padding-top:18px;border-top:2px dotted rgba(214,231,226,.3);color:var(--on-dark-muted);font-size:1rem;max-width:56ch}
.tariff-aside a{font-size:inherit;white-space:nowrap}
.tariff-foot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(32px,5vw,72px);align-items:center;margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:2px solid rgba(214,231,226,.3)}
.tariff-foot p{color:var(--on-dark-muted);font-size:1rem;max-width:72ch}
.tariff-foot strong{color:var(--on-dark);font-weight:700}
.tariff-foot p a{font-size:inherit}

/* ---------- Wall sections ---------- */
.wall-section{margin:0;padding:clamp(80px,11vw,168px) calc(var(--edge) + var(--pad))}
.faq-wall h2{font-size:clamp(2.5rem,5.9vw,6.2rem);color:var(--ink)}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(40px,6vw,96px);margin-top:clamp(40px,5vw,72px)}
.qa{padding-top:20px;border-top:2px solid var(--ink)}
.qa h3{font:800 clamp(1.6rem,2.3vw,2.2rem)/1.02 var(--lettering);font-stretch:72%;letter-spacing:0}
.qa p{margin-top:14px;color:var(--muted);font-size:1.05rem;max-width:52ch}
.qa a{color:var(--ink);font-weight:600;text-decoration-color:var(--estuary);text-decoration-thickness:2px;text-underline-offset:5px}

.home #contact{background:transparent}
.contact-wall{padding-top:clamp(24px,3vw,40px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,104px);align-items:start;padding-top:clamp(40px,5vw,72px);border-top:2px solid var(--ink)}
.contact-intro h2{font-size:clamp(2.5rem,5.2vw,5.4rem);max-width:10ch;color:var(--ink)}
.contact-intro>p{margin-top:24px;max-width:40ch;color:var(--muted);font-size:1.08rem}
.your-board{margin:clamp(32px,4vw,48px) 0 0}
.sign{margin:0;min-height:clamp(190px,17vw,250px);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;text-align:center;padding:clamp(28px,3vw,40px) clamp(28px,3.4vw,48px)}
.sign-name{width:100%;min-width:0;white-space:nowrap;font-size:clamp(2.2rem,4.2vw,3.9rem);color:var(--on-dark);overflow-wrap:anywhere}
.sign-name.sign-wraps{white-space:normal}
.sign-line{margin-top:12px;color:var(--on-dark);min-height:1.4em}
.sign-mark{position:absolute;right:clamp(20px,2vw,28px);bottom:clamp(18px,1.8vw,24px);width:22px;height:22px;opacity:.85}
.your-board figcaption{margin-top:14px;font-size:.92rem;color:var(--muted);max-width:52ch}
.contact-direct{margin-top:22px;font-size:1rem}
.contact-direct a{font-weight:600;text-decoration-color:var(--estuary);text-decoration-thickness:2px;text-underline-offset:5px;overflow-wrap:anywhere}

.home .enquiry{gap:20px}
.home .enquiry label{font:650 .95rem/1.4 var(--sans);margin-bottom:8px}
.home .enquiry input,.home .enquiry select,.home .enquiry textarea{background:var(--surface);border:1.5px solid var(--control);border-radius:4px;padding:13px 14px;font:400 1.02rem/1.5 var(--sans);transition:border-color .2s}
.home .enquiry input:hover,.home .enquiry select:hover,.home .enquiry textarea:hover{border-color:var(--ink)}
.home .enquiry ::placeholder{color:var(--muted);opacity:.85}
.home .enquiry select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.home .enquiry-options{border-block:1px solid var(--line);padding-block:2px}
.home .enquiry-options summary{display:block;list-style:none;font:600 .98rem/1.5 var(--sans)}
.home .enquiry-options summary::-webkit-details-marker{display:none}
.home .enquiry-options summary::before{content:"";display:inline-block;vertical-align:.12em;width:7px;height:7px;margin:0 14px 0 2px;border-right:2px solid var(--estuary);border-bottom:2px solid var(--estuary);transform:rotate(-45deg);transition:transform .25s var(--ease-out)}
.home .enquiry-options[open] summary::before{transform:rotate(45deg)}
.home .form-submit{gap:14px 24px;margin-top:4px}
.home .form-note{font-size:.9rem}

/* ---------- Motion: the board is lettered once ---------- */
@media(prefers-reduced-motion:no-preference){
  .fascia::before{animation:lining-in 1s var(--ease-out) .05s backwards}
  .fascia-title .word{animation:paint .68s cubic-bezier(.55,.06,.3,1) backwards}
  .fascia-title .word:nth-of-type(1){animation-delay:.08s}
  .fascia-title .word:nth-of-type(2){animation-delay:.24s}
  .fascia-title .word:nth-of-type(3){animation-delay:.34s}
  .fascia-title .word:nth-of-type(4){animation-delay:.5s}
  .fascia-title{animation:shade .5s var(--ease-out) 1.12s backwards}
  .fascia-line{animation:settle .7s var(--ease-out) .9s backwards}
  .fascia-actions>*{animation:settle .7s var(--ease-out) 1s backwards}
  .roundel{animation:roundel-in .8s var(--ease-out) 1.2s backwards}
}
@keyframes paint{
  from{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);-webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  to{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);-webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
}
@keyframes shade{from{text-shadow:0 0 0 var(--shade),0 0 0 var(--shade),0 0 0 var(--shade),0 0 0 var(--shade),0 0 0 var(--shade)}}
@keyframes settle{from{opacity:0;transform:translateY(14px)}}
@keyframes lining-in{from{clip-path:inset(50% 50% 50% 50%);opacity:0}to{clip-path:inset(0);opacity:1}}
@keyframes roundel-in{from{opacity:0;transform:scale(.86) rotate(-8deg)}}

/* ---------- Motion: the next board slides over the fascia ---------- */
.stack.is-stacking .fascia{position:sticky;top:calc(var(--hh) + var(--gutter))}
.stack.is-stacking .work-wall{box-shadow:0 -24px 48px -36px rgba(9,22,27,.35)}
@supports (animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .stack.is-stacking .fascia{animation:recede linear both;animation-timeline:scroll(root block);animation-range:0px 85vh}
    .stack.is-stacking .fascia::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#081317;opacity:0;pointer-events:none;animation:dim linear both;animation-timeline:scroll(root block);animation-range:0px 85vh}
  }
}
@keyframes recede{to{transform:scale(.93) translateY(-2%)}}
@keyframes dim{to{opacity:.14}}

/* ---------- Responsive ---------- */
@media(min-width:1201px){
  .roundel{grid-row:2;grid-column:2;align-self:start;width:calc(var(--fs) * 1.05)}
}
@media(max-width:1100px){
  .job-boka{grid-template-columns:1fr;gap:40px}
  .job-boka .job-media{order:-1}
  .job-media{max-width:880px}
  .tariff-groups{grid-template-columns:1fr}
}
@media(max-width:900px){
  .fascia{--fs:min(16.5vw,8.4rem);min-height:0}
  .fascia-title .br-m{display:inline}
  .fascia-title .br-d{display:none}
  .fascia-inner{grid-template-rows:none;align-content:start;min-height:0}
  .fascia-title{grid-row:1}
  .fascia-line{grid-row:2;grid-column:1/-1}
  .fascia-actions{display:contents}
  .fascia-actions .plate{grid-row:3;grid-column:1/-1;justify-self:start;margin-top:clamp(24px,4vw,36px)}
  .fascia-actions .sign-link{grid-row:4;grid-column:1;align-self:center;justify-self:start;margin-top:16px}
  .roundel{grid-row:4;grid-column:2;align-self:end;width:clamp(164px,42vw,190px);margin-top:16px}
  .job-pair{grid-template-columns:1fr;gap:72px}
  .job-clubs{padding-top:24px}
  .person-grid{grid-template-columns:1fr;align-items:start}
  .plaque{max-width:520px}
  .faq-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-intro h2{max-width:12ch}
  .your-board{max-width:560px}
}
@media(max-width:640px){
  .home{--pad:clamp(22px,6vw,32px)}
  .fascia-actions .plate{justify-self:stretch}
  .order-line li{flex-wrap:wrap}
  .job-media{padding:0 0 28px 18px}
  .shot-phone{width:30%;border-width:3px;border-radius:10px}
  .tariff-line{flex-wrap:wrap}
  .item{font-size:1.65rem}
  .cost{font-size:1.9rem}
  .tariff-foot{grid-template-columns:1fr}
  .tariff-foot .plate{width:100%}
  .work-note{display:block}
  .work-note a{display:inline-block;margin-top:6px}
  .home .field-row{grid-template-columns:1fr}
  .home .form-submit .plate{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .job-name a,.sign-link,.sign-link svg,.plate,.sign-name{transition:none}
}