/* The Kabob Guy — one-page site.
   Colours, type, spacing and motion come from tokens.css (the design system).
   Layout follows the approved homepage comp. */

:root{
  --header-h:104px;
  --slant:clamp(24px,4vw,52px);
  --slant-half:calc(var(--slant) / 2);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + 40px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream-100);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--text-heading)}
:focus-visible{outline:var(--bw-strong) solid var(--focus-ring);outline-offset:2px}

.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}
.nowrap{white-space:nowrap}
.icon{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.script{display:block;font-family:var(--font-script);font-size:var(--fs-script);font-weight:400;line-height:1.1;letter-spacing:0;text-transform:none}
.rule{display:block;width:64px;height:var(--bw-heavy);margin:var(--sp-4) auto 0;background:var(--gold-500)}

.skip-link{position:absolute;left:var(--sp-4);top:-100px;z-index:100;padding:var(--sp-2) var(--sp-4);background:var(--gold-500);color:var(--char-900);font-family:var(--font-condensed);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase}
.skip-link:focus{top:var(--sp-4)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:12px 22px;border:var(--bw-strong) solid transparent;border-radius:var(--r-sm);font-family:var(--font-condensed);font-size:var(--fs-small);font-weight:var(--fw-semibold);line-height:1.15;letter-spacing:var(--ls-caps);text-align:center;text-transform:uppercase;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:15px 30px;font-size:var(--fs-body)}
.btn--gold{background:var(--gold-500);border-color:var(--gold-500);color:var(--char-900)}
.btn--gold:hover{background:var(--gold-400);border-color:var(--gold-400)}
.btn--gold:active{background:var(--gold-600);border-color:var(--gold-600)}
.btn--dark{background:var(--char-900);border-color:var(--char-900);color:var(--cream-100)}
.btn--dark:hover{background:var(--char-700);border-color:var(--char-700)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--char-900)}
.site-header__inner{position:relative;display:flex;align-items:center;gap:var(--sp-6);height:var(--header-h)}
/* The mark sits near the top of the bar and hangs over its bottom edge */
.brand{position:relative;z-index:1;flex:0 0 auto;align-self:flex-start;margin-top:12px}
.brand img{width:160px;filter:drop-shadow(0 4px 8px rgba(16,17,16,.35))}
.site-nav{flex:1;display:flex;justify-content:center}
.site-nav ul{display:flex;gap:clamp(var(--sp-5),2.6vw,var(--sp-7));margin:0;padding:0;list-style:none}
.site-nav a{display:block;padding:6px 0;border-bottom:2px solid transparent;color:var(--cream-100);font-family:var(--font-condensed);font-size:var(--fs-small);font-weight:var(--fw-medium);letter-spacing:var(--ls-caps);text-transform:uppercase;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.site-nav a:hover{color:var(--gold-500)}
.site-nav a[aria-current]{color:var(--gold-500);border-bottom-color:var(--gold-500)}
.nav-toggle{display:none}

@media (max-width:960px){
  :root{--header-h:80px}
  .site-header__inner{gap:var(--sp-3)}
  .brand{margin-top:8px}
  .brand img{width:120px}
  .header-order{margin-left:auto;padding:10px 14px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:var(--bw-strong) solid var(--char-600);border-radius:var(--r-sm);color:var(--cream-100);font-size:24px;cursor:pointer}
  .nav-toggle .icon-close,.nav-toggle[aria-expanded="true"] .icon-open{display:none}
  .nav-toggle[aria-expanded="true"] .icon-close{display:block}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--char-900);border-top:1px solid var(--char-700)}
  .nav-open .site-nav{display:block}
  /* top padding clears the logo that hangs below the bar */
  .site-nav ul{flex-direction:column;gap:0;padding:var(--sp-7) var(--gutter) var(--sp-5)}
  .site-nav a{padding:14px 0;border-bottom:1px solid var(--char-700);font-size:var(--fs-body)}
  .site-nav a[aria-current]{border-bottom-color:var(--char-700)}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(560px,62vw,820px);background:var(--char-900);color:var(--cream-100);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slant)),0 100%)}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(16,17,16,.9) 0%,rgba(16,17,16,.55) 32%,rgba(16,17,16,0) 64%),
  linear-gradient(to right,rgba(16,17,16,.7) 0%,rgba(16,17,16,0) 55%)}
