/* ==========================================================================
   Design2Permit
   style.css

   1.  Design tokens
   2.  Reset and base type
   3.  Layout helpers
   4.  Buttons, links, focus
   5.  Wordmark
   6.  Header and navigation
   7.  Hero
   8.  Section headings
   9.  Our Work (image + service + actions)
   10. About (dark band)
   11. Contact (image left, actions right)
   12. Footer
   13. Motion (reveal + thin-line draw)
   14. Responsive refinements
   ========================================================================== */


/* ============================= 1. DESIGN TOKENS ========================== */
:root{
  /* Colour — measured contrast against --ivory unless noted.
     --bronze is 2.75:1 on ivory, so it is used for rules, fills and decoration only,
     never for small text. --walnut (4.72:1) carries small technical labels. */
  --charcoal:#17191B;
  --charcoal-2:#202326;
  --ivory:#F5F1E9;
  --white:#FFFFFF;
  --bronze:#B68A5A;          /* accents: rules, button hover fills, hairlines */
  --bronze-light:#C9A47C;    /* 7.63:1 on charcoal — dark surfaces only */
  --walnut:#8C6246;          /* 4.72:1 on ivory — small labels, numbers */

  --text:#252525;            /* 13.61:1 on ivory */
  --text-2:#6B6760;          /* 4.99:1 on ivory */
  --text-2-on-white:#77736D; /* 4.71:1 on white */

  --on-dark:#F5F1E9;         /* 15.65:1 on charcoal */
  --on-dark-2:#9C968D;       /* 6.01:1 on charcoal */

  --line:#E5E1D9;            /* block separation only */
  --line-strong:#8A8272;     /* 3.38:1 on ivory — borders */
  --line-on-dark:rgba(245,241,233,.16);

  /* Type */
  --font-display:"Manrope","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Playfair Display","Cormorant Garamond",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --fs-xs:.8125rem;
  --fs-sm:.875rem;
  --fs-base:1.0625rem;
  --fs-md:clamp(1.0625rem,1.4vw,1.1875rem);
  --fs-lg:clamp(1.125rem,1.6vw,1.25rem);
  --fs-card:clamp(1.15rem,1.6vw,1.4rem);
  --fs-heading:clamp(1.9rem,4vw,3rem);
  --fs-hero:clamp(2.5rem,7vw,5rem);

  /* Space */
  --page:80rem;
  --pad:clamp(1.25rem,4.5vw,3.5rem);
  --sp-section:clamp(3.5rem,7vw,6.5rem);
  --header-h:4.75rem;

  /* Accent */
  --accent:#956C50;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}


/* ============================ 2. RESET AND BASE ========================== */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 1.25rem);
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto;}
svg{display:block;}
ul{margin:0;padding:0;list-style:none;}
p{margin:0 0 1rem 0;}

h1,h2,h3{
  margin:0 0 1rem 0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  text-wrap:balance;
}

a{color:inherit;}

[hidden]{display:none !important;}

.mono{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.4;
}


/* ============================ 3. LAYOUT HELPERS ========================== */
.container{
  width:100%;
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{padding-block:var(--sp-section);}

.section--dark{
  background:var(--charcoal);
  color:var(--on-dark);
}


/* ======================= 4. BUTTONS, LINKS, FOCUS ======================== */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--charcoal);
  outline-offset:3px;
  border-radius:2px;
}
.section--dark :where(a,button,input,select,textarea,[tabindex]):focus-visible,
.site-footer :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline-color:var(--bronze-light);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--charcoal);
  color:var(--on-dark);
  padding:.75rem 1.25rem;
  font-family:var(--font-display);
  font-weight:600;
  text-decoration:none;
}
.skip-link:focus{left:1rem;top:1rem;}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:2.875rem;
  padding:.75rem 1.5rem;
  border:1px solid transparent;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), opacity .25s var(--ease),
             transform .25s var(--ease);
}
.btn--primary{
  background:var(--charcoal);
  border-color:var(--charcoal);
  color:var(--on-dark);            /* 15.65:1 */
}
.btn--primary:hover{
  background:var(--bronze);
  border-color:var(--bronze);
  color:var(--charcoal);           /* 5.68:1 */
}
.btn--ghost{
  background:transparent;
  border-color:var(--charcoal);
  color:var(--charcoal);
}
.btn--ghost:hover{
  background:var(--charcoal);
  color:var(--on-dark);
}
.btn--sm{
  min-height:2.5rem;
  padding:.45rem 1.05rem;
  font-size:var(--fs-sm);
}
.btn--lg{
  min-height:3.25rem;
  padding:.9rem 1.75rem;
  font-size:var(--fs-base);
}
.btn.is-disabled,
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .btn--primary:not(.is-disabled):hover{transform:translateY(-1px);}
}


