/* ============================================================
   TOKENS
   Light  = CMY process inks on paper   (subtractive, multiply)
   Dark   = RGB light on a screen       (additive, screen)
   ============================================================ */
:root{
  --paper:      #F2F4F3;
  --paper-2:    #FFFFFF;
  --paper-3:    #E7EBEA;
  --ink:        #14181A;
  --ink-soft:   #4C5457;
  --ink-faint:  #838D90;
  --rule:       #D2D9D8;
  --rule-soft:  #E2E7E6;

  --plate-a:    #00A0DF;   /* process cyan    */
  --plate-b:    #EC008C;   /* process magenta */
  --plate-c:    #FFD400;   /* process yellow  */
  --blend:      multiply;

  --accent:     #0083BE;
  --accent-2:   #C4007A;
  --on-accent:  #FFFFFF;

  --shadow:     0 1px 2px rgba(20,24,26,.05), 0 8px 24px -12px rgba(20,24,26,.18);
  --shadow-lg:  0 2px 4px rgba(20,24,26,.06), 0 24px 48px -20px rgba(20,24,26,.28);

  --display: "Bahnschrift","DIN Condensed","DIN Alternate","Oswald","Arial Narrow","Franklin Gothic Medium",Impact,sans-serif;
  --body:    "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:    "Cascadia Mono",Consolas,"SF Mono","Roboto Mono",ui-monospace,Menlo,monospace;

  --wrap: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #0E1113;
    --paper-2:    #171B1E;
    --paper-3:    #1F2428;
    --ink:        #E9EEEF;
    --ink-soft:   #A2ADB1;
    --ink-faint:  #6B767A;
    --rule:       #2A3135;
    --rule-soft:  #21272A;

    --plate-a:    #FF3B30;   /* red   */
    --plate-b:    #2BE06A;   /* green */
    --plate-c:    #3D7BFF;   /* blue  */
    --blend:      screen;

    --accent:     #46C8F5;
    --accent-2:   #FF63B4;
    --on-accent:  #08252F;

    --shadow:     0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lg:  0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0E1113; --paper-2:#171B1E; --paper-3:#1F2428;
  --ink:#E9EEEF; --ink-soft:#A2ADB1; --ink-faint:#6B767A;
  --rule:#2A3135; --rule-soft:#21272A;
  --plate-a:#FF3B30; --plate-b:#2BE06A; --plate-c:#3D7BFF;
  --blend:screen;
  --accent:#46C8F5; --accent-2:#FF63B4; --on-accent:#08252F;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
}
:root[data-theme="light"]{
  --paper:#F2F4F3; --paper-2:#FFFFFF; --paper-3:#E7EBEA;
  --ink:#14181A; --ink-soft:#4C5457; --ink-faint:#838D90;
  --rule:#D2D9D8; --rule-soft:#E2E7E6;
  --plate-a:#00A0DF; --plate-b:#EC008C; --plate-c:#FFD400;
  --blend:multiply;
  --accent:#0083BE; --accent-2:#C4007A; --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(20,24,26,.05), 0 8px 24px -12px rgba(20,24,26,.18);
  --shadow-lg:0 2px 4px rgba(20,24,26,.06), 0 24px 48px -20px rgba(20,24,26,.28);
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;}

h1,h2,h3,h4{
  font-family:var(--display); font-weight:600; margin:0;
  font-stretch:condensed; font-variation-settings:'wdth' 82;
  letter-spacing:.005em; line-height:1.02; text-wrap:balance;
}
p{margin:0;}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* eyebrow — an ink swatch + tracked mono label */
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:26px; height:9px; flex:none;
  background:linear-gradient(90deg,
    var(--plate-a) 0 33.34%, var(--plate-b) 33.34% 66.67%, var(--plate-c) 66.67% 100%);
}

.lede{
  font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--ink-soft);
  max-width:62ch; line-height:1.62;
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.92rem 1.5rem; border:1px solid transparent; border-radius:2px;
  text-decoration:none; cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.btn-primary:hover{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--rule);}
.btn-ghost:hover{border-color:var(--ink);}

