/* ============================================================
   Premshire — terminal luxury
   Goud op nachtzwart, scherpe hoeken zoals het woordmerk.
   Fraunces voor koppen, Archivo voor lopende tekst,
   JetBrains Mono voor alles wat naar de machine ruikt.
   ============================================================ */

:root{
  --ink:        #0C0C0A;   /* page ground */
  --ink-2:      #12120E;   /* raised panels */
  --ink-3:      #1A1913;   /* cards */
  --line:       #26241B;   /* hairlines */
  --line-gold:  #4a3f14;
  --gold:       #C9A227;
  --gold-hi:    #E6C14A;
  --gold-dim:   #8a7422;
  --paper:      #EDE8DA;   /* headings */
  --body:       #B9B4A4;   /* body copy */
  --mute:       #7d786a;
  --ff-display: "Fraunces", Georgia, serif;
  --ff-body:    "Archivo", "Helvetica Neue", sans-serif;
  --ff-mono:    "JetBrains Mono", "SF Mono", Menlo, monospace;
}

*{ margin:0; padding:0; box-sizing:border-box }
[hidden]{ display:none !important }
html{ scroll-behavior:smooth; scroll-padding-top:84px }
body{
  background:var(--ink);
  color:var(--body);
  font:400 17px/1.7 var(--ff-body);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--gold); color:var(--ink) }

img{ max-width:100% }
a{ color:var(--gold); text-decoration:none }
a:hover{ color:var(--gold-hi) }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px }
.wrap-narrow{ max-width:820px }

h1,h2,h3{ font-family:var(--ff-display); color:var(--paper); font-weight:600 }
h2{ font-size:clamp(30px,4.4vw,52px); line-height:1.08; letter-spacing:-.01em }
h1 em, h2 em{ font-style:italic; color:var(--gold) }

.kicker,.sec-label{
  font:500 13px/1 var(--ff-mono);
  color:var(--gold);
  letter-spacing:.08em;
  text-transform:lowercase;
  margin-bottom:22px;
}
.sec-intro{ max-width:620px; margin:22px 0 0; font-size:18px }
.arw{ display:inline-block; transition:transform .25s }
.btn:hover .arw{ transform:translateX(4px) }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font:600 15px/1 var(--ff-body);
  letter-spacing:.02em;
  padding:16px 28px;
  border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
  cursor:pointer;
}
.btn-gold{ background:var(--gold); color:var(--ink) }
.btn-gold:hover{ background:var(--gold-hi); color:var(--ink); transform:translateY(-2px) }
.btn-ghost{ border-color:var(--line-gold); color:var(--paper); background:transparent }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi) }
.btn-dark{ background:var(--ink); color:var(--gold-hi) }
.btn-dark:hover{ background:#000; color:var(--gold-hi); transform:translateY(-2px) }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; gap:36px;
  padding:0 28px; height:72px;
  background:transparent;
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(12,12,10,.88);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.wordmark{ display:inline-flex; font:700 15px/1 var(--ff-mono); letter-spacing:.06em }
.wm-prem { background:var(--gold); color:var(--ink); padding:7px 9px }
.wm-shire{ background:var(--ink); color:var(--gold); padding:7px 9px; border:1px solid var(--gold); border-left:0 }
.site-nav{ display:flex; gap:28px; margin-left:auto }
.site-nav a{ font:500 14px/1 var(--ff-body); color:var(--body) }
.site-nav a:hover{ color:var(--paper) }
.header-cta{ padding:12px 22px }
.nav-toggle{ display:none }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:170px 0 110px;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(201,162,39,.10), transparent 60%),
    var(--ink);
}
.hero-grid-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/56px 56px;
  opacity:.28;
  mask-image:radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 100%);
}
.hero-wrap{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center }
.hero h1{ font-size:clamp(42px,5.6vw,74px); line-height:1.02; letter-spacing:-.015em }
.hero .lead{ margin:26px 0 34px; max-width:520px; font-size:18px }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap }
.hero-facts{
  display:flex; gap:44px; list-style:none;
  margin-top:54px; padding-top:26px;
  border-top:1px solid var(--line);
}
.hero-facts b{ display:block; font:600 30px/1 var(--ff-display); color:var(--gold) }
.hero-facts span{ font:500 12px/1 var(--ff-mono); color:var(--mute); letter-spacing:.1em; text-transform:uppercase }