/* =============================== 5. WORDMARK ============================ */
.wordmark{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem,2.6vw,1.5rem);
  letter-spacing:-.035em;
  line-height:1;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.wordmark__num{
  color:var(--walnut);
  font-weight:800;
  padding-inline:.04em;
}
.wordmark--footer{
  font-size:clamp(1.75rem,4vw,2.5rem);
  letter-spacing:-.03em;
}
.site-footer .wordmark__num{color:var(--bronze-light);}


/* ========================= 6. HEADER / NAVIGATION ======================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(245,241,233,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{
  border-bottom-color:var(--line-strong);
  box-shadow:0 6px 18px -14px rgba(23,25,27,.55);
}

.site-header__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 1.5rem;
  min-height:var(--header-h);
  padding-block:.75rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:var(--charcoal);
}
.brand .wordmark{font-size:clamp(1.4rem,3.4vw,1.75rem);}

/* Mobile menu button */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:2.75rem;
  padding:.5rem .25rem;
  background:none;
  border:0;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--charcoal);
  cursor:pointer;
}
.nav-toggle__icon{display:inline-flex;flex-direction:column;gap:5px;width:1.5rem;}
.nav-toggle__icon span{
  display:block;
  height:1.5px;
  width:100%;
  background:currentColor;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child{transform:translateY(3.25px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

/* Nav — mobile first: an in-flow panel, so it never covers page content */
.nav{
  flex:1 1 100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.25rem;
  max-height:calc(100vh - var(--header-h) - 1rem);
  overflow-y:auto;
  padding-bottom:.5rem;
}
.js .nav{display:none;}
.js .nav.is-open{display:flex;}

.nav__list{display:flex;flex-direction:column;}
.nav__link{
  display:block;
  padding:.85rem 0;
  min-height:2.75rem;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  font-weight:600;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.nav__link:hover{color:var(--walnut);}
.nav__cta{margin-top:1rem;}
.nav__link[aria-current="true"]{color:var(--walnut);}


/* ================================ 7. HERO =============================== */
.hero{
  position:relative;
  width:100%;
  height:78vh;
  min-height:52rem;
  max-height:90rem;
  overflow:hidden;
  background:#F5F1E9;
}

.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  background-image:url("hero.jpeg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  will-change:transform;
}

/* Left-side off-white overlay that fades into the photo; right side stays clear. */
.hero__gradient{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to right,
    rgba(245,241,233,0.96) 0%,
    rgba(245,241,233,0.78) 22%,
    rgba(245,241,233,0.45) 42%,
    rgba(245,241,233,0.12) 62%,
    transparent 80%,
    transparent 100%
  );
  pointer-events:none;
  will-change:transform;
}

.hero__content{
  position:relative;
  z-index:2;
  padding-left:5%;
  max-width:420px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  will-change:transform;
}

.hero__title{
  font-family:var(--font-serif);
  font-size:clamp(44px,7vw,56px);
  font-weight:400;
  line-height:1.05;
  color:#222222;
  letter-spacing:-0.02em;
  margin:0 0 1rem 0;
}

.hero__emphasis{
  font-style:italic;
  color:var(--accent);
}

.hero__subtitle{
  font-family:var(--font-body);
  font-size:17px;
  font-weight:400;
  letter-spacing:0.3px;
  line-height:1.5;
  color:#333333;
  margin:0 0 1.25rem 0;
}

.hero__divider{
  width:40px;
  height:1px;
  background:var(--accent);
  border:none;
  margin:0 0 1.5rem 0;
}

.hero__desc{
  font-size:clamp(14px,1.3vw,14px);
  line-height:1.5;
  color:#000;
  max-width:390px;
  margin:0 0 1.75rem 0;
}


.hero__closing{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:500;
  color:var(--accent);
  margin:0 0 2rem 0;
}

.hero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:0 1.75rem;
  background:#222222;
  border:1px solid #222222;
  color:#FFFFFF;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.hero__btn:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#FFFFFF;
}

/* Desktop: full viewport-height hero */
@media (min-width:64rem){
  .hero{height:78vh;min-height:52rem;max-height:90rem;}
  .hero__content{padding-left:5%;}
  .hero__title{font-size:clamp(52px,8vw,60px);}
}

/* Tablet */
@media (min-width:48rem) and (max-width:63.99rem){
  .hero{height:65vh;min-height:42rem;}
  .hero__content{padding-left:5%;padding-right:4%;}
  .hero__title{font-size:clamp(40px,6vw,52px);}
}

/* Mobile: keep image behind, stronger readable overlay on left, centered text block */
@media (max-width:47.99rem){
  .hero{
    height:auto;
    min-height:44vh;
    padding-block:clamp(3rem,9vw,6rem);
    background:#F5F1E9;
  }
  .hero__bg{background-position:center;}
  .hero__gradient{
    background:linear-gradient(
      to right,
      rgba(245,241,233,0.97) 0%,
      rgba(245,241,233,0.80) 35%,
      transparent 70%,
      transparent 100%
    );
  }
  .hero__content{
    padding-left:5%;
    padding-right:5%;
    max-width:none;
    height:auto;
    justify-content:flex-start;
    padding-top:clamp(2rem,6vw,3rem);
    padding-bottom:clamp(3rem,9vw,5rem);
  }
  .hero__title{font-size:clamp(34px,9vw,44px);line-height:1.12;}
  .hero__desc{max-width:none;}
}

@media (prefers-reduced-motion:no-preference){
  .hero__title,
  .hero__subtitle,
  .hero__divider,
  .hero__desc,
  .hero__closing,
  .hero__btn{animation:rise .8s both var(--ease);}
  .hero__title{animation-delay:.12s;}
  .hero__subtitle{animation-delay:.2s;}
  .hero__divider{animation-delay:.28s;}
  .hero__desc{animation-delay:.36s;}
  .hero__closing{animation-delay:.44s;}
  .hero__btn{animation-delay:.52s;}
}


/* ========================== 8. SECTION HEADINGS ========================== */
.section__head{
  display:grid;
  gap:1rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}

.section__title{
  
  font-size:var(--fs-heading);
  font-weight:700;
  max-width:18ch;
}

.section__intro{
  color:var(--text-2);
  font-size:var(--fs-md);
  max-width:52ch;
}


/* ========================= 9. OUR WORK ==================================
   Alternating editorial rows: on wide screens each project is a two-column
   row — the image fills exactly one half and the content sits in the other,
   flipping sides on every second project. On phones the row stacks, image
   first, with a single comfortable column of text.
   ======================================================================== */
.work-list{
  display:grid;
  gap:clamp(2.25rem,5vw,4rem);
}

.work{
  padding-top:clamp(2.25rem,5vw,4rem);
  border-top:1px solid var(--line);
  min-width:0;
}
.work:first-child{
  padding-top:0;
  border-top:0;
}

.work__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.25rem,4vw,3.5rem);
  align-items:center;
}