.hero__content{width:100%;padding-block:var(--sp-9) calc(var(--sp-8) + var(--slant))}
.hero h1{margin:0 0 var(--sp-6);color:var(--gold-500);font-size:clamp(2.5rem,7.5vw,6.25rem)}
/* Below 375px the 3.25rem floor made "MEDITERRANEAN" wider than the screen (the hero's
   clip-path hid the overflow instead of showing it as page scroll) */
@media (min-width:375px){.hero h1{font-size:clamp(3.25rem,7.5vw,6.25rem)}}
.hero__light{color:var(--cream-100)}

/* Phones: the wrap is too busy to set type on, so the photo shows up top
   and the copy sits on a near-solid scrim below it. */
@media (max-width:640px){
  .hero{min-height:620px}
  .hero__media img{object-position:72% 40%}
  .hero__media::after{background:linear-gradient(to top,rgba(16,17,16,.96) 0%,rgba(16,17,16,.9) 42%,rgba(16,17,16,0) 72%)}
}

/* ---------- Welcome ---------- */
.welcome{padding-block:var(--sp-8) calc(var(--sp-9) + var(--slant-half));text-align:center}
.welcome .script{color:var(--char-900)}
.welcome h2{font-size:clamp(3rem,7vw,5.25rem)}
.welcome__intro{max-width:44ch;margin:var(--sp-5) auto 0;font-size:1.0625rem;text-wrap:balance}

/* Flex so a short last row centres instead of hugging the left */
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6) var(--sp-7);margin:var(--sp-7) 0 0;padding:0;list-style:none}
.feature{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);width:140px;color:var(--char-900)}
.feature__ring{display:grid;place-items:center;width:64px;height:64px;border:var(--bw-strong) solid currentColor;border-radius:var(--r-pill);font-size:28px}
.feature__label{max-width:13ch;font-family:var(--font-condensed);font-size:var(--fs-label);font-weight:var(--fw-bold);line-height:1.35;letter-spacing:var(--ls-label);text-transform:uppercase}

@media (max-width:900px){
  .features{gap:var(--sp-6) var(--sp-5)}
  .feature{width:120px}
}

/* Brush bar: the torn brush-stroke band from the comp. Used once. */
.brush-bar{display:flex;align-items:center;justify-content:space-evenly;gap:var(--sp-6);max-width:980px;margin:var(--sp-8) auto 0;padding:var(--sp-6) var(--sp-8);background:var(--char-900);color:var(--gold-500);
  clip-path:polygon(3.0% 5.2%,7.7% 3.5%,12.4% 8.5%,17.1% 2.7%,21.8% 7.4%,26.5% 5.7%,31.2% 2.6%,35.9% 7.1%,40.6% 2.4%,45.3% 6.3%,50.0% 2.7%,54.7% 2.9%,59.4% 6.2%,64.1% 10.3%,68.8% 3.2%,73.5% 4.2%,78.2% 8.3%,82.9% 11.5%,87.6% 7.8%,92.3% 6.0%,97.0% 11.8%,97.3% 8.3%,97.6% 16.7%,98.0% 25.0%,95.9% 33.3%,97.5% 41.7%,96.3% 50.0%,99.5% 58.3%,96.0% 66.7%,98.8% 75.0%,97.1% 83.3%,98.2% 91.7%,97.0% 93.5%,92.3% 88.6%,87.6% 88.6%,82.9% 90.1%,78.2% 94.8%,73.5% 92.3%,68.8% 91.1%,64.1% 93.9%,59.4% 92.5%,54.7% 91.0%,50.0% 95.9%,45.3% 95.0%,40.6% 90.4%,35.9% 93.7%,31.2% 93.3%,26.5% 96.8%,21.8% 95.3%,17.1% 90.9%,12.4% 97.8%,7.7% 89.2%,3.0% 92.2%,2.1% 91.7%,2.4% 83.3%,1.4% 75.0%,2.1% 66.7%,1.9% 58.3%,3.9% 50.0%,1.6% 41.7%,4.2% 33.3%,0.9% 25.0%,3.7% 16.7%,1.7% 8.3%)}