/* terminal panel */
.hero-term{
  background:#0A0A08;
  border:1px solid var(--line-gold);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.06);
}
.term-bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; border-bottom:1px solid var(--line);
  font:500 12px/1 var(--ff-mono); color:var(--mute);
}
.term-bar i{ width:10px; height:10px; border-radius:50%; background:#2c2a20 }
.term-bar i:first-child{ background:var(--gold-dim) }
.term-bar span{ margin-left:10px }
.term-body{
  padding:22px 22px 26px;
  font:400 13.5px/1.85 var(--ff-mono);
  color:#cfc9b4;
  min-height:280px;
  white-space:pre-wrap;
}
.t-prompt{ color:var(--gold) }
.t-dim{ color:var(--mute) }
.t-gold{ color:var(--gold-hi) }
.t-caret{
  display:inline-block; width:8px; height:16px;
  background:var(--gold); vertical-align:-3px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

/* ---------- sections ---------- */
.sec{ padding:110px 0 }
.sec-alt{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }

/* ---------- feature cards ---------- */
.card-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:56px;
}
.card{
  background:var(--ink);
  padding:34px 30px 38px;
  transition:background .25s;
  position:relative;
}
.sec-alt .card{ background:var(--ink-2) }
.card:hover{ background:var(--ink-3) }
.card::after{
  content:""; position:absolute; left:0; top:0; width:0; height:2px;
  background:var(--gold); transition:width .35s;
}
.card:hover::after{ width:100% }
.card h3{ font-size:21px; margin:18px 0 10px }
.card p{ font-size:15.5px }
.ico{ width:30px; height:30px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.extras-grid{ grid-template-columns:repeat(2,1fr) }
.extras-grid .card h3{ margin-top:0 }

/* ---------- projects ---------- */
.proj-list{ margin-top:56px; border-top:1px solid var(--line) }
.proj{
  display:grid; grid-template-columns:110px 1fr auto; gap:28px; align-items:center;
  padding:34px 8px; border-bottom:1px solid var(--line);
  transition:background .25s, padding-left .25s;
}
.proj:hover{ background:rgba(201,162,39,.04); padding-left:18px }
.proj-num{ font:700 14px/1 var(--ff-mono); color:var(--gold-dim) }
.proj h3{ font-size:23px; margin-bottom:8px }
.proj p{ max-width:560px; font-size:15.5px }
.tags{ display:flex; gap:8px; list-style:none; flex-wrap:wrap; justify-content:flex-end }
.tags li{
  font:500 12px/1 var(--ff-mono); color:var(--body);
  border:1px solid var(--line-gold); padding:7px 10px; white-space:nowrap;
}

/* ---------- tools ---------- */
.tool-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:56px;
}
.tool{
  background:var(--ink); padding:26px 18px; text-align:center;
  transition:background .25s;
}
.tool:hover{ background:var(--ink-3) }
.tool b{ display:block; font:700 15px/1.3 var(--ff-mono); color:var(--paper) }
.tool span{ font:500 11px/1 var(--ff-mono); color:var(--mute); letter-spacing:.08em; text-transform:uppercase }
.tool:hover b{ color:var(--gold-hi) }

/* ---------- accordion (curriculum + faq) ---------- */
.acc{ margin-top:56px; border-top:1px solid var(--line) }
.acc-item{ border-bottom:1px solid var(--line) }
.acc-item summary{
  display:grid; grid-template-columns:120px 1fr auto auto; gap:24px; align-items:center;
  padding:26px 8px; cursor:pointer; list-style:none;
  transition:background .2s;
}
#faqAcc .acc-item summary{ grid-template-columns:1fr auto }
.acc-item summary::-webkit-details-marker{ display:none }
.acc-item summary:hover{ background:rgba(201,162,39,.04) }
.acc-num{ font:700 13px/1 var(--ff-mono); color:var(--gold-dim) }
.acc-title{ font-family:var(--ff-display); font-size:20px; color:var(--paper); font-weight:600 }
.acc-meta{ font:500 13px/1 var(--ff-mono); color:var(--mute) }
.acc-item summary::after{
  content:"+"; font:400 22px/1 var(--ff-mono); color:var(--gold);
  transition:transform .3s;
}
.acc-item[open] summary::after{ transform:rotate(45deg) }
.acc-item ul{ list-style:none; padding:2px 8px 30px 152px }
.acc-item ul li{
  font-size:15.5px; padding:7px 0 7px 22px; position:relative;
}
.acc-item ul li::before{
  content:"—"; position:absolute; left:0; color:var(--gold-dim);
}
.acc-body{ padding:0 8px 30px; max-width:640px }
.acc-body p{ font-size:15.5px }

/* ---------- comparison table ---------- */
.table-scroll{ overflow-x:auto; margin-top:56px; border:1px solid var(--line) }
.cmp{ width:100%; min-width:640px; border-collapse:collapse; font-size:15px }
.cmp th,.cmp td{ padding:16px 20px; text-align:left; border-bottom:1px solid var(--line) }
.cmp thead th{
  font:700 13px/1 var(--ff-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--mute); background:var(--ink-2);
}
.cmp tbody tr:last-child td{ border-bottom:0 }
.cmp td:first-child{ color:var(--body) }
.cmp td,.cmp th{ color:var(--mute) }
.cmp .hl{ color:var(--gold-hi); background:rgba(201,162,39,.05); font-weight:600 }
.cmp tbody tr:hover td{ background:rgba(255,255,255,.015) }
.cmp tbody tr:hover td.hl{ background:rgba(201,162,39,.09) }
.table-note{ margin-top:18px; font-size:14.5px; color:var(--mute); max-width:560px }

/* ---------- pricing ---------- */
.bill-toggle{
  display:inline-flex; margin-top:34px;
  border:1px solid var(--line-gold);
}
.bt-opt{
  font:500 13px/1 var(--ff-mono); letter-spacing:.06em;
  color:var(--body); background:transparent; border:0;
  padding:13px 22px; cursor:pointer;
  transition:background .2s,color .2s;
}
.bt-opt:hover{ color:var(--paper) }
.bt-opt.active{ background:var(--gold); color:var(--ink) }

.price-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  margin-top:44px; align-items:start;
}
.price{
  background:var(--ink-2); border:1px solid var(--line);
  padding:38px 32px; display:flex; flex-direction:column;
}
.sec-alt .price{ background:var(--ink) }
.price-hl{
  background:var(--ink-3); border-color:var(--gold);
  box-shadow:0 24px 70px rgba(0,0,0,.4);
  position:relative; padding-top:52px;
}
.flag{
  position:absolute; top:0; left:0;
  background:var(--gold); color:var(--ink);
  font:700 11px/1 var(--ff-mono); letter-spacing:.1em; text-transform:uppercase;
  padding:8px 12px;
}
.price h3{ font-size:22px }
.amount{ font:600 46px/1 var(--ff-display); color:var(--paper); margin:16px 0 4px }
.per{ font:500 12px/1 var(--ff-mono); color:var(--mute); letter-spacing:.08em; text-transform:uppercase }
.price ul{ list-style:none; margin:26px 0 32px; flex:1 }
.price ul li{ padding:8px 0 8px 24px; position:relative; font-size:15px; border-bottom:1px dashed var(--line) }
.price ul li:last-child{ border-bottom:0 }
.price ul li::before{ content:"+"; position:absolute; left:2px; color:var(--gold); font-family:var(--ff-mono) }
.price .btn{ text-align:center }