/* section rhythm */
.section{padding-block:clamp(4.5rem,9vw,7.5rem); border-top:1px solid var(--rule-soft);}
.section-head{max-width:56ch; margin-bottom:clamp(2.5rem,5vw,3.75rem);}
.section-head h2{font-size:clamp(2rem,4vw,3rem); margin-bottom:1rem;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--rule-soft);
}
.nav-in{display:flex; align-items:center; gap:2rem; height:66px;}
.mark{display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto;}
.mark-dots{display:flex; gap:3px;}
.mark-dots i{width:9px; height:9px; border-radius:50%; display:block;}
.mark-dots i:nth-child(1){background:var(--plate-a);}
.mark-dots i:nth-child(2){background:var(--plate-b);}
.mark-dots i:nth-child(3){background:var(--plate-c);}
.mark-name{
  font-family:var(--display); font-size:1.3rem; font-weight:600;
  font-stretch:condensed; font-variation-settings:'wdth' 82; letter-spacing:.02em;
}
.mark-name span{color:var(--accent);}
.nav-links{display:flex; gap:1.9rem; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
  padding-block:.3rem; border-bottom:1px solid transparent; transition:color .18s, border-color .18s;
}
.nav-links a:hover{color:var(--ink); border-bottom-color:var(--accent);}
.nav .btn{padding:.62rem 1.05rem; font-size:.72rem;}
@media (max-width:900px){ .nav-links{display:none;} }
@media (max-width:520px){ .nav .btn-ghost{display:none;} }

/* ============================================================
   HERO — colour separation registering on load
   ============================================================ */
.hero{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(4rem,8vw,6.5rem);}
.hero-grid{
  display:grid; gap:clamp(3rem,6vw,4.5rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center;
}
@media (max-width:940px){ .hero-grid{grid-template-columns:1fr;} }

.hero h1{
  font-size:clamp(2.7rem,6.4vw,4.9rem); line-height:.98; margin-bottom:1.5rem;
}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.1rem;}

.trust{
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin-top:2.6rem;
  padding-top:1.6rem; border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:.73rem; letter-spacing:.06em;
  color:var(--ink-faint); text-transform:uppercase;
}
.trust b{
  color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;
  margin-right:.4rem;
}

/* the separation lockup */
.sep-stage{position:relative; padding:clamp(1.5rem,3vw,2.5rem);}
.crop{position:absolute; width:22px; height:22px; pointer-events:none; opacity:.55;}
.crop::before,.crop::after{content:""; position:absolute; background:var(--ink-faint);}
.crop::before{width:100%; height:1px;} .crop::after{height:100%; width:1px;}
.crop.tl{top:0; left:0;} .crop.tl::before{top:0;} .crop.tl::after{left:0;}
.crop.tr{top:0; right:0;} .crop.tr::before{top:0; right:0;} .crop.tr::after{right:0;}
.crop.bl{bottom:0; left:0;} .crop.bl::before{bottom:0;} .crop.bl::after{left:0; bottom:0;}
.crop.br{bottom:0; right:0;} .crop.br::before{bottom:0; right:0;} .crop.br::after{right:0; bottom:0;}

.sep{position:relative; isolation:isolate;}
.sep-sizer{visibility:hidden;}
.sep-sizer,.plate{
  font-family:var(--display); font-weight:600;
  font-stretch:condensed; font-variation-settings:'wdth' 78;
  font-size:clamp(3.2rem,9.5vw,6.4rem); line-height:.86;
  letter-spacing:-.005em; margin:0;
}
.plate{
  position:absolute; inset:0; mix-blend-mode:var(--blend);
  animation-duration:1.5s; animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.16,.86,.28,1);
}
.p1{color:var(--plate-a); animation-name:reg1; animation-delay:.12s;}
.p2{color:var(--plate-b); animation-name:reg2; animation-delay:.22s;}
.p3{color:var(--plate-c); animation-name:reg3; animation-delay:.32s;}
@keyframes reg1{from{transform:translate(-20px,-13px) rotate(-1.4deg); opacity:0;} to{transform:none; opacity:1;}}
@keyframes reg2{from{transform:translate(17px,10px) rotate(1.1deg);   opacity:0;} to{transform:none; opacity:1;}}
@keyframes reg3{from{transform:translate(6px,-19px) rotate(.7deg);    opacity:0;} to{transform:none; opacity:1;}}