.brush-bar__link{display:flex;align-items:center;gap:var(--sp-4);color:var(--gold-500);font-family:var(--font-condensed);font-size:1.0625rem;font-weight:var(--fw-bold);line-height:1.2;letter-spacing:var(--ls-caps);text-align:left;text-transform:uppercase;transition:color var(--dur-fast) var(--ease-out)}
.brush-bar__link:hover{color:var(--cream-100)}
.brush-bar__link .icon{font-size:48px;stroke-width:1.5}
.brush-bar__divider{align-self:stretch;width:1px;margin-block:var(--sp-2);background:rgba(244,236,227,.35)}

@media (max-width:760px){
  .brush-bar{flex-direction:column;padding:var(--sp-7) var(--sp-6)}
  .brush-bar__divider{align-self:center;width:64px;height:1px;margin:0}
  /* Full-width button on one line once the band stacks */
  .brush-bar .btn{align-self:stretch;margin:auto;padding-block:14px}
  .brush-bar .btn br{display:none}
}

/* ---------- Shared section parts ---------- */
.section{padding-block:var(--section-y)}
.section-head{text-align:center}
.section-head h2{font-size:var(--fs-display-l)}
.section-intro{max-width:48ch;margin:var(--sp-6) auto 0;font-size:var(--fs-lead);text-align:center;text-wrap:balance}
.eyebrow{display:block;font-family:var(--font-condensed);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--ls-label);text-transform:uppercase}

/* Angled top edge. Every edge that meets black slants, and edges between light grounds stay
   straight. All slants rise to the right at the same --slant, like the hero's bottom edge.
   The section tucks up under the one above by --slant, so the clipped corner shows that section
   behind it, and position:relative keeps it painting on top. The slant's space is split evenly:
   the slanted section adds half a slant (--slant-half) to its top padding, and the section above
   it adds half to its bottom padding. That way the space measured at the middle of the edge
   equals the normal padding on both sides. Keep links and buttons out of the top --slant band,
   since clip-path cuts off anything that pokes past it. */
.slant-top{position:relative;margin-top:calc(var(--slant) * -1);clip-path:polygon(0 var(--slant),100% 0,100% 100%,0 100%)}

@media (max-width:640px){
  :root{--section-y:var(--sp-8)}
}

/* ---------- Menu: Our signature dishes (black) ---------- */
.menu{padding-block:calc(var(--section-y) + var(--slant-half));background:var(--char-900);color:var(--cream-100)}
.menu .script{color:var(--gold-500)}
.menu h2{color:var(--cream-100)}

.dish-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin:var(--sp-7) 0 0;padding:0;list-style:none}
.dish-card{display:flex;flex-direction:column;overflow:hidden;background:var(--char-800);border:1px solid var(--char-700);border-radius:var(--r-md)}
/* The whole photo at its own shape, never cropped or zoomed (client request) */
.dish-card img{width:100%;height:auto;aspect-ratio:960 / 536}
.dish-card__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5)}
.dish-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.dish-card h3{color:var(--cream-100);font-family:var(--font-condensed);font-size:var(--fs-title);font-weight:var(--fw-semibold);line-height:var(--lh-title);letter-spacing:var(--ls-caps)}
.price{flex:0 0 auto;padding:4px 10px;background:var(--gold-500);color:var(--char-900);font-family:var(--font-display);font-size:1.125rem;line-height:1.2;letter-spacing:.02em}
.dish-card p{color:var(--cream-300);font-size:var(--fs-small)}

.oils{display:flex;align-items:center;gap:var(--sp-5) var(--sp-6);margin-top:var(--sp-8);padding:var(--sp-6);border:var(--bw-strong) solid var(--gold-500);border-radius:var(--r-md)}
.oils__ring{display:grid;place-items:center;flex:0 0 auto;width:64px;height:64px;border:var(--bw-strong) solid var(--gold-500);border-radius:var(--r-pill);color:var(--gold-500);font-size:28px}
.oils .eyebrow{color:var(--gold-500)}
.oils__line{margin-top:6px;font-family:var(--font-display);font-size:clamp(1.375rem,3vw,1.875rem);line-height:1.1;text-transform:uppercase}
.oils__note{margin-top:var(--sp-2);color:var(--cream-300);font-size:var(--fs-small)}