.price-note{
  margin-top:26px;
  font:500 13px/1.6 var(--ff-mono);
  color:var(--mute);
}

/* ---------- contact form ---------- */
.contact-form{ margin-top:44px; display:flex; flex-direction:column; gap:20px }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.contact-form label{
  display:flex; flex-direction:column; gap:8px;
  font:600 13px/1.3 var(--ff-body); color:var(--paper);
}
.req{ color:var(--gold) }
.contact-form input,
.contact-form select,
.contact-form textarea{
  background:var(--ink); border:1px solid var(--line);
  color:var(--paper); font:400 15px/1.5 var(--ff-body);
  padding:14px 16px; border-radius:0; width:100%;
  transition:border-color .2s;
}
.contact-form textarea{ resize:vertical }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{ border-color:var(--gold); outline:none }
.contact-form .btn{ align-self:flex-start }
.hp-field{ position:absolute !important; left:-9999px; height:0; width:0; border:0; padding:0 }
.form-note{ font:500 14px/1.6 var(--ff-body); min-height:22px }
.form-note.ok{ color:var(--gold-hi) }
.form-note.err{ color:#d47a6a }

/* ---------- final cta ---------- */
.cta-final{
  background:var(--gold);
  color:var(--ink);
  padding:100px 0;
  text-align:center;
}
.cta-final .kicker{ color:rgba(12,12,10,.65) }
.cta-final h2{ color:var(--ink); margin-bottom:36px; font-size:clamp(34px,5vw,60px) }

/* ---------- footer ---------- */
.site-footer{ padding:64px 0; border-top:1px solid var(--line) }
.foot-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; align-items:start }
.foot-tag{ margin-top:16px; font-size:14.5px; color:var(--mute) }
.foot-nav{ display:flex; flex-direction:column; gap:10px }
.foot-nav a{ color:var(--body); font-size:14.5px }
.foot-nav a:hover{ color:var(--gold) }
.foot-contact{ text-align:right; font-size:14.5px }
.foot-addr{ margin-top:14px; font-size:13.5px; line-height:1.7; color:var(--mute) }
.foot-copy{ margin-top:14px; color:var(--mute); font:500 12px/1.6 var(--ff-mono) }