.sep-caption{
  display:flex; align-items:center; gap:.85rem; margin-top:1.6rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.chips{display:flex; gap:4px;}
.chips i{width:15px; height:15px; display:block; border-radius:1px;}
.chips i:nth-child(1){background:var(--plate-a);}
.chips i:nth-child(2){background:var(--plate-b);}
.chips i:nth-child(3){background:var(--plate-c);}
.mode-print{display:inline;} .mode-screen{display:none;}
@media (prefers-color-scheme: dark){ .mode-print{display:none;} .mode-screen{display:inline;} }
:root[data-theme="dark"] .mode-print{display:none;}
:root[data-theme="dark"] .mode-screen{display:inline;}
:root[data-theme="light"] .mode-print{display:inline;}
:root[data-theme="light"] .mode-screen{display:none;}

/* ============================================================
   SERVICES
   ============================================================ */
.family{margin-bottom:clamp(3rem,6vw,4.5rem);}
.family:last-child{margin-bottom:0;}
.family-head{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding-bottom:.9rem; margin-bottom:2rem; border-bottom:1px solid var(--rule);
}
.family-head h3{font-size:clamp(1.4rem,2.5vw,1.85rem);}
.family-head p{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-left:auto;
}

.cards{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft);}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:880px){ .cards-3{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .cards-3,.cards-2{grid-template-columns:1fr;} }

.card{
  background:var(--paper-2); padding:clamp(1.5rem,2.6vw,2rem);
  display:flex; flex-direction:column; gap:.7rem;
  transition:background .2s ease;
}
.card:hover{background:var(--paper-3);}
.card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:.1rem;}
.card-ico{width:30px; height:30px; color:var(--ink); transition:color .2s ease; flex:none;}
.card:hover .card-ico{color:var(--accent);}
.card-no{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}
.card h4{font-size:1.28rem;}
.card p{color:var(--ink-soft); font-size:.945rem; line-height:1.6;}
.card ul{
  margin:.35rem 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.35rem;
}
.card li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--ink-faint); border:1px solid var(--rule);
  padding:.2rem .5rem; border-radius:2px;
}

/* ============================================================
   HOSTING PLANS
   ============================================================ */
.plans{display:grid; gap:1.25rem; grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:880px){ .plans{grid-template-columns:1fr;} }
.plan{
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:3px; padding:clamp(1.6rem,3vw,2.1rem);
  display:flex; flex-direction:column; box-shadow:var(--shadow);
  position:relative;
}
.plan.featured{border-color:var(--accent); box-shadow:var(--shadow-lg);}
.plan-tag{
  position:absolute; top:-1px; right:1.4rem;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.28rem .6rem;
}
.plan h3{font-size:1.5rem; margin-bottom:.3rem;}
.plan-for{font-size:.9rem; color:var(--ink-soft); margin-bottom:1.4rem;}
.price{display:flex; align-items:baseline; gap:.35rem; margin-bottom:1.5rem;}
.price b{
  font-family:var(--display); font-weight:600; font-size:2.5rem;
  font-stretch:condensed; font-variation-settings:'wdth' 82;
  font-variant-numeric:tabular-nums; line-height:1;
}
.price span{font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); letter-spacing:.06em;}
.specs{
  list-style:none; margin:0 0 1.75rem; padding:0;
  display:flex; flex-direction:column; gap:.55rem; flex:1;
  font-family:var(--mono); font-size:.79rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.specs li{display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dotted var(--rule); padding-bottom:.55rem;}
.specs li b{color:var(--ink); font-weight:600;}
.plan .btn{width:100%;}
.plans-note{
  margin-top:1.5rem; font-family:var(--mono); font-size:.73rem;
  color:var(--ink-faint); letter-spacing:.03em;
}

/* ============================================================
   PRINT — offset vs digital
   ============================================================ */
.split{display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:start;}
@media (max-width:920px){ .split{grid-template-columns:1fr;} }
.table-scroll{overflow-x:auto; border:1px solid var(--rule); border-radius:3px; background:var(--paper-2);}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:.9rem;}
caption{
  text-align:left; padding:1rem 1.15rem; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.71rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint);
}
th,td{padding:.85rem 1.15rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule-soft);}
thead th{
  font-family:var(--mono); font-size:.71rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:500;
}
tbody th{font-weight:600; color:var(--ink); width:30%;}
tbody td{color:var(--ink-soft);}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;}
thead th:nth-child(2){color:var(--accent);}
thead th:nth-child(3){color:var(--accent-2);}

.jobs{list-style:none; margin:1.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem;}
.jobs li{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  border:1px solid var(--rule); color:var(--ink-soft);
  padding:.36rem .68rem; border-radius:2px; background:var(--paper-2);
}

/* ============================================================
   PROCESS — a real sequence, so it is numbered
   ============================================================ */
