/* =========================================================
   Squarenook — design tokens
   ========================================================= */
:root{
  --bg: #fdfdfd;
  --ink: #1f1f1f;
  --ink-soft: #4d4d4d;
  --grey-1: #5a5a5a;
  --grey-2: #6e6e6e;
  --line: #dedede;
  --line-soft: #e8e8e8;
  --checkbox-border: #d9d9d9;
  --panel: #f7f7f7;
  --panel-2: #f5f4f4;
  --accent: #b81744;
  --accent-tint: #f7ebee;
  --accent-tint-2: #fef8f9;
  --maroon: #4a0317;
  --maroon-text: #d39fad;
  --black-grad-from: #0b0a0a;
  --black-grad-to: #424242;

  --font-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-eyebrow: "Inria Sans", Georgia, serif;
  --font-serif-italic: "Newsreader", Georgia, serif;

  --max: 1440px;
  --pad: 130px;
  --radius: 8px;

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

@media (max-width: 900px){
  :root{ --pad: 24px; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
button{ font-family: inherit; background:none; border:none; cursor:pointer; color:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0; background:#000; color:#fff;
  padding:12px 20px; z-index:999; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =========================================================
   Type helpers
   ========================================================= */
.eyebrow{
  font-family: var(--font-eyebrow);
  font-size: 16px;
  color: var(--grey-2);
  margin: 0 0 8px;
}
.eyebrow--left{ text-align:left; }
.eyebrow--center{ text-align:center; font-size:14px; margin-bottom: 0; }

.serif-italic{
  font-family: var(--font-serif-italic);
  font-style: italic;
  font-weight: 400;
}
.serif-italic.accent{ color: var(--accent); }
.oblique{ font-style: normal; }

.h-plain{
  font-size: 36px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.h-serif{
  font-size: 36px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
}
.h-serif--center{ text-align:center; }

.body-muted{
  color: var(--grey-1);
  font-size: 14px;
  line-height: 1.7;
}
.body-muted--sm{ max-width: 815px; }

.tag{
  display:inline-flex;
  align-items:center;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--font-eyebrow);
  font-size: 14px;
  padding: 8px 10px;
  border-radius: var(--radius);
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  border-radius: var(--radius);
  font-size: 14px;
  cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
}
.btn--dark{
  padding: 8px 28px;
  color:#fff;
  background: linear-gradient(0deg, var(--black-grad-from) 0%, var(--black-grad-to) 100%);
  background-size: 100% 200%;
  background-position: bottom;
}
.btn--dark:hover{
  background-position: top;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
}
.btn--small{ padding: 5px 16px; }
.nav .btn--small{
  background: #f2edef;
  color: #1f1f1f;
}
.btn--ghost{
  padding: 8px 28px;
  background: var(--panel-2);
  color: var(--ink);
}
.btn--ghost:hover{ background: #ececec; transform: translateY(-2px); }

.back-to-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(0deg, var(--black-grad-from) 0%, var(--black-grad-to) 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 60;
}
.back-to-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }
.back-to-top:hover{ filter: brightness(1.2); }

/* =========================================================
   Layout helpers
   ========================================================= */
.section{
  max-width: var(--max);
  margin: 0 auto;
  padding: 96px var(--pad);
}
.panel{ border-radius: 0; }
.panel--grey{ background: var(--panel); padding: 48px 40px; }

@media (max-width: 700px){
  .panel--grey{ padding: 32px 20px; }
}

/* scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   Nav
   ========================================================= */
.nav{
  position: sticky;
  top:0;
  z-index: 50;
  background: rgba(253,253,253,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease);
}
.nav__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.nav__left{ display:flex; align-items:center; gap:48px; }
.nav__logo img{ height: 28px; width:auto; }
.nav__divider{ width:1px; height:24px; background:var(--line); display:block; }
.nav__links{ display:flex; align-items:center; gap:38px; color:var(--ink-soft); font-size:14px; }
.nav__links a{ position:relative; padding: 2px 0; }
.nav__links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background: var(--ink);
  transition: width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__links a:hover{ color: var(--ink); }

@media (max-width: 780px){
  .nav__links{ display:none; }
  .nav__left{ gap:16px; }
  .nav__divider{ display:none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px 0 0;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 80px;
}
.hero__intro{
  padding: 0 var(--pad);
  max-width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 24px;
  text-align:center;
}
.hero__title{
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  max-width: 900px;
}
.hero__body{
  max-width: 948px;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 700px){
  .hero__title{ font-size: 32px; }
}

/* =========================================================
   Portfolio slider
   Full-bleed, autoplay, true translating filmstrip. Every card
   is the same fixed size (a fluid match of the Figma "portfolio
   carousel" active frame, node 17:294, 1440px reference: 693x520,
   40px gap). The active card is centered by the track's transform;
   neighboring cards are simply the same-size cards peeking past
   the viewport edge, cropped by overflow — nothing ever changes
   size, only the track's translateX.
   ========================================================= */
:root{
  /* Pure viewport-relative fractions (693/1440 and 40/1440 as vw),
     deliberately uncapped so the exact Figma proportions — including
     how much of each neighbor peeks past the viewport edge — hold
     identically from 1024px through 2560px and beyond. */
  --pf-card-w: 48.125vw;
  --pf-gap: 2.778vw;
  --pf-duration: 820ms;
}
@media (max-width: 900px){
  :root{
    /* Bounded by this query's own 900px ceiling, so no extra clamp is
       needed. Slightly larger share so the active card stays dominant. */
    --pf-card-w: 58vw;
    --pf-gap: 2.2vw;
  }
}
@media (max-width: 700px){
  :root{
    /* Mobile: active card takes up most of the viewport while the
       neighbors still peek in at the edges. */
    --pf-card-w: 78vw;
    --pf-gap: 3.2vw;
  }
}

/* `.hero` lays out its children with `display:flex; align-items:center`,
   and this section's cross-axis size (width:100vw) is wider than `.hero`'s
   own (max-width-capped) box on any screen above 1440px. align-items:center
   already centers that overflow symmetrically around .hero's own center —
   which, because .hero itself is centered in the viewport, lands this
   section exactly on the true viewport edges with zero extra offset math.
   (A `left:50%; transform:translateX(-50%)` trick here would double up
   with that built-in centering and shove the whole section off-center —
   that was the earlier bug that left empty space on the right.) */
.portfolio-slider{
  position: relative;
  width: 100vw;
  overflow: hidden;
}
.portfolio-slider__viewport{
  width: 100vw;
  overflow: hidden;
}
.portfolio-slider__track{
  display:flex;
  align-items:center;
  gap: var(--pf-gap);
  /* Shrink-wraps to the sum of all (uniform-width) cards + gaps, which
     with 10 cards is always many multiples of 100vw — so the strip
     never runs out of content at either edge, at any viewport size. */
  width: max-content;
  transform: translate3d(0,0,0);
  transition: transform var(--pf-duration) var(--ease);
  will-change: transform;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.portfolio-slider__track.is-dragging{ cursor:grabbing; transition: none; }
.portfolio-slider__status{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.pf-card{
  position:relative;
  flex:none;
  width: var(--pf-card-w);
  aspect-ratio: 693 / 520;
  overflow:hidden;
}
.pf-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
  -webkit-user-drag:none;
}

@media (prefers-reduced-motion: reduce){
  .portfolio-slider__track{ transition:none; }
}

/* Trust logos */
.trust{
  width:100%;
  padding: 0 var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.trust__label{ color: var(--grey-2); font-size:14px; text-align:center; }
.logo-marquee{ width:100%; overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee__track{
  display:flex;
  align-items:center;
  gap: 20px;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.logo-marquee__item{
  width:180px; height:62px;
  display:flex; align-items:center; justify-content:center;
  padding: 0 24px;
  filter: grayscale(1) opacity(.55);
  transition: filter .3s var(--ease);
}
.logo-marquee__item:hover{ filter:none; }
.logo-marquee__item img{ width:100%; object-fit:contain; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =========================================================
   Outgrown / quiz section
   ========================================================= */
.outgrown{
  display:grid;
  grid-template-columns: 430px 1fr;
  gap: 60px;
  align-items: start;
}
.outgrown__copy{ display:flex; flex-direction:column; gap:24px; }
.outgrown__heading{ display:flex; flex-direction:column; gap:8px; }
.outgrown__status{
  background:#fff;
  border-radius: var(--radius);
  padding: 24px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.outgrown__count{ font-family: var(--font-eyebrow); font-size:16px; color: var(--grey-2); }
.outgrown__hint{ font-size:14px; line-height:1.7; color: #06810E; transition: color .3s var(--ease); }
.outgrown__hint.is-active{ color: var(--accent); }

.outgrown__list{
  background:#fff;
  border-radius: var(--radius);
  padding: 20px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.signal{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  padding: 10px 14px;
  border-radius:6px;
  border:1px solid var(--line-soft);
  background:#fff;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
}
.signal:hover{ transform: translateY(-1px); border-color:#cfcfcf; }
.signal__box{
  width:20px; height:20px;
  border-radius:3px;
  background: var(--panel);
  border: 1px solid var(--checkbox-border);
  flex-shrink:0;
  position:relative;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.signal__box::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.3l2.6 2.6L12.5 4.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size: 12px;
  opacity:0;
  transform: scale(.6);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.signal__text{ font-size:14px; color: var(--ink); line-height:1.5; }

.signal.is-selected{
  background: var(--accent-tint-2);
  border-color: var(--accent);
}
.signal.is-selected .signal__box{
  background: var(--accent);
  border-color: var(--accent);
}
.signal.is-selected .signal__box::after{ opacity:1; transform:none; }

.outgrown__result{
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 18px 14px;
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  gap: 18px;
  background: var(--panel);
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
.outgrown__result.is-active{
  max-height: 260px;
  opacity: 1;
  padding-top: 18px;
  padding-bottom: 18px;
  border: none;
  background: linear-gradient(78.5deg, #f7f7f7 63%, #f2d0d9 73%, #f499b3 86%, #f0c4d0 98%);
}
.outgrown__result-copy{ display:flex; flex-direction:column; gap:12px; }
.outgrown__result-title{ font-size:20px; color: var(--ink); }
.outgrown__result-body{ font-size:14px; line-height:1.7; color: var(--ink); max-width: 383px; }

@media (max-width: 900px){
  .outgrown{ grid-template-columns: 1fr; }
}

/* =========================================================
   Webdesign / expertise section
   ========================================================= */
.webdesign{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 40px;
  min-height: 220px;
  margin-bottom: 48px;
}
.webdesign__col{ display:flex; flex-direction:column; align-items: flex-start; gap:24px; max-width:540px; height:220px; }
.webdesign__col h2{ font-size:36px; line-height:1.2; font-weight:400; }
.webdesign__col-bottom{ display:flex; flex-direction:column; align-items: flex-start; gap:24px; justify-content:flex-end; flex:1; }

.webdesign__expertise{ display:flex; flex-direction:column; gap:18px; color: var(--grey-1); font-size:14px; }
.webdesign__expertise-label{ font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.webdesign__expertise-cols{ display:flex; gap:120px; }
.webdesign__expertise-cols li{ padding: 2.5px 0; white-space:nowrap; }

.webdesign__gallery{ display:flex; gap:20px; }
.webdesign__gallery-item{
  width: calc((100% - 40px)/3);
  aspect-ratio: 380/285;
  border-radius: 4px;
  overflow:hidden;
  background: var(--panel-2);
  transition: transform .5s var(--ease);
}
.webdesign__gallery-item:hover{ transform: translateY(-6px); }
.webdesign__gallery-item img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 900px){
  .webdesign{ flex-direction:column; align-items:flex-start; height:auto; }
  .webdesign__col{ height:auto; max-width:100%; }
  .webdesign__expertise-cols{ gap:48px; }
  .webdesign__gallery{ flex-direction:column; }
  .webdesign__gallery-item{ width:100%; }
}

/* =========================================================
   Review section
   ========================================================= */
.review{ position:relative; padding: 48px 40px; }
.review__pattern{
  position:absolute; inset:0;
  border-radius: var(--radius);
  overflow:hidden;
  z-index:0;
}
.review__pattern img{ width:100%; height:100%; object-fit:cover; }
.review__card{
  position:relative;
  z-index:1;
  background:#fff;
  border-radius: var(--radius);
  padding: 24px;
  max-width: 430px;
  display:flex;
  flex-direction:column;
  gap: 24px;
}
.review__logo{
  width: 112px;
  height: auto;
  align-self: flex-start;
}
.review__quote-title{ font-size:24px; line-height:1.33; color: var(--accent); }
.review__quote-body{ font-size:14px; line-height:1.7; color: var(--grey-2); }
.review__author-name{ font-size:14px; color: var(--ink); }
.review__author-role{ font-size:12px; color: var(--grey-2); font-family: var(--font-eyebrow); }

@media (max-width: 700px){
  .review__pattern{ position:relative; height:220px; margin-bottom: -80px; }
  .review{ padding: 32px 20px; }
  .review__card{ max-width:100%; }
}

/* =========================================================
   How we work
   ========================================================= */
.how-we-work{ display:flex; flex-direction:column; gap:36px; }
.how-we-work__body{ display:flex; flex-direction:column; gap:32px; width:100%; }
.how-we-work__top{ display:flex; flex-direction:column; align-items:center; gap:32px; width:100%; }
.how-we-work__intro{ display:flex; flex-direction:column; align-items:center; gap:12px; max-width:780px; margin: 0 auto; text-align:center; }
.how-we-work__kickoff{
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  gap:24px;
  width:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #f3e8eb;
  border-radius:14px;
  padding:24px;
}
.how-we-work__kickoff-grid{ display:flex; gap:48px; }
.how-we-work__kickoff-grid > div{ flex:1; display:flex; flex-direction:column; gap:7px; }
.how-we-work__kickoff-grid h3{ font-size:18px; font-weight:700; }

.phase-grid{ display:flex; width:100%; }
.phase-card{
  flex:1;
  min-width:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:18px;
  transition: transform .4s var(--ease);
}
.phase-card:hover{ transform: translateY(-6px); }
.phase-card h3{ font-size:24px; font-weight:700; }
.phase-card__body{ display:flex; flex-direction:column; gap:12px; padding-right:70px; box-sizing:border-box; }

.phase-step{ display:flex; align-items:center; width:100%; }
.phase-step__badge{ display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px 8px 0; border-radius:8px; flex-shrink:0; }
.phase-step__dot{ width:16px; height:16px; border-radius:50%; background:var(--accent); flex-shrink:0; display:block; }
.phase-step__label{ font-family:var(--font-eyebrow); font-size:14px; color:var(--accent); white-space:nowrap; }
.phase-step__line{ flex:1 0 0; height:1px; min-width:0; background:var(--accent); }

.how-we-work__divider{ width:100%; height:1px; background:var(--line); }

.how-we-work__footnote{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }

@media (max-width: 900px){
  .how-we-work__kickoff-grid{ flex-direction:column; gap:24px; }
  .phase-grid{ flex-direction:column; gap:32px; }
  .phase-card__body{ padding-right:0; }
  .how-we-work__footnote{ flex-direction:column; }
}

/* =========================================================
   Case studies
   ========================================================= */
.case-studies{ display:flex; flex-direction:column; gap:36px; }
.case-studies__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.case-studies__head h2{ font-size:36px; line-height:1.2; font-weight:400; max-width:690px; }
.case-studies__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; row-gap: 48px; }
.case-card{ display:flex; flex-direction:column; gap:24px; }
.case-card__img{ aspect-ratio: 580/435; border-radius:4px; overflow:hidden; background:var(--panel-2); }
.case-card__img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.case-card:hover .case-card__img img{ transform: scale(1.04); }
.case-card__eyebrow{ font-weight:700; font-size:18px; }
.case-card__title{ font-size:24px; line-height:1.33; }

@media (max-width: 900px){
  .case-studies__head{ flex-direction:column; align-items:flex-start; }
  .case-studies__grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:flex; justify-content:space-between; gap:40px; }
.faq__title{ font-size:48px; line-height:1.1; flex-shrink:0; }
.faq__list{ display:flex; flex-direction:column; gap:20px; max-width:680px; width:100%; }
.faq__item{ border-bottom:1px solid var(--line); padding-bottom:20px; }
.faq__item:last-child{ border-bottom:none; padding-bottom:0; }
.faq__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 14px;
  font-size:18px;
  color: var(--ink);
  text-align:left;
}
.faq__icon{ flex-shrink:0; transition: transform .35s var(--ease); color: var(--ink); }
.faq__item.is-open .faq__icon{ transform: scaleY(-1); }
.faq__a{
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease), opacity .3s var(--ease);
  opacity:0;
  padding: 0 14px;
}
.faq__a > p{ overflow:hidden; font-size:14px; line-height:1.7; color: var(--grey-2); }
.faq__a{ overflow:hidden; }
.faq__item.is-open .faq__a{ grid-template-rows: 1fr; opacity:1; margin-top:8px; }
.faq__a > *{ min-height:0; }

@media (max-width: 900px){
  .faq{ flex-direction:column; gap:24px; }
  .faq__title{ font-size:36px; }
}

/* =========================================================
   Book a call CTA
   ========================================================= */
.book-call{ display:flex; gap:60px; }
.book-call__left{ display:flex; flex-direction:column; gap:84px; width:430px; flex-shrink:0; }
.book-call__intro{ display:flex; flex-direction:column; gap:32px; align-items:flex-start; }
.book-call__intro h2{ font-size:36px; font-weight:400; line-height:1.2; }
.book-call__expect{
  background:#fff;
  border-radius: var(--radius);
  padding: 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.book-call__expect-title{ font-family: var(--font-eyebrow); font-size:16px; }
.book-call__checklist{ display:flex; flex-direction:column; gap:8px; }
.book-call__checklist li{ display:flex; align-items:center; gap:6px; font-size:14px; color: var(--accent); }

.book-call__img{ flex:1; align-self:flex-start; aspect-ratio: 610 / 475; border-radius: var(--radius); overflow:hidden; background: #d9d9d9; }
.book-call__img img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 900px){
  .book-call{ flex-direction:column; gap:32px; }
  .book-call__left{ width:100%; }
  .book-call__img{ align-self:stretch; aspect-ratio: 16 / 10; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer{ background: var(--maroon); color:#fff; padding: 120px var(--pad); }
.footer__inner{ max-width: var(--max); margin:0 auto; display:flex; gap:85px; align-items:center; }
.footer__copyright{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--maroon-text);
  font-family: var(--font-eyebrow);
  font-size:16px;
  white-space:nowrap;
}
.footer__cols{ display:flex; gap:211px; align-items:flex-start; flex-wrap:wrap; }
.footer__brand{ font-weight:700; font-size:64px; line-height:1.05; }
.footer__menu, .footer__contact{ display:flex; flex-direction:column; gap:32px; }
.footer__label{ color: var(--maroon-text); font-family: var(--font-eyebrow); font-size:16px; }
.footer__menu nav{ display:flex; flex-direction:column; gap:24px; font-size:14px; }
.footer__menu nav a{ transition: color .25s var(--ease); }
.footer__menu nav a:hover{ color: var(--maroon-text); }
.footer__contact a{ font-size:32px; transition: color .25s var(--ease); }
.footer__contact a:hover{ color: var(--maroon-text); }

@media (max-width: 900px){
  .footer{ padding: 72px 24px; }
  .footer__inner{ flex-direction:column; align-items:flex-start; gap:40px; }
  .footer__copyright{ writing-mode: horizontal-tb; transform:none; }
  .footer__cols{ gap:48px; }
  .footer__brand{ font-size:44px; }
  .footer__contact a{ font-size:22px; word-break:break-all; }
}