/* ---------- legal pages ---------- */
.legal{ padding:150px 0 90px }
.legal h1{ font-size:clamp(34px,4.5vw,54px); letter-spacing:-.01em }
.legal .updated{ font:500 13px/1 var(--ff-mono); color:var(--gold); margin:16px 0 34px }
.legal h2{ font-size:23px; margin:48px 0 12px }
.legal p{ margin:12px 0; font-size:15.5px }
.legal ul{ margin:12px 0 12px 4px; list-style:none }
.legal ul li{ position:relative; padding:6px 0 6px 24px; font-size:15.5px }
.legal ul li::before{ content:"—"; position:absolute; left:0; color:var(--gold-dim) }
.legal b{ color:var(--paper); font-weight:600 }

/* ---------- checkout ---------- */
.checkout{ padding:150px 0 100px }
.checkout h1{ font-size:clamp(34px,4.5vw,54px); letter-spacing:-.01em }
.co-lead{ max-width:640px; margin:18px 0 0; font-size:17px }
.co-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; margin-top:52px; align-items:start }
.co-summary,.co-form{ background:var(--ink-2); border:1px solid var(--line); padding:34px 32px 36px }
.co-eyebrow{
  font:500 12px/1 var(--ff-mono); color:var(--gold);
  letter-spacing:.08em; text-transform:lowercase; margin-bottom:14px;
}
.co-switch{ display:inline-flex; border:1px solid var(--line-gold); margin:0 12px 12px 0; vertical-align:top }
.co-summary .bill-toggle{ margin:0 0 12px; vertical-align:top }
.co-plan-name{ font-size:clamp(28px,3vw,36px); line-height:1.1; margin-top:20px }
.co-plan-desc{ margin-top:10px; font-size:15.5px; max-width:560px }
.co-seats{
  margin-top:20px; display:flex; align-items:center; gap:14px;
  font:600 13px/1.3 var(--ff-body); color:var(--paper);
}
.co-seats label{ display:flex; flex-direction:column; gap:6px }
.co-seats input{
  width:96px; background:var(--ink); border:1px solid var(--line); color:var(--paper);
  font:500 15px/1.5 var(--ff-mono); padding:10px 12px; border-radius:0;
}
.co-seats input:focus{ border-color:var(--gold); outline:none }
.co-hint{ font:500 12px/1.4 var(--ff-mono); color:var(--mute); letter-spacing:.03em }
.co-lines{ margin-top:28px; border-top:1px solid var(--line) }
.co-lines > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:12px 0; border-bottom:1px dashed var(--line); font-size:15px;
}
.co-lines dt{ color:var(--body) }
.co-lines dd{ color:var(--paper); font:500 15px/1.4 var(--ff-mono); text-align:right }
.co-lines .co-total{ border-bottom:1px solid var(--line) }
.co-lines .co-total dt{ color:var(--paper); font-weight:600; font-size:16px }
.co-lines .co-total dd{ color:var(--gold-hi); font-size:24px; font-weight:700 }
.co-notice{
  margin-top:24px; padding:16px 18px; background:var(--ink);
  border-left:3px solid var(--gold); font-size:15px; color:var(--body);
}
.co-notice b{ color:var(--paper); font-weight:600 }
.co-refund{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-size:14.5px }
.co-refund .co-eyebrow{ margin-bottom:8px }
.co-inc-label{ margin:26px 0 6px }
.co-includes{ list-style:none; columns:2; column-gap:24px }
.co-includes li{ position:relative; padding:5px 0 5px 20px; font-size:14px; break-inside:avoid }
.co-includes li::before{ content:"+"; position:absolute; left:0; color:var(--gold); font-family:var(--ff-mono) }

