/* ============================================================
   Caldon — styles.css
   Shared by index.html and privacy-policy.html
   ============================================================ */

   :root{
    --ink:#20493f;        /* deep pine */
    --pine:#14493B;       /* secondary green */
    --emerald:#0E7C59;    /* interactive green (refined, cleaner jewel-tone) */
    --emerald-rgb:14,124,89;
    --gold:#CFA24C;       /* single warm accent */
    --paper:#EEF1EB;      /* clean, faintly-cool off-white */
    --paper-2:#E4E8E0;
    --card:#F8FAF5;
    --muted:#586A61;
    --line:rgba(14,42,35,.13);
    --line-strong:rgba(14,42,35,.26);
    --shadow:0 1px 2px rgba(14,42,35,.05), 0 14px 36px -18px rgba(14,42,35,.28);
    --display:"Bricolage Grotesque", system-ui, sans-serif;
    --body:"Inter", system-ui, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, monospace;
    --maxw:1160px;
  }
  
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;overscroll-behavior-y:none}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);
    -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;overscroll-behavior-y:none;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;margin:0}
  p{margin:0}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
  
  .eyebrow{
    font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--emerald);display:inline-flex;align-items:center;gap:.6em;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--emerald);display:inline-block}
  
  /* ---------- Scroll progress bar ---------- */
  .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:80;transition:width .1s linear}
  
  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.55em;
    font-family:var(--body);font-weight:500;font-size:.98rem;
    padding:.85em 1.4em;border-radius:100px;border:1px solid transparent;cursor:pointer;
    transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .btn-primary{background:var(--ink);color:var(--paper)}
  .btn-primary:hover{transform:translateY(-2px);background:var(--pine)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
  .btn-ghost:hover{transform:translateY(-2px);border-color:var(--ink);background:rgba(14,42,35,.04)}
  .btn-gold{position:relative;overflow:hidden;background:var(--gold);color:var(--ink)}
  .btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05)}
  .btn-gold::after{
    content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg);animation:shimmer 4.5s ease-in-out infinite;
  }
  @keyframes shimmer{0%,60%{left:-120%}80%,100%{left:180%}}
  .btn .arw{transition:transform .18s ease}
  .btn:hover .arw{transform:translate(3px,-3px)}
  @media (prefers-reduced-motion:reduce){.btn-gold::after{animation:none;display:none}}
  
  /* ---------- Header / Nav ---------- */
  header{
    position:sticky;top:0;z-index:60;background:rgba(238,241,235,.82);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;
    transition:border-color .25s ease, background .25s ease;
  }
  header.scrolled{border-bottom-color:var(--line);background:rgba(238,241,235,.95)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
  .brand{display:flex;align-items:center}
  .brand img{height:140px;width:auto}
  .back{font-size:.92rem;color:var(--muted)}
  .back:hover{color:var(--ink)}
  
  .nav-links{display:flex;align-items:center;gap:26px}
  .nav-links a.lnk{font-size:.95rem;color:var(--muted);transition:color .18s ease;position:relative}
  .nav-links a.lnk:hover{color:var(--ink)}
  .nav-links a.lnk::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--gold);transition:width .22s ease}
  .nav-links a.lnk:hover::after{width:100%}
  .burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:8px;width:44px;height:40px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
  .burger span{width:20px;height:2px;background:var(--ink);transition:.2s}
  
  /* ---------- Hero ---------- */
  .hero{
    position:relative;overflow:hidden;
    min-height:calc(100vh - 74px);display:flex;flex-direction:column;
    background:
      linear-gradient(to right, rgba(238,241,235,.98) 0%, rgba(238,241,235,.95) 40%, rgba(238,241,235,.55) 58%, rgba(238,241,235,0) 78%),
      url('images/background.png') center right / cover no-repeat;
  }
  .hero-banner{position:relative;flex:1;display:flex;align-items:center;padding:64px 0 32px}
  .hero-banner > .wrap{width:100%}
  .hero-content{position:relative;z-index:1;max-width:500px}
  .hero h1{
    font-family:"Fraunces",serif;font-weight:600;letter-spacing:-.01em;
    font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.1;margin-top:0;
  }
  .hero h1 .line{display:block;white-space:nowrap}
  .hero-lede{margin-top:22px;font-size:1.18rem;color:var(--muted);max-width:34ch}
  .hero-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px}

  .hero-strip{position:relative;padding:40px 0 56px}
  .hero-strip-eyebrow{
    display:block;text-align:center;
    font-family:var(--mono);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  }
  .quick-svc-grid{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .quick-svc{display:flex;align-items:flex-start;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
  .qs-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:rgba(var(--emerald-rgb),.12);color:var(--emerald);display:flex;align-items:center;justify-content:center}
  .quick-svc h4{font-family:var(--display);font-weight:600;font-size:1rem;margin-bottom:3px}
  .quick-svc p{font-size:.86rem;color:var(--muted)}

  /* ---------- Industries ticker ---------- */
  .ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-top:1px solid rgba(238,241,235,.1);border-bottom:1px solid rgba(238,241,235,.1)}
  .ticker-track{display:flex;gap:0;width:max-content;animation:marquee 34s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  .ticker-track span{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;padding:16px 26px;display:inline-flex;align-items:center;color:rgba(238,241,235,.8)}
  .ticker-track span::after{content:"✦";color:var(--gold);margin-left:26px;font-size:.7rem}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
  
  /* ---------- Section scaffolding ---------- */
  section{padding:96px 0}
  .sec-head{max-width:640px;margin-bottom:52px}
  .sec-head h2{font-size:clamp(2rem,3.8vw,2.9rem);margin-top:18px}
  .sec-head p{margin-top:16px;color:var(--muted);font-size:1.08rem}
  
  /* About */
  .about{background:var(--ink);color:var(--paper)}
  .about .eyebrow{color:var(--gold)}
  .about .eyebrow::before{background:var(--gold)}
  .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
  .about-quote{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.25;letter-spacing:-.02em;margin-top:22px}
  .about-quote em{color:var(--gold);font-style:italic}
  .about-body{margin-top:26px;color:rgba(238,241,235,.72);font-size:1.05rem;max-width:52ch}
  .about-list{list-style:none;padding:0;margin:0}
  .about-list li{padding:20px 0;border-top:1px solid rgba(238,241,235,.16)}
  .about-list li:last-child{border-bottom:1px solid rgba(238,241,235,.16)}
  .about-list .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  .about-list .v{font-family:var(--display);font-weight:600;font-size:1.25rem;margin-top:6px}
  .about-list .d{color:rgba(238,241,235,.66);font-size:.94rem;margin-top:4px}
  
  /* Team */
  .team{background:var(--paper-2)}
  .team-panel{
    display:grid;grid-template-columns:250px 1fr;gap:38px;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:22px;
    padding:32px;box-shadow:var(--shadow);max-width:840px;margin:0 auto;
  }
  .team-photo{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,var(--pine),var(--ink))}
  .team-photo img{width:100%;height:100%;object-fit:cover}
  .team-monogram{position:absolute;inset:0;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:3.6rem;color:var(--gold);letter-spacing:-.03em}
  .team-info .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}
  .team-info h3{font-size:clamp(1.5rem,2.4vw,1.85rem);margin:8px 0 12px}
  .team-info p{color:var(--muted);max-width:48ch;margin-bottom:22px}
  .team-info .btn svg{flex-shrink:0}
  
  /* Services */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .svc{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px 28px;position:relative;overflow:hidden;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
  .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong)}
  .svc .glyph{width:44px;height:44px;border-radius:11px;background:rgba(var(--emerald-rgb),.12);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--emerald);transition:transform .3s ease}
  .svc:hover .glyph{transform:rotate(-6deg) scale(1.06)}
  .svc h3{font-size:1.28rem;margin-bottom:10px}
  .svc p{color:var(--muted);font-size:.96rem;margin-bottom:16px}
  .svc ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
  .svc ul li{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--pine);background:rgba(20,73,59,.08);padding:4px 9px;border-radius:6px}
  .svc::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
  .svc:hover::after{transform:scaleX(1)}
  .svc-more{display:inline-flex;align-items:center;gap:.5em;margin-top:18px;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--emerald)}
  .svc-more .arw{transition:transform .18s ease}
  .svc:hover .svc-more .arw{transform:translate(3px,-3px)}

  /* Service detail pages (accounting / tax / advisory) */
  .svc-hero{padding:88px 0 56px;background:var(--paper-2)}
  .svc-hero .eyebrow{margin-bottom:18px}
  .svc-hero h1{font-family:"Fraunces",serif;font-weight:600;letter-spacing:-.01em;font-size:clamp(2.1rem,4.6vw,3.2rem)}
  .svc-hero .lede{margin-top:20px;color:var(--muted);font-size:1.1rem;max-width:56ch}
  .svc-hero .hero-cta{margin-top:30px}
  .svc-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .svc-cta{background:var(--ink);color:var(--paper);text-align:center;padding:88px 0}
  .svc-cta .eyebrow{color:var(--gold);justify-content:center}
  .svc-cta .eyebrow::before{background:var(--gold)}
  .svc-cta h2{color:var(--paper);font-size:clamp(1.8rem,3.4vw,2.5rem);margin-top:18px;max-width:26ch;margin-left:auto;margin-right:auto}
  .svc-cta p{color:rgba(238,241,235,.72);font-size:1.05rem;margin-top:16px;max-width:52ch;margin-left:auto;margin-right:auto}
  .svc-cta .hero-cta{justify-content:center;margin-top:32px}

  /* Approach strip */
  .approach{background:var(--ink);color:var(--paper)}
  .approach .eyebrow{color:var(--gold)}
  .approach .eyebrow::before{background:var(--gold)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(238,241,235,.16);border:1px solid rgba(238,241,235,.16);border-radius:16px;overflow:hidden;margin-top:12px}
  .step{background:var(--ink);padding:34px 28px;transition:background .25s ease}
  .step:hover{background:#123b30}
  .step .n{font-family:var(--mono);font-size:.8rem;color:var(--gold);letter-spacing:.1em}
  .step h3{font-size:1.35rem;margin:14px 0 8px}
  .step p{color:rgba(238,241,235,.7);font-size:.96rem}
  
  /* Contact */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .contact-side .eyebrow{margin-bottom:18px}
  .contact-side h2{font-size:clamp(2rem,3.6vw,2.7rem);margin-bottom:18px}
  .contact-side>p{color:var(--muted);font-size:1.06rem;max-width:40ch}
  .book{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
  .book h4{font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:6px}
  .book p{font-size:.94rem;color:var(--muted);margin-bottom:16px}
  .contact-details{margin-top:26px;list-style:none;padding:0}
  .contact-details li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:flex-start}
  .contact-details li:last-child{border-bottom:1px solid var(--line)}
  .contact-details .ic{color:var(--emerald);margin-top:2px;flex-shrink:0}
  .contact-details .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .contact-details .v{font-size:1rem;color:var(--ink);margin-top:2px}
  
  form.enquiry{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
  .field{margin-bottom:18px}
  .field label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
  .field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;transition:border-color .18s ease, box-shadow .18s ease}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(var(--emerald-rgb),.16)}
  .field textarea{resize:vertical;min-height:120px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .two > .field{min-width:0}
  .phone-row{
    display:flex;align-items:stretch;background:var(--paper);border:1px solid var(--line);
    border-radius:11px;overflow:hidden;transition:border-color .18s ease, box-shadow .18s ease;
  }
  .phone-row:focus-within{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(var(--emerald-rgb),.16)}
  .field .phone-row select,.field .phone-row input{
    border:0;border-radius:0;background:transparent;width:auto;box-shadow:none !important;
  }
  .field .phone-row select:focus,.field .phone-row input:focus{border-color:transparent}
  .phone-row select{flex:0 0 auto;max-width:96px;padding:13px 8px 13px 14px;border-right:1px solid var(--line)}
  .phone-row input{flex:1;min-width:0;padding:13px 15px 13px 10px}
  form.enquiry button{width:100%;justify-content:center;margin-top:6px}
  .hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
  .form-status{font-size:.85rem;margin-top:12px;text-align:center;min-height:1.2em}
  .form-status.is-success{color:var(--emerald)}
  .form-status.is-error{color:#B33A2A}
  .form-note{font-size:.82rem;color:var(--muted);margin-top:14px;text-align:center}
  
  /* Map */
  .map-embed{margin-top:26px;border:1px solid var(--line);border-radius:16px;overflow:hidden;line-height:0}
  .map-embed iframe{width:100%;height:230px;border:0;filter:grayscale(.2) contrast(1.02)}
  
  /* Footer */
  footer{background:var(--ink);color:var(--paper);padding:64px 0 30px}
  .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid rgba(238,241,235,.16)}
  .foot-logo{border-radius:12px;padding:12px 16px;display:inline-block}
  .foot-logo img{height:100px;width:auto}
  .foot-tag{color:rgba(238,241,235,.66);margin-top:14px;max-width:32ch;font-size:.96rem}
  .foot-cols{display:flex;gap:60px;flex-wrap:wrap}
  .foot-col h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
  .foot-col a,.foot-col p{display:block;color:rgba(238,241,235,.78);font-size:.95rem;padding:5px 0;transition:color .18s ease}
  .foot-col a:hover{color:var(--gold)}
  .socials{display:flex;gap:12px;margin-top:16px}
  .socials a{width:38px;height:38px;border:1px solid rgba(238,241,235,.24);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s}
  .socials a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
  .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;color:rgba(238,241,235,.5);font-size:.85rem}
  .foot-bottom a{color:rgba(238,241,235,.7)}
  .foot-bottom a:hover{color:var(--gold)}
  
  /* ---------- Back to top ---------- */
  .to-top{
    position:fixed;right:24px;bottom:24px;z-index:70;
    width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);
    background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;
    cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease, background .2s ease;
  }
  .to-top.show{opacity:1;pointer-events:auto;transform:none}
  .to-top:hover{background:var(--pine)}
  .to-top:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){.to-top{transition:opacity .15s linear}}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  
  /* ============================================================
     Privacy policy page
     ============================================================ */
  .legal-wrap{max-width:780px;margin:0 auto;padding:0 26px}
  .legal-hero{padding:64px 0 34px}
  .legal-hero h1{font-size:clamp(2.2rem,5vw,3.1rem);margin:14px 0 10px}
  .legal-updated{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
  .legal-main{padding-bottom:80px}
  .legal-main h2{font-size:1.3rem;margin:40px 0 10px}
  .legal-main p{margin:0 0 14px;color:#2a4038}
  .legal-main ul{margin:0 0 16px;padding-left:20px;color:#2a4038}
  .legal-main li{margin-bottom:7px}
  .legal-main a{color:var(--emerald)}
  .legal-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-top:26px}
  .legal-card p{margin-bottom:6px}
  .legal-foot{background:var(--ink);color:rgba(238,241,235,.7);font-size:.85rem;padding:30px 0}
  .legal-foot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .legal-foot a{color:rgba(238,241,235,.85)}
  .legal-foot a:hover{color:var(--gold)}
  
  /* ============================================================
     Responsive
     ============================================================ */
  
  /* Tablet / small-desktop: collapse the nav into a menu
     (6 links + phone + button need room, so collapse early) */
  @media (max-width:900px){
    .nav-links{
      position:fixed;inset:74px 0 auto 0;
      flex-direction:column;align-items:flex-start;gap:0;
      background:var(--paper);border-bottom:1px solid var(--line);
      padding:8px 26px 24px;box-shadow:var(--shadow);
      transform:translateY(-140%);transition:transform .3s ease;
    }
    .nav-links.open{transform:translateY(0)}
    .nav-links a.lnk{padding:14px 0;width:100%;border-bottom:1px solid var(--line);font-size:1.02rem}
    .nav-links a.lnk::after{display:none}
    .nav-links .btn{margin-top:14px;width:100%;justify-content:center}
    .burger{display:flex}
  }
  
  /* Stack the big two-column layouts */
  @media (max-width:940px){
    .about-grid{grid-template-columns:1fr;gap:36px}
    .svc-grid,.svc-detail-grid,.steps{grid-template-columns:1fr 1fr}
    .contact-grid{grid-template-columns:1fr;gap:40px}
  }

  /* On narrower screens "cover" crops toward the desk objects, so
     strengthen the scrim across the whole hero to keep text legible.
     Fitting the whole hero + strip in one screen isn't realistic on
     phones, so drop the 100vh lock and let it flow/scroll normally. */
  @media (max-width:760px){
    .hero{
      min-height:0;display:block;
      background:
        linear-gradient(to right, rgba(238,241,235,.98) 0%, rgba(238,241,235,.95) 70%, rgba(238,241,235,.78) 100%),
        url('images/background.png') center right / cover no-repeat;
    }
    .hero-banner{min-height:440px;padding:100px 0 44px}
    .hero-content{max-width:100%}
    .hero-strip{padding-bottom:64px}
  }

  /* Phones */
  @media (max-width:680px){
    .svc-grid,.svc-detail-grid,.steps,.quick-svc-grid{grid-template-columns:1fr}
    .two{grid-template-columns:1fr}
    section{padding:70px 0}
    .hero-banner{padding:88px 0 36px}
    .hero-strip{padding-top:32px}
    .sec-head{margin-bottom:38px}
    .team-panel{grid-template-columns:1fr;gap:22px;padding:26px;text-align:center}
    .team-photo{width:150px;margin:0 auto}
    .team-info p{margin-left:auto;margin-right:auto}
    .foot-top{gap:32px}
    .foot-cols{gap:36px}
  }
  
  /* Small phones */
  @media (max-width:400px){
    .wrap{padding:0 18px}
    .hero h1{font-size:clamp(1.6rem,7.6vw,2.1rem)}
    .foot-cols{flex-direction:column;gap:24px}
  }