.work__media{
  margin:0;
  background:var(--white);
  overflow:hidden;
}
.work__media img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .7s var(--ease);
}
.work:hover .work__media img,
.work:focus-within .work__media img{transform:scale(1.025);}

.work__body{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  max-width:34rem;
}

.work__meta{color:var(--walnut);}

.work__title{
  font-size:var(--fs-card);
  font-weight:700;
  line-height:1.2;
}

.work__desc{
  font-size:clamp(.9375rem,2.4vw,1rem);
  color:var(--text-2);
  max-width:42ch;
}

.work__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.5rem;
}

@media (min-width:64rem){
  .work__grid{grid-template-columns:1fr 1fr;}
  .work--flip .work__media{order:2;}
  .work--flip .work__body{order:1;}
}


/* ========================== 10. ABOUT (DARK BAND) ======================= */
.about{
  display:grid;
  gap:clamp(2rem,5vw,3.5rem);
}

.about__eyebrow{color:var(--bronze-light);margin-bottom:1rem;}

.about__title{max-width:16ch;}

.about__body{
  margin-top:clamp(1rem,2.5vw,1.5rem);
  max-width:46ch;
  color:var(--on-dark-2);
  font-size:var(--fs-md);
}

.about__points{
  display:grid;
  gap:clamp(1.5rem,3vw,2rem);
}