.co-form{ margin-top:0; position:sticky; top:96px }
.co-form .co-eyebrow{ margin-bottom:0 }
.co-form .co-hint{ font-weight:400 }
.contact-form label.co-agree{
  flex-direction:row; align-items:flex-start; gap:12px;
  font:400 14.5px/1.55 var(--ff-body); color:var(--body); cursor:pointer;
}
.contact-form .co-agree input[type="checkbox"]{
  width:18px; height:18px; flex:0 0 auto; margin-top:3px; padding:0;
  accent-color:var(--gold); cursor:pointer;
}
.co-pay{ border:1px dashed var(--line-gold); background:var(--ink); padding:22px 22px 24px }
.co-pay-label{ font:500 12px/1 var(--ff-mono); color:var(--gold-dim); letter-spacing:.08em; margin-bottom:12px }
.co-pay-title{
  font:600 21px/1.2 var(--ff-display); color:var(--paper); margin-bottom:8px;
  display:flex; align-items:center; gap:12px;
}
.co-pay-title::before{
  content:""; width:9px; height:9px; flex:0 0 auto; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.15);
  animation:co-pulse 2.2s ease-in-out infinite;
}
@keyframes co-pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(201,162,39,.15) } 50%{ box-shadow:0 0 0 8px rgba(201,162,39,.04) } }
.co-pay p{ font-size:14.5px }
.co-form .btn{ align-self:stretch; text-align:center }
.co-fine{ font:500 12px/1.6 var(--ff-mono); color:var(--mute); letter-spacing:.03em }

@media (prefers-reduced-motion:reduce){ .co-pay-title::before{ animation:none } }
@media (max-width:1023px){
  .co-grid{ grid-template-columns:1fr }
  .co-form{ position:static }
}
@media (max-width:719px){
  .checkout{ padding:118px 0 76px }
  .co-summary,.co-form{ padding:26px 20px 28px }
  .co-includes{ columns:1 }
  .co-switch,.co-summary .bill-toggle{ display:flex; margin-right:0 }
  .co-switch .bt-opt,.co-summary .bill-toggle .bt-opt{ flex:1; text-align:center }
}

/* ---------- reveal animaties ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease }
.reveal.d1{ transition-delay:.1s } .reveal.d2{ transition-delay:.2s }
.reveal.d3{ transition-delay:.3s } .reveal.d4{ transition-delay:.4s }
.reveal.in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
  .t-caret{ animation:none }
  *{ transition-duration:.001s !important; animation-duration:.001s !important }
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .hero-wrap{ grid-template-columns:1fr; gap:48px }
  .hero-term{ max-width:640px }
  .card-grid{ grid-template-columns:repeat(2,1fr) }
  .tool-grid{ grid-template-columns:repeat(4,1fr) }
  .price-grid{ grid-template-columns:1fr 1fr }
  .price-hl{ order:-1 }
  .proj{ grid-template-columns:70px 1fr; }
  .proj .tags{ grid-column:2; justify-content:flex-start }
}
@media (max-width:719px){
  body{ font-size:16px }
  .sec{ padding:76px 0 }
  .hero{ padding:130px 0 76px }
  .site-nav{
    display:none; position:fixed; inset:72px 0 auto;
    flex-direction:column; gap:0;
    background:rgba(12,12,10,.97); border-bottom:1px solid var(--line);
    padding:10px 0 16px;
  }
  .site-nav.open{ display:flex }
  .site-nav a{ padding:14px 28px; font-size:16px }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; justify-content:center;
    margin-left:auto; background:none; border:0; padding:10px; cursor:pointer;
  }
  .nav-toggle span{ width:22px; height:2px; background:var(--paper); transition:transform .25s }
  .nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg) }
  .nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }
  .site-nav{ margin-left:0 }
  .header-cta{ margin-left:auto }
  .nav-toggle{ margin-left:0 }
  .hero-facts{ flex-wrap:wrap; gap:26px }
  .card-grid,.extras-grid{ grid-template-columns:1fr }
  .tool-grid{ grid-template-columns:repeat(3,1fr) }
  .price-grid{ grid-template-columns:1fr }
  .f-row{ grid-template-columns:1fr }
  .acc-item summary{ grid-template-columns:1fr auto; row-gap:6px }
  .acc-num{ grid-column:1 / -1 }
  .acc-item ul{ padding-left:30px }
  .foot-grid{ grid-template-columns:1fr; gap:28px }
  .foot-contact{ text-align:left }
}