@media (max-width:960px){
  .dish-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .oils{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .dish-grid{grid-template-columns:1fr}
}

/* ---------- Catering (gold, contact details only) ---------- */
.catering{padding-top:calc(var(--section-y) + var(--slant-half));background:var(--gold-500);color:var(--char-900)}
.catering .script{color:var(--char-900)}
.catering .rule{background:var(--char-900)}

.catering-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);margin-top:var(--sp-7);overflow:hidden;background:var(--char-900);color:var(--cream-100);border-radius:var(--r-md);box-shadow:var(--shadow-raised)}
.catering-panel__call{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3);padding:var(--sp-7)}
.catering-panel__call .eyebrow{color:var(--gold-500)}
.catering-panel__phone{align-self:flex-start;color:var(--gold-500);font-family:var(--font-display);font-size:clamp(2.25rem,6vw,4.5rem);line-height:.95;transition:color var(--dur-fast) var(--ease-out)}
.catering-panel__phone:hover{color:var(--gold-400)}
.catering-panel__call p{max-width:40ch;color:var(--cream-300)}
.catering-panel__list{display:grid;align-content:center;gap:var(--sp-5);margin:0;padding:var(--sp-7);list-style:none;border-left:1px solid var(--char-700)}
.catering-panel__list li{display:flex;align-items:flex-start;gap:var(--sp-4)}
.catering-panel__list .icon{margin-top:2px;color:var(--gold-500);font-size:22px}
.catering-panel__list .eyebrow{margin-bottom:2px;color:var(--cream-300)}
.catering-panel__list a,.catering-panel__list address{color:var(--cream-100);font-style:normal;overflow-wrap:anywhere;transition:color var(--dur-fast) var(--ease-out)}
.catering-panel__list a{display:inline-flex;align-items:center;min-height:24px}
.catering-panel__list a:hover{color:var(--gold-500)}

@media (max-width:820px){
  .catering-panel{grid-template-columns:1fr}
  .catering-panel__call,.catering-panel__list{padding:var(--sp-6)}
  .catering-panel__list{border-left:0;border-top:1px solid var(--char-700)}
}

/* ---------- Find us (white) ---------- */
.findus{background:var(--white)}
.findus .script{color:var(--char-900)}

.findus__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"photo map cards";gap:var(--sp-5);margin-top:var(--sp-7)}
.findus__photo{grid-area:photo;min-height:420px;margin:0;overflow:hidden;background:var(--cream-200)}
.findus__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.map{grid-area:map;min-height:420px;background:var(--cream-200);border:1px solid var(--border-hairline)}
.map iframe{display:block;width:100%;height:100%;min-height:420px;border:0}
.findus__cards{grid-area:cards;display:grid;grid-template-rows:auto 1fr;gap:var(--sp-5)}
.info-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);border-radius:var(--r-md)}
.info-card--dark{background:var(--char-900);color:var(--cream-100)}
.info-card--dark .eyebrow{color:var(--gold-500)}
.info-card--light{background:var(--cream-100);border:1px solid var(--border-hairline)}
.info-card--light .eyebrow{color:var(--text-muted)}
.info-card address{font-family:var(--font-display);font-size:1.75rem;font-style:normal;line-height:1.1;text-transform:uppercase}
.info-card .btn{align-self:flex-start;margin-top:var(--sp-2)}
.info-card__phone{display:inline-flex;align-items:center;gap:10px;margin-top:auto;color:var(--char-900);font-family:var(--font-display);font-size:1.5rem;line-height:1;transition:color var(--dur-fast) var(--ease-out)}
.info-card__phone:hover{color:var(--gold-600)}
.hours{display:grid;gap:6px;margin:0 0 var(--sp-3)}
.hours div{display:flex;justify-content:space-between;gap:var(--sp-4);padding-bottom:6px;border-bottom:1px solid var(--border-hairline)}
.hours div:last-child{padding-bottom:0;border-bottom:0}
.hours dt{color:var(--char-900);font-family:var(--font-condensed);font-size:var(--fs-small);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase}
.hours dd{margin:0;color:var(--text-body)}
.hours .is-closed dt,.hours .is-closed dd{color:var(--text-muted)}
.hours-note{padding-top:var(--sp-3);border-top:1px solid var(--border-hairline)}
.hours-note p{margin:0;color:var(--text-body);font-size:var(--fs-small);line-height:1.45}
.hours-note .hours-note__title{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--char-900);font-family:var(--font-condensed);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase}
.hours-note .hours-note__title .icon{color:var(--gold-600);font-size:1.25em}
.hours-note a{color:var(--char-900);font-weight:var(--fw-semibold);text-decoration:underline;text-underline-offset:2px;transition:color var(--dur-fast) var(--ease-out)}
.hours-note a:hover{color:var(--gold-600)}

