/* ExidaSP website styles. Colours and type sizes are set as variables in :root below. */
:root{
  --bg:#FBF6F6;
  --ink:#000000;
  --grey:#757575;
  --line:#E9DEDF;
  --soft:#F3EAEB;
  --brand:#7A1C24;
  --brand-ink:#FFFFFF;
  --head:var(--bg);
  --head-ink:var(--ink);
  --inv:#000000;
  --inv-ink:#FFFFFF;
  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:Arial, "Helvetica Neue", Helvetica, sans-serif;
  --h-xl:clamp(2.5rem, 5vw, 4.25rem);
  --h-l:clamp(2rem, 3.7vw, 3.125rem);
  --h-m:clamp(1.65rem, 2.8vw, 2.375rem);
  --h-s:clamp(1.4rem, 2vw, 1.75rem);
  --t-l:clamp(1.25rem, 2vw, 1.75rem);
  --t-m:clamp(1.05rem, 1.4vw, 1.25rem);
  --gut:max(16px, min(32px, 2.4vw), env(safe-area-inset-left, 0px));
  --gut-r:max(16px, min(32px, 2.4vw), env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}
body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.4}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:60; background:var(--head)}
h1,h2,h3,h4,.serif{font-family:var(--serif); font-weight:400; color:inherit; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.container{max-width:1920px; margin:0 auto; padding-left:var(--gut); padding-right:var(--gut-r)}
.xl{font-size:var(--h-xl); line-height:1.1; letter-spacing:-0.028em}
.l{font-size:var(--h-l); line-height:1.1; letter-spacing:-0.04em}
.m{font-size:var(--h-m); line-height:1.15; letter-spacing:-0.02em}
.s{font-size:var(--h-s); line-height:1.2; letter-spacing:-0.01em}
.t-l{font-size:var(--t-l); line-height:1.3}
.t-m{font-size:var(--t-m); line-height:1.4}
.grey{color:var(--grey)}
.block{padding-block:clamp(56px, 7vw, 120px)}
.photo{position:relative; overflow:hidden; background:var(--soft); margin:0; max-width:100%}
.photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
a:hover .photo img,.photo-link:hover img{transform:scale(1.03)}

/* header */
.site-head{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:var(--head); color:var(--head-ink)}
.site-head .container{height:104px; display:flex; align-items:center; gap:clamp(24px, 4vw, 72px)}
.logo{width:178px; flex:none}
.nav{display:flex; align-items:center; justify-content:space-between; flex:1; gap:24px}
.nav .grp{display:flex; gap:clamp(18px, 2.4vw, 40px)}
.nav a{font-size:20px; position:relative; padding:6px 0}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:none; margin-left:auto; background:none; border:1px solid rgba(26,26,26,.5); font-size:16px; padding:10px 16px; cursor:pointer; color:var(--head-ink)}
@media (max-width: 960px){
  .site-head .container{height:80px}
  .logo{width:150px}
  .menu-btn{display:block}
  .nav{position:absolute; top:100%; left:0; right:0; background:var(--head); flex-direction:column; align-items:stretch; padding:8px var(--gut-r) 24px var(--gut); gap:0; border-top:1px solid rgba(26,26,26,.2)}
  .nav:not(.open){display:none}
  .nav .grp{flex-direction:column; gap:0}
  .nav a{font-size:24px; padding:14px 0; border-bottom:1px solid rgba(26,26,26,.2)}
  .nav a::after{display:none}
}