.about__point{
  padding-top:1.25rem;
  border-top:1px solid var(--line-on-dark);
}

.about__no{
  display:block;
  color:var(--bronze-light);
  margin-bottom:.75rem;
}

.about__point-title{
  font-size:var(--fs-lg);
  font-weight:600;
  color:var(--on-dark);
}

.about__point-text{
  margin-top:.5rem;
  color:var(--on-dark-2);
  font-size:var(--fs-sm);
  max-width:34ch;
}

.rule-draw{
  display:block;
  grid-column:1 / -1;
  height:1px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .8s var(--ease);
}
.rule-draw.is-drawn{transform:scaleX(1);}


/* ============= 11. CONTACT (image left, actions right) ================= */
.contact__block{
  display:grid;
  grid-template-columns:1fr;
  background:var(--white);
  border:1px solid var(--line);
  overflow:hidden;
}

.contact__media{
  margin:0;
  background:var(--charcoal);
}
.contact__media img{
  width:100%;
  height:100%;
  aspect-ratio:16 / 11;
  object-fit:cover;
  object-position:center;
}

.contact__panel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  padding:clamp(1.5rem,4vw,3.25rem);
}

.contact__eyebrow{color:var(--walnut);}

.contact__panel .section__title{max-width:16ch;}

.contact__lede{
  max-width:44ch;
  color:var(--text-2-on-white);
  font-size:var(--fs-md);
}

.contact__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:.5rem;
}

.contact__note{
  font-size:var(--fs-sm);
  color:var(--text-2-on-white);
  max-width:48ch;
  padding-left:.9rem;
  border-left:2px solid var(--bronze);
}

.channel-notice{
  font-size:var(--fs-sm);
  color:var(--text-2-on-white);
  max-width:48ch;
  padding-left:.9rem;
  border-left:2px solid var(--line-strong);
}

.contact__direct{
  display:grid;
  gap:.75rem;
  width:100%;
  margin-top:clamp(.5rem,2vw,1.25rem);
  padding-top:clamp(1rem,3vw,1.75rem);
  border-top:1px solid var(--line);
}
.contact__direct-label{color:var(--text-2-on-white);}

.contact__list{border-top:1px solid var(--line);}
.contact__item{border-bottom:1px solid var(--line);}

.contact__link{
  display:grid;
  grid-template-columns:5.5rem 1fr;
  gap:.35rem 1rem;
  align-items:baseline;
  padding:.85rem 0;
  min-height:2.75rem;
  text-decoration:none;
  transition:color .2s var(--ease);
}
.contact__link:hover{color:var(--walnut);}
.contact__label{color:var(--text-2-on-white);}
.contact__value{
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--fs-base);
  overflow-wrap:anywhere;
}