@media (max-width:1024px){
  .findus__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"photo cards" "map map"}
  .map,.map iframe{min-height:360px}
}
@media (max-width:640px){
  .findus__grid{grid-template-columns:1fr;grid-template-areas:"photo" "cards" "map"}
  .findus__photo{min-height:0;aspect-ratio:4 / 3}
  .findus__photo img{object-position:50% 55%}
  .map,.map iframe{min-height:320px}
}

/* ---------- About: Chef Pat (cream) ---------- */
.chef{padding-bottom:calc(var(--section-y) + var(--slant-half))}
.chef__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:var(--sp-8)}
.chef .script{color:var(--char-900)}
.chef h2{font-size:var(--fs-display-l)}
.chef .rule{margin-left:0}
.chef__lead{max-width:46ch;margin-top:var(--sp-6);color:var(--char-900);font-size:var(--fs-lead)}
.award{max-width:28ch;margin:var(--sp-6) 0 0;padding-top:var(--sp-5);border-top:var(--bw-heavy) solid var(--gold-500)}
.award p{color:var(--char-900);font-family:var(--font-display);font-size:var(--fs-display-m);line-height:1.1;text-transform:uppercase}
.chef__photos{display:grid;grid-template-columns:3fr 2fr;align-items:end;gap:var(--sp-4)}
.chef__photos figure{margin:0}
.chef__photos img{width:100%}
.chef__photos figcaption{margin-top:var(--sp-3);color:var(--text-muted);font-size:var(--fs-small);line-height:1.45}

@media (max-width:860px){
  .chef__grid{grid-template-columns:1fr;gap:var(--sp-7)}
}

/* Our Goals & History: the verbatim timeline */
.history{margin-top:var(--sp-9)}
.history__title{font-size:clamp(2rem,4vw,2.5rem)}
.history .rule{margin-left:0}
.timeline{max-width:960px;margin:var(--sp-7) 0 0;padding:0;list-style:none}
.timeline__entry{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--sp-2) var(--sp-6);padding-block:var(--sp-6);border-top:1px solid var(--border-hairline)}
.timeline__entry:last-child{border-bottom:1px solid var(--border-hairline)}
.timeline__year{grid-row:1 / span 2;color:var(--char-900);font-family:var(--font-display);font-size:var(--fs-display-m);line-height:1;letter-spacing:.02em}
.timeline__entry h4{grid-column:2;margin:0;color:var(--char-900);font-family:var(--font-condensed);font-size:var(--fs-title);font-weight:var(--fw-semibold);line-height:var(--lh-title);letter-spacing:var(--ls-caps);text-transform:uppercase}
.timeline__entry p{grid-column:2;max-width:64ch;color:var(--text-muted)}

@media (max-width:640px){
  .timeline__entry{grid-template-columns:1fr}
  .timeline__year{grid-row:auto;font-size:1.5rem}
  .timeline__entry h4,.timeline__entry p{grid-column:1}
}

/* ---------- Footer ---------- */
/* A full --slant on top here, not half: the logo sits at the far left, where the edge is lowest */
.site-footer{padding-top:calc(var(--sp-8) + var(--slant));background:var(--char-900);color:var(--cream-300);font-size:var(--fs-small)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-7)}
.footer-brand img{width:120px}
.footer-brand .script{margin:var(--sp-4) 0 var(--sp-2);color:var(--gold-500);font-size:1.5rem}
.footer-col h2{margin-bottom:var(--sp-4);color:var(--gold-500);font-family:var(--font-condensed);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:1.3;letter-spacing:var(--ls-label)}
.footer-list{display:grid;gap:var(--sp-3);margin:0;padding:0;list-style:none}
.footer-list a{display:inline-flex;align-items:center;min-height:24px;padding-block:3px;gap:10px;color:var(--cream-100);transition:color var(--dur-fast) var(--ease-out)}
.footer-list a:hover{color:var(--gold-500)}
.footer-list .icon{color:var(--gold-500);font-size:16px}
.footer-bottom{margin-top:var(--sp-8);padding-block:var(--sp-4);border-top:1px solid var(--char-700)}
.footer-bottom .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);font-family:var(--font-condensed);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase}

@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:480px){
  .footer-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}