/* outlined arrow button */
.cta{display:inline-flex; align-items:center; gap:14px; border:1px solid var(--grey); padding:14px 18px 14px 22px; font-size:20px; cursor:pointer; background:transparent; color:inherit; white-space:nowrap; transition:background .25s, color .25s, border-color .25s}
.cta svg{width:22px; height:22px; transition:transform .25s}
.cta:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cta:hover svg{transform:translateX(4px)}
.inv .cta{border-color:rgba(255,255,255,.6)}
.inv .cta:hover{background:#FFFFFF; color:#000000}
.back{display:inline-flex; align-items:center; gap:12px; font-size:20px}
.back svg{width:22px; height:22px; transform:rotate(180deg)}

/* heading block: big serif heading, grey strapline, button on the right */
.hb{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 48px; align-items:end; margin-bottom:clamp(32px, 4vw, 56px)}
.hb .strap{margin-top:16px; max-width:52ch}
@media (max-width: 760px){.hb{grid-template-columns:1fr}}

/* home intro and hero */
.intro{padding-top:clamp(28px, 3vw, 48px)}
.intro p{max-width:none}
.hero-strap{padding-block:clamp(40px, 5vw, 72px) clamp(28px, 3vw, 40px)}
.hero-strap h1{max-width:30ch}
.hero-media{aspect-ratio:1302/640; max-height:84vh; width:100%}
.hero-media img{object-position:50% 55%}
.caption{margin-top:12px; font-size:14px; color:var(--grey)}

/* ideas grid (home) */
.ideas{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 1.8vw, 24px); align-items:start}
.idea{display:grid; gap:12px; align-content:start; min-width:0}
.idea .tag{font-size:16px; color:var(--grey)}
.idea p{color:var(--grey)}
.idea.big{grid-column:1 / span 2; grid-row:1 / span 2}
.idea.big .photo{aspect-ratio:639/443}
.idea.wide{grid-column:3 / span 2}
.idea.wide .photo{aspect-ratio:639/298}
.idea.small .photo{aspect-ratio:308/202}
.idea.tall .photo{aspect-ratio:308/400}
.idea:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
@media (max-width: 900px){.ideas{grid-template-columns:repeat(2, minmax(0,1fr))} .idea.big,.idea.wide{grid-column:1 / -1; grid-row:auto}}
@media (max-width: 520px){.ideas{grid-template-columns:1fr} .idea.tall .photo{aspect-ratio:308/202}}

/* carousels */
.car-head{display:flex; align-items:center; gap:20px}
.car-count{font-size:var(--h-s); font-variant-numeric:tabular-nums; min-width:3.2em}
.car-btn{width:52px; height:52px; border:1px solid var(--grey); background:transparent; display:grid; place-items:center; cursor:pointer; color:inherit}
.car-btn svg{width:22px; height:22px}
.car-btn.prev svg{transform:rotate(180deg)}
.car-btn:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.track{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-left:var(--gut); padding-right:var(--gut-r); scroll-padding-left:var(--gut)}
.track::-webkit-scrollbar{display:none}
.work-slide{flex:0 0 min(78vw, 1016px); scroll-snap-align:start; display:grid; gap:20px; align-content:start}
.work-slide .photo{aspect-ratio:1016/572}
.work-slide h3{max-width:18ch}
.work-slide .loc{font-size:20px; color:var(--grey)}
.work-nav{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:32px}
.person-card{flex:0 0 280px; scroll-snap-align:start; display:grid; gap:10px; align-content:start}
.person-card .photo{aspect-ratio:4/5}
.person-card b{font-size:28px; font-weight:400; line-height:1.15}
.person-card .role{font-size:16px}
.person-card p{font-size:16px; color:var(--grey)}

/* inverted block */
.inv{background:var(--inv); color:var(--inv-ink)}
.inv .grey{color:#BDBDBD}
.issues{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2vw, 32px); align-items:start}
.issue{display:grid; gap:14px; align-content:start}
.issue:nth-child(2){margin-top:clamp(0px, 6vw, 96px)}
.issue:nth-child(3){margin-top:clamp(0px, 3vw, 48px)}
.issue .photo{aspect-ratio:5/6}
.issue .sub{font-size:16px; color:#BDBDBD}
.issue b{font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem, 5vw, 4.5rem); line-height:1; letter-spacing:-0.03em}
@media (max-width: 760px){.issues{grid-template-columns:1fr} .issue:nth-child(n){margin-top:0}}

/* figures row */
.figs{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px 24px}
.fig{border-top:1px solid var(--ink); padding-top:16px; display:grid; gap:10px; align-content:start}
.fig b{font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem, 4.6vw, 4.25rem); line-height:1; letter-spacing:-0.03em}
.fig span{font-size:16px; color:var(--grey); max-width:32ch}
@media (max-width: 900px){.figs{grid-template-columns:repeat(2, minmax(0,1fr))}}