.contact__pending{
  font-size:var(--fs-sm);
  color:var(--text-2-on-white);
}


/* ============================== 12. FOOTER ============================== */
.site-footer{
  background:var(--charcoal);
  color:var(--on-dark);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.site-footer__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.75rem,4vw,3rem);
}
.wordmark--footer{
  color:var(--on-dark);
  text-decoration:none;
  line-height:1;
}
.site-footer__desc{
  margin-top:1rem;
  max-width:38ch;
  color:var(--on-dark-2);
  font-size:var(--fs-sm);
}
.site-footer__nav ul{display:grid;gap:.5rem;}
.site-footer__nav a,
.site-footer__contact a{
  display:inline-block;
  padding:.35rem 0;
  min-height:1.75rem;
  text-decoration:none;
  color:var(--on-dark);
  transition:color .2s var(--ease);
}
.site-footer__nav a:hover,
.site-footer__contact a:hover{color:var(--bronze-light);}

.site-footer__contact{display:grid;gap:.25rem;justify-items:start;}
.site-footer__contact a{overflow-wrap:anywhere;}

.site-footer__meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-on-dark);
  font-size:var(--fs-sm);
  color:var(--on-dark-2);
}
.site-footer__meta .mono{color:var(--bronze-light);}


/* ===================== 13. MOTION (reveal + line draw) ================= */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible{opacity:1;transform:none;}

@keyframes rise{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .rule-draw{transform:scaleX(1);transition:none;}
  .work__media img{transition:none;}
  .work:hover .work__media img,
  .work:focus-within .work__media img{transform:none;}
  .btn--primary:hover{transform:none;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}


/* ===================== 14. RESPONSIVE REFINEMENTS ====================== */
@media (min-width:37.5rem){                 /* 600px and up */
  .about__points{grid-template-columns:repeat(2,minmax(0,1fr));}

  .site-footer__inner{grid-template-columns:1.4fr 1fr;}
  .site-footer__meta{grid-column:1 / -1;}
}

@media (min-width:64rem){                    /* 1024px and up */
  :root{--header-h:5rem;}

  .site-header__inner{flex-wrap:nowrap;}

  .nav-toggle{display:none;}
  .js .nav,
  .nav{
    display:flex;
    flex:0 1 auto;
    flex-direction:row;
    align-items:center;
    gap:clamp(1.25rem,2.4vw,2.25rem);
    max-height:none;
    overflow:visible;
    padding-bottom:0;
  }
  .nav__list{flex-direction:row;align-items:center;gap:clamp(1.25rem,2.4vw,2.25rem);}
  .nav__link{
    border-bottom:1px solid transparent;
    padding:.4rem 0;
    min-height:0;
    font-size:var(--fs-base);
    font-weight:500;
  }
  .nav__link:hover,
  .nav__link[aria-current="true"]{
    color:var(--charcoal);
    border-bottom-color:var(--bronze);
  }
  .nav__cta{margin-top:0;}

  .section__head{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
    gap:clamp(1.5rem,4vw,3.5rem);
  }

  /* Alternating half-and-half rows are defined with the .work rules above */

  .about{
    grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
    align-items:start;
  }
  .about__points{grid-template-columns:1fr;gap:1.5rem;}

  /* Image left, actions right */
  .contact__block{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
  .contact__media{height:100%;}
  .contact__media img{aspect-ratio:auto;height:100%;min-height:100%;}

  .site-footer__inner{grid-template-columns:1.5fr 1fr 1fr;}
  .site-footer__meta{grid-column:1 / -1;}
}

@media (min-width:90rem){                    /* 1440px and up */
  :root{--fs-hero:clamp(3rem,4.8vw,4.75rem);}
}



.kaberoun{
  font-size:clamp(16px,1.3vw,16px);
}