.steps{display:grid; gap:1px; background:var(--rule-soft); border-block:1px solid var(--rule-soft); grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:860px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }
.step{background:var(--paper); padding:clamp(1.6rem,3vw,2.1rem) clamp(1.2rem,2.4vw,1.6rem); display:flex; flex-direction:column; gap:.65rem;}
.step-no{
  font-family:var(--display); font-weight:600; font-size:2.6rem; line-height:1;
  font-stretch:condensed; font-variation-settings:'wdth' 78;
  font-variant-numeric:tabular-nums; color:var(--rule);
}
.step:nth-child(1) .step-no{color:var(--plate-a);}
.step:nth-child(2) .step-no{color:var(--plate-b);}
.step:nth-child(3) .step-no{color:var(--plate-c);}
.step:nth-child(4) .step-no{color:var(--ink);}
.step h4{font-size:1.2rem;}
.step p{font-size:.9rem; color:var(--ink-soft); line-height:1.58;}

/* ============================================================
   SECTORS
   ============================================================ */
.sectors{display:grid; gap:.75rem; grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:880px){ .sectors{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:480px){ .sectors{grid-template-columns:1fr;} }
.sector{
  border:1px solid var(--rule); border-radius:3px; background:var(--paper-2);
  padding:1.15rem 1.25rem; display:flex; flex-direction:row; align-items:center; gap:.8rem;
  transition:border-color .2s ease, transform .2s ease;
}
.sector:hover{border-color:var(--accent); transform:translateY(-2px);}
.sector-ico{width:24px; height:24px; color:var(--ink-soft); flex:none; transition:color .2s ease;}
.sector:hover .sector-ico{color:var(--accent);}
.sector-tx{display:flex; flex-direction:column; gap:.15rem; min-width:0;}
.sector b{font-family:var(--display); font-size:1.1rem; font-weight:600; font-stretch:condensed; font-variation-settings:'wdth' 82;}
.sector span{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-faint);}

/* ============================================================
   WHY
   ============================================================ */
.why{display:grid; gap:1px; background:var(--rule-soft); border:1px solid var(--rule-soft); grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:860px){ .why{grid-template-columns:1fr;} }
.why > div{background:var(--paper-2); padding:clamp(1.7rem,3vw,2.2rem); display:flex; flex-direction:column; gap:.7rem;}
.why h4{font-size:1.25rem;}
.why p{font-size:.94rem; color:var(--ink-soft); line-height:1.6;}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:80ch; border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0;
  font-family:var(--display); font-size:1.2rem; font-weight:600;
  font-stretch:condensed; font-variation-settings:'wdth' 84;
  position:relative; transition:color .18s;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--accent);}
.faq summary::after{
  content:"+"; position:absolute; right:.25rem; top:1.1rem;
  font-family:var(--mono); font-size:1.3rem; color:var(--ink-faint);
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq p{padding:0 2.5rem 1.4rem 0; color:var(--ink-soft); font-size:.96rem; max-width:68ch;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--paper-2); border-top:1px solid var(--rule);}
.contact-grid{display:grid; gap:clamp(2.5rem,5vw,4rem); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start;}
@media (max-width:920px){ .contact-grid{grid-template-columns:1fr;} }
.detail{display:flex; flex-direction:column; gap:.2rem; padding-block:1rem; border-bottom:1px solid var(--rule-soft);}
.detail dt{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.detail dd{margin:0; font-size:1.02rem;}
.detail dd a{text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color .18s;}
.detail dd a:hover{border-bottom-color:var(--accent);}

form{display:grid; gap:1.1rem;}
.row{display:grid; gap:1.1rem; grid-template-columns:1fr 1fr;}
@media (max-width:560px){ .row{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:.4rem;}
.field label{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:2px;
  padding:.8rem .9rem; transition:border-color .18s ease;
}
.field textarea{resize:vertical; min-height:118px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);}
.form-note{font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); line-height:1.55;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--rule); padding-block:2.75rem 3.25rem; font-size:.88rem; color:var(--ink-soft);}
.foot-top{display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; justify-content:space-between; margin-bottom:2.25rem;}
.foot-cols{display:flex; flex-wrap:wrap; gap:3rem;}
.foot-col{display:flex; flex-direction:column; gap:.5rem;}
.foot-col b{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:500;}
.foot-col a{text-decoration:none; color:var(--ink-soft); transition:color .18s;}
.foot-col a:hover{color:var(--accent);}
.foot-bar{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.5rem; border-top:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-faint);
}

/* ============================================================
   REVEAL + MOTION
   ============================================================ */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,.86,.28,1);}
.reveal.in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important;}
  .plate{animation:none; opacity:1; transform:none;}
  .reveal{opacity:1; transform:none;}
}