/* logo wall */
.wall{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:1px; list-style:none; margin:0; padding:1px}
.wall li{background:#FFFFFF; height:120px; display:grid; place-items:center; padding:20px; box-shadow:0 0 0 1px var(--line)}
.wall .wtxt{font-family:Arial, sans-serif; font-weight:700; font-size:30px; letter-spacing:.08em; color:#1A1A1A}
.wall img{max-height:56px; max-width:100%; width:auto; height:auto; object-fit:contain}
.others{margin-top:24px; font-size:16px; color:var(--grey); max-width:110ch}
@media (max-width: 960px){.wall{grid-template-columns:repeat(4, minmax(0,1fr))}}
@media (max-width: 560px){.wall{grid-template-columns:repeat(2, minmax(0,1fr))} .wall li{height:96px}}

/* page header (inner pages) */
.ph{padding-block:clamp(28px, 3vw, 48px) clamp(40px, 5vw, 72px)}
.ph .lead{margin-top:28px; max-width:36ch; color:var(--grey)}

/* tiles (careers and services landing) */
.tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px clamp(16px, 1.8vw, 24px)}
.tile{display:grid; gap:14px; align-content:start; cursor:pointer}
.tile .photo{aspect-ratio:418/280}
.svc-tiles{grid-template-columns:repeat(4, minmax(0,1fr))}
@media (max-width: 1100px){.svc-tiles{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 560px){.svc-tiles{grid-template-columns:1fr}}
.tile .name{font-size:28px; line-height:1.2}
.tile p{color:var(--grey)}
.tile:hover .name{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
@media (max-width: 900px){.tiles{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 560px){.tiles{grid-template-columns:1fr}}

/* project cards */
.cards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:56px clamp(16px, 1.8vw, 24px)}
.pcard{display:grid; gap:14px; align-content:start; cursor:pointer; min-width:0}
.pcard .photo{aspect-ratio:308/312}
.pcard h4{font-size:var(--h-s); line-height:1.2; letter-spacing:-0.01em}
.pcard p{font-size:16px; color:var(--grey)}
.pcard:hover h4{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
@media (max-width: 1100px){.cards{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media (max-width: 760px){.cards{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 480px){.cards{grid-template-columns:1fr}}

/* market-style service cards on projects page */
.svc-row{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:clamp(12px, 1.8vw, 24px)}
.svc-card{display:grid; gap:14px; align-content:start; cursor:pointer; background:none; border:none; padding:0; text-align:left; color:inherit}
.svc-card .photo{aspect-ratio:241/200}
.svc-card .name{font-family:var(--serif); font-size:clamp(1.15rem, 1.7vw, 1.6rem); line-height:1.2}
.svc-card[aria-pressed="true"] .name{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.svc-card[aria-pressed="true"] .photo{outline:3px solid var(--brand); outline-offset:-3px}
@media (max-width: 1100px){.svc-row{grid-template-columns:repeat(4, minmax(0,1fr))}}
@media (max-width: 520px){.svc-row{grid-template-columns:repeat(2, minmax(0,1fr))}}
.filter-line{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; margin-bottom:40px; font-size:20px}
.filter-line button{background:none; border:none; padding:4px 0; font-size:20px; color:var(--grey); cursor:pointer; border-bottom:1px solid transparent}
.filter-line button[aria-pressed="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.filter-line .count{margin-left:auto; color:var(--grey); font-size:16px}

/* project detail */
.pd-title{display:grid; grid-template-columns:minmax(0,58%) minmax(0,1fr); gap:24px 64px; align-items:start; padding-block:28px 40px}
.pd-hero{aspect-ratio:1302/663; width:100%}
.pd-meta{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; padding-block:28px 0}
.pd-meta .k{font-size:16px; color:var(--grey); margin-bottom:12px}
.pd-meta .v{font-size:16px}
.pd-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,8fr) minmax(0,1.5fr) minmax(0,3fr); gap:24px; padding-block:clamp(48px, 6vw, 96px)}
.pd-body .copy{grid-column:2; display:grid; gap:28px; align-content:start}
.pd-body .copy .first{font-size:var(--t-l); line-height:1.35}
.pd-body .copy p{font-size:var(--t-m); line-height:1.5}
.pd-side{grid-column:4; display:grid; gap:48px; align-content:start}
.pd-side .ttl{font-size:28px; margin-bottom:20px}
.kp{display:grid; gap:22px}
.kp div{border-left:1px solid var(--ink); padding-left:16px}
.kp b{display:block; font-weight:700}
.used{font-size:16px; color:var(--grey); display:flex; flex-wrap:wrap; gap:6px}
.used a{text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.pd-side .touch{font-size:22px; margin-bottom:20px}
@media (max-width: 900px){
  .pd-title{grid-template-columns:1fr}
  .pd-meta{grid-template-columns:repeat(2, minmax(0,1fr))}
  .pd-body{grid-template-columns:1fr} .pd-body .copy,.pd-side{grid-column:1}
}

/* services detail sections */
.svc{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr); gap:24px; padding-block:clamp(48px, 6vw, 96px); border-top:1px solid var(--line); scroll-margin-top:110px}
.svc .left{display:grid; gap:24px; align-content:start}
.svc .right{grid-column:3; display:grid; gap:28px; align-content:start}
.svc ul{list-style:none; margin:0; padding:0; columns:2; column-gap:24px}
.svc li{break-inside:avoid; padding:12px 0; border-top:1px solid var(--line); font-size:16px}
.svc .rel{display:grid; gap:10px}
.svc .rel .k{font-size:16px; color:var(--grey)}
.svc .rel a{font-family:var(--serif); font-size:22px; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; cursor:pointer}
@media (max-width: 900px){.svc{grid-template-columns:1fr} .svc .right{grid-column:1} .svc ul{columns:1}}
.disc{display:flex; flex-wrap:wrap; gap:10px}
.disc span{border:1px solid var(--grey); padding:10px 16px; font-size:16px}
.tbl{overflow-x:auto; border-top:1px solid var(--ink)}
table{border-collapse:collapse; width:100%; min-width:680px}
th,td{text-align:left; padding:16px 16px 16px 0; border-bottom:1px solid var(--line); vertical-align:top; font-size:16px}
th{font-weight:400; color:var(--grey)}
td:first-child{font-family:var(--serif); font-size:22px; white-space:nowrap}

/* careers */
.roles{border-top:1px solid var(--ink)}
.role{border-bottom:1px solid var(--line)}
.role summary{list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) 40px; gap:16px; padding:26px 0; align-items:baseline}
.role summary::-webkit-details-marker{display:none}
.role summary .t{font-family:var(--serif); font-size:var(--h-s)}
.role summary .c{color:var(--grey)}
.role summary .pm{justify-self:end; font-size:28px; line-height:1; transition:transform .2s}
.role[open] summary .pm{transform:rotate(45deg)}
.role .body{padding:0 0 32px; display:grid; gap:14px; max-width:70ch; font-size:var(--t-m); line-height:1.5}
.role .body ul{margin:0; padding-left:20px}
.ex{font-family:var(--sans); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); border:1px solid var(--line); padding:2px 6px; margin-left:10px; vertical-align:middle}
@media (max-width: 720px){.role summary{grid-template-columns:minmax(0,1fr) 40px} .role summary .c{display:none}}
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; list-style:none; padding:0; margin:0; counter-reset:s}
.steps li{counter-increment:s; border-top:1px solid var(--ink); padding-top:16px; display:grid; gap:10px; align-content:start}
.steps li::before{content:counter(s, decimal-leading-zero); font-size:16px; color:var(--grey)}
.steps b{font-family:var(--serif); font-weight:400; font-size:var(--h-s)}
.steps span{color:var(--grey)}
@media (max-width: 860px){.steps{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 480px){.steps{grid-template-columns:1fr}}

/* about */
.story{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px 64px; align-items:end}
@media (max-width: 860px){.story{grid-template-columns:1fr}}
.values{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.values div{border-top:1px solid var(--ink); padding-top:16px; display:grid; gap:12px}
.values p{color:var(--grey); font-size:var(--t-m)}
@media (max-width: 760px){.values{grid-template-columns:1fr}}
.leader{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,8fr); gap:24px; padding-block:40px; border-top:1px solid var(--line)}
.leader .photo{aspect-ratio:4/5}
.leader .txt{grid-column:3; display:grid; gap:16px; align-content:start}
.leader .role{font-size:16px; color:var(--grey)}
.leader p{font-size:var(--t-m); line-height:1.5}
@media (max-width: 760px){.leader{grid-template-columns:120px minmax(0,1fr)} .leader .txt{grid-column:2}}
.offices{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 24px}
.office{border-top:1px solid var(--ink); padding:18px 0 40px; display:grid; gap:8px; align-content:start}
.office .k{font-size:16px; color:var(--grey)}
.office h4{font-size:var(--h-s)}
.office p{font-size:16px}
@media (max-width: 860px){.offices{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width: 520px){.offices{grid-template-columns:1fr}}
.certs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px}
.cert{border-top:1px solid var(--ink); padding-top:16px; display:grid; gap:8px; align-content:start}
.cert h4{font-size:var(--h-s)}
.cert p{color:var(--grey)}
@media (max-width: 760px){.certs{grid-template-columns:1fr}}
.quote{font-family:var(--serif); font-size:var(--h-l); line-height:1.15; letter-spacing:-0.03em; max-width:22ch}
.quote-by{margin-top:24px; font-size:20px; color:#BDBDBD}

/* contact */
.contact-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr); gap:24px}
.contact-grid form{grid-column:3}
.clist{display:grid; border-top:1px solid var(--ink); align-content:start}
.clist div{padding:18px 0; border-bottom:1px solid var(--line); display:grid; gap:6px}
.clist .k{font-size:16px; color:var(--grey)}
.clist .v{font-size:20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.copy-btn{font-size:14px; padding:4px 10px; border:1px solid var(--grey); background:transparent; cursor:pointer; color:var(--ink)}
.copy-btn:hover{background:var(--ink); color:var(--bg)}
form{display:grid; gap:20px; align-content:start}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
label{display:grid; gap:8px; font-size:16px; color:var(--grey)}
input,select,textarea{font:inherit; font-size:18px; color:var(--ink); background:#FFFFFF; border:none; border-bottom:1px solid var(--ink); padding:10px 0; border-radius:0; width:100%; min-width:0}
textarea{min-height:140px; resize:vertical; border:1px solid var(--ink); padding:12px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 1px 0 var(--brand)}
.note{font-size:16px; padding:14px 16px; background:var(--soft); border-left:3px solid var(--brand)}
@media (max-width: 860px){.contact-grid{grid-template-columns:1fr} .contact-grid form{grid-column:1} .f2{grid-template-columns:1fr}}

/* footer: ExidaSP burgundy */
.site-foot{background:var(--brand); color:var(--brand-ink)}
.site-foot .container{padding-block:64px 28px}
.ft{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px}
.ft .tag{font-family:var(--serif); font-size:28px; line-height:1.25; letter-spacing:-0.01em; max-width:28ch}
.ft .links{display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; align-content:start}
.ft .links a{font-size:22px; cursor:pointer}
.ft .links a:hover{text-decoration:underline; text-underline-offset:5px}
.fl{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-block:64px 32px; font-size:14px}
.fb{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; font-size:14px}
.fb img{width:180px}
.fb .credits{max-width:80ch; opacity:.85}
@media (max-width: 760px){.ft{grid-template-columns:1fr} .fl{justify-content:flex-start}}


/* full project record list */
.rec-tools{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:20px; margin-bottom:32px; align-items:end}
.rec-tools label{font-size:16px}
.rec-tools input,.rec-tools select{background:transparent}
.rec{border-top:1px solid var(--ink)}
.rec-row{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr) minmax(0,1.6fr) 60px; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); align-items:baseline}
.rec-row h4{font-size:22px; line-height:1.25}
.rec-row p{font-size:16px; color:var(--grey); margin-top:6px}
.rec-row .c{font-size:16px}
.rec-row .c.g{color:var(--grey)}
.rec-row .yr{font-family:var(--serif); font-size:22px; text-align:right; font-variant-numeric:tabular-nums}
.rec-head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,2fr) minmax(0,1.6fr) 60px; gap:20px; padding:0 0 12px; font-size:14px; color:var(--grey)}
.rec-head span:last-child{text-align:right}
.rec-more{margin-top:32px; display:flex; justify-content:center}
.rec-count{font-size:16px; color:var(--grey); margin-bottom:12px}
@media (max-width: 860px){.rec-tools{grid-template-columns:1fr 1fr} .rec-tools label:first-child{grid-column:1 / -1} .rec-head{display:none} .rec-row{grid-template-columns:minmax(0,1fr) 60px; gap:6px 16px} .rec-row .c{grid-column:1}}
/* hover lines in ExidaSP burgundy */
.idea:hover h3,.tile:hover .name,.pcard:hover h4{text-decoration-color:var(--brand)}
.cta:hover{background:transparent; color:var(--brand); border-color:var(--brand)}
.car-btn:hover{background:transparent; color:var(--brand); border-color:var(--brand)}
.copy-btn:hover{background:transparent; color:var(--brand); border-color:var(--brand)}
.filter-line button:hover{color:var(--ink); border-bottom-color:var(--brand)}
.svc .rel a:hover,.used a:hover{color:var(--brand); text-decoration-color:var(--brand)}
.back:hover{color:var(--brand)}
.page[hidden]{display:none!important}
.page{animation:fade .4s ease both}
@keyframes fade{from{opacity:.4}to{opacity:1}}