/* ==========================================================================
   Auntie Anne's Saudi Arabia — Brochure site
   Bilingual (AR / EN) with full RTL + LTR support.
   Uses CSS logical properties throughout so both directions mirror correctly.
   ========================================================================== */

/* ---------- Tokens ---------- */
/* Brand palette, per COLOR PALETTE SPECS in the official International Brand
   Style Guidelines (p.27):
     PRIMARY BLUE    PMS 072C   #000F9F
     SECONDARY BLUE  PMS 285C   #0570DA
     GOLD            PMS 1375C  #FDA30C
     WHITE
   --blue-deep and --blue-mid are darker shades of the primary, used only for
   background gradients. Nothing here re-tints the logo itself. */
:root{
  --blue-deep:#00084F;
  --blue-mid:#000B78;
  --blue:#000F9F;        /* PRIMARY BLUE */
  --blue-bright:#0570DA; /* SECONDARY BLUE */
  --blue-tint:#E4EAFB;

  --gold:#FDA30C;        /* GOLD */

  /* Long-form content sits on white for readability (Saudi guide §7); the blue
     sections carry the 75% blue impression the guide asks for. --tint is a
     near-white for card grounds, not a brand colour in its own right. */
  --tint:#F4F6FC;

  --ink:#12123F;
  --muted:#4E4E70;
  --line:rgba(18,18,63,.12);
  --white:#fff;

  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 2px 10px rgba(0,15,159,.08);
  --shadow:0 18px 45px -20px rgba(0,15,159,.4);
  --shadow-lg:0 40px 80px -35px rgba(0,15,159,.5);

  /* Almarai carries every heading, Baloo Bhaijaan 2 every supporting line and
     body paragraph. Both cover Arabic and Latin, so the pairing holds in either
     language and there is no font switch on language change. */
  --font-head:"Almarai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Baloo Bhaijaan 2",system-ui,-apple-system,"Segoe UI",sans-serif;

  --header-h:80px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-block-start:calc(var(--header-h) + 12px); }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  font-size:clamp(1rem,1.05vw,1.125rem);   /* متن 16–18, never below 16 */
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }

/* Type scale, straight from the guide's سلّم المقاسات (§3):
     عنوان بطل   Almarai 800   72–120 / 0.95
     عنوان       Almarai 800   40–64  / 1.1
     عنوان فرعي  Almarai 700   24–32  / 1.3
     نص مساند    Baloo   600   18–24  / 1.5
     متن         Baloo   400   16–18  / 1.7
     شروط وأحكام Baloo   400   12–14  / 1.5   */
h1,h2,h3{ font-family:var(--font-head); margin:0 0 .5em; }
h1{ font-weight:800; font-size:clamp(3rem,7vw,6rem);     line-height:.95; }
h2{ font-weight:800; font-size:clamp(2.5rem,4vw,4rem);   line-height:1.1; }
h3{ font-weight:700; font-size:clamp(1.5rem,1.8vw,2rem); line-height:1.3; margin-bottom:.35em; }
p{ margin:0 0 1.1em; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

.container{ width:min(1180px,100% - 3rem); margin-inline:auto; }

.skip-link{
  position:absolute; inset-block-start:-100px; inset-inline-start:1rem; z-index:200;
  background:var(--gold); color:var(--blue-deep); font-weight:700;
  padding:.7rem 1.2rem; border-radius:0 0 12px 12px; text-decoration:none;
}
.skip-link:focus{ inset-block-start:0; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--gold); --btn-fg:var(--blue-deep);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:800; font-size:1rem; text-decoration:none;
  /* 48px tall exactly (Saudi guide §7), which also clears the 44px minimum
     touch target on mobile. Full pill radius — never a squared corner. */
  min-block-size:48px; padding:0 2rem; border:0; border-radius:100px; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, background .2s;
  box-shadow:0 12px 26px -14px rgba(253,163,12,.9);
}
.btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -14px rgba(253,163,12,.95); }
.btn:active{ transform:translateY(-1px); }
.btn-blue{ --btn-bg:var(--blue); --btn-fg:#fff; box-shadow:0 12px 26px -14px rgba(0,15,159,.9); }
.btn-blue:hover{ box-shadow:0 18px 34px -14px rgba(0,15,159,.95); }
.btn-ghost{
  background:transparent; color:#fff; box-shadow:none;
  border:2px solid rgba(255,255,255,.4);
}
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7); box-shadow:none; }
.btn.full{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; inset-block-start:0; z-index:100;
  background:rgba(0,8,79,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-block-end:1px solid rgba(255,255,255,.08);
  transition:background .3s, box-shadow .3s;
}
.site-header.scrolled{ background:rgba(0,8,79,.98); box-shadow:0 10px 30px -20px #000; }
.header-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

/* Clear space: the guidelines require blank space around the lockup equal to
   the cap height of the wordmark; the header padding and flex gap supply it.
   Height, not width, is what the 0.5in minimum-scale rule applies to. */
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ block-size:48px; inline-size:auto; max-inline-size:none; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  position:relative; text-decoration:none; color:rgba(255,255,255,.82);
  font-weight:600; font-size:1rem; padding:.7rem .9rem; border-radius:10px;
  transition:color .2s, background .2s;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.nav a.active{ color:var(--gold); }

.header-actions{ display:flex; align-items:center; gap:.6rem; }
.lang-btn{
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.22);
  font-family:var(--font-head); font-weight:800; font-size:.82rem; letter-spacing:.06em;
  padding:.5rem .9rem; border-radius:100px; cursor:pointer; transition:background .2s, border-color .2s;
}
.lang-btn:hover{ background:var(--gold); color:var(--blue-deep); border-color:var(--gold); }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  inline-size:44px; block-size:44px; padding:0 10px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:12px; cursor:pointer;
}
.burger span{ display:block; block-size:2px; background:#fff; border-radius:2px; transition:transform .3s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  /* Fill the first screen (viewport minus the sticky header) before the white
     section begins; content is centred vertically. */
  min-block-size:calc(100vh - var(--header-h));
  min-block-size:calc(100svh - var(--header-h));
  display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(1100px 620px at 78% -10%, var(--blue-bright) 0%, transparent 60%),
    linear-gradient(165deg, var(--blue-mid) 0%, var(--blue-deep) 100%);
  color:#fff;
  padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,5vw,4rem);
}
html[dir="ltr"] .hero{
  background:
    radial-gradient(1100px 620px at 22% -10%, var(--blue-bright) 0%, transparent 60%),
    linear-gradient(165deg, var(--blue-mid) 0%, var(--blue-deep) 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.28; }
.blob-1{ inline-size:460px; block-size:460px; background:var(--gold); inset-block-start:-140px; inset-inline-end:-100px; }
.blob-2{ inline-size:380px; block-size:380px; background:var(--blue-bright); inset-block-end:-180px; inset-inline-start:-120px; }

.hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
  gap:clamp(2rem,5vw,4rem);
}
.eyebrow{
  display:inline-block; font-size:.82rem; font-weight:800; letter-spacing:.06em;
  color:var(--blue); background:var(--gold);
  padding:.45rem 1.1rem; border-radius:100px; margin-block-end:1.4rem;
}
.hero h1{ color:var(--gold); margin-block-end:1.1rem; text-wrap:balance; }
.lead{ font-family:var(--font-body); font-weight:600; font-size:clamp(1.125rem,1.6vw,1.5rem); line-height:1.5; color:#fff; max-inline-size:52ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-block-start:2rem; }

/* Hero pretzel illustration */
.hero-art{ display:grid; place-items:center; }
.pretzel-hero{
  position:relative; inline-size:min(100%,460px); aspect-ratio:3/2;
  display:grid; place-items:center;
}
/* Guidelines p.22-23: the brandmark takes no glows, blurs, drop shadows or
   outlines, is never rotated, recoloured, or resized element-by-element. A
   whole-mark float is the only motion applied. */
.pretzel-shape{
  inline-size:100%; block-size:100%; object-fit:contain;
  animation:bob 6s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* Stats */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-block-start:clamp(2.5rem,6vw,4rem);
  padding-block-start:2rem; border-block-start:1px solid rgba(255,255,255,.16);
  text-align:center;
}
.stats li{ display:flex; flex-direction:column; gap:.2rem; }
.stats b{
  font-family:var(--font-head); font-size:clamp(1.6rem,3.6vw,2.5rem); font-weight:900;
  color:var(--gold); letter-spacing:-.02em;
}
.stats b i{ font-style:normal; font-size:.45em; font-family:var(--font-body); margin-inline-start:.15em; }
.stats span{ font-size:.86rem; color:rgba(255,255,255,.72); font-weight:600; }

/* ---------- Section basics ---------- */
.section{ padding-block:clamp(3.5rem,8vw,6.5rem); }
.section-head{ max-inline-size:62ch; margin-block-end:clamp(2rem,4vw,3rem); }
.kicker{
  font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin-block-end:.6rem;
}
.kicker.light{ color:var(--gold); }
.section-sub{ font-weight:600; font-size:clamp(1.125rem,1.4vw,1.5rem); line-height:1.5; color:var(--muted); max-inline-size:54ch; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }

/* ---------- Story ---------- */
.story{ background:var(--white); }
.story-visual{ position:relative; }
/* Brand blue, not a warm neutral: guidelines p.22 allow the gold mark only on
   brand colours — anywhere else it has to be the 1-colour white logo. */
.story-card{
  aspect-ratio:1/.86; border-radius:var(--radius);
  background:linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 100%);
  display:grid; place-items:center; box-shadow:var(--shadow);
  overflow:hidden; position:relative;
}
.story-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 280px at 28% 18%, rgba(5,112,218,.55), transparent 70%);
}
.story-pretzel{
  position:relative; z-index:1;          /* above the card's ::after sheen */
  inline-size:58%; block-size:auto; object-fit:contain;
}
/* The 1988 badge is our own graphic, not part of the logo — free to tilt. */
.stamp{
  position:absolute; z-index:2; inset-block-start:-22px; inset-inline-end:-14px;
  background:var(--white); color:var(--blue); border-radius:18px;
  padding:.9rem 1.3rem; text-align:center; box-shadow:var(--shadow);
  border:3px solid var(--gold); transform:rotate(6deg);
}
html[dir="ltr"] .stamp{ transform:rotate(-6deg); }
.stamp-year{ display:block; font-family:var(--font-head); font-weight:900; font-size:1.5rem; color:var(--blue); line-height:1; }
.stamp-place{ display:block; font-size:.72rem; font-weight:700; color:var(--muted); margin-block-start:.25rem; }
.highlight{
  font-weight:700; color:var(--blue); font-size:1.1rem;
  border-inline-start:4px solid var(--gold); padding-inline-start:1rem; margin-block-start:1.5rem;
}

/* ---------- Products ---------- */
.products{ background:var(--tint); }
/* minmax(320px) lands on 3 columns at container width, so the 6 cards fill
   two even rows instead of leaving a ragged 4+2. */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.4rem; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
}
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:transparent; }
.card-icon{
  display:grid; place-items:center; inline-size:56px; block-size:56px;
  background:var(--blue-tint); border-radius:16px; font-size:1.6rem; margin-block-end:1.1rem;
}
.card p{ color:var(--muted); margin:0; font-size:1rem; line-height:1.7; }
/* Real product photo (transparent PNG) shown in place of the emoji icon. */
.card-photo{ display:block; block-size:170px; inline-size:auto; max-inline-size:100%; object-fit:contain; margin-block-end:1.1rem; }
.note{ margin-block-start:2rem; color:var(--muted); font-size:.875rem; line-height:1.5; text-align:center; }

/* ---------- Values ---------- */
.values{
  background:linear-gradient(165deg,var(--blue-mid),var(--blue-deep));
  color:#fff;
}
.values .section-sub{ color:rgba(255,255,255,.75); }
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.6rem; }
.value{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); padding:2rem 1.6rem;
  transition:background .3s, transform .3s, border-color .3s;
}
.value:hover{ background:rgba(255,255,255,.1); border-color:var(--gold); transform:translateY(-6px); }
.value-num{
  display:block; font-family:var(--font-head); font-weight:900; font-size:2rem;
  color:var(--gold); line-height:1; margin-block-end:.8rem;
}
.value p{ color:rgba(255,255,255,.82); margin:0; font-size:1rem; line-height:1.7; }

/* ---------- Places ---------- */
.places{ background:var(--white); }
/* Branch cards (Riyadh) — each links to Google Maps. */
.branch-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.branch-card{
  display:flex; align-items:center; gap:1rem; text-decoration:none;
  background:var(--tint); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.2rem 1.4rem; transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
}
.branch-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; background:var(--white); }
.branch-pin{ font-size:1.5rem; flex:none; }
.branch-info{ display:flex; flex-direction:column; gap:.2rem; }
.branch-info b{ font-family:var(--font-head); font-weight:800; color:var(--ink); font-size:1.08rem; }
.branch-map{ color:var(--blue); font-weight:700; font-size:.9rem; }

.city-list{ display:flex; flex-wrap:wrap; gap:.75rem; }
.city-list li{
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  padding:.7rem 1.5rem; font-weight:700; color:var(--blue-mid);
  transition:background .25s, color .25s, transform .25s, border-color .25s;
}
.city-list li:hover{ background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-3px); }
.places-cta{
  margin-block-start:2.5rem; padding:2rem clamp(1.5rem,4vw,2.8rem);
  background:linear-gradient(135deg,var(--white),#F6EEDF);
  border-radius:var(--radius); border:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
}
.places-cta p{ margin:0; font-weight:700; font-size:1.08rem; max-inline-size:48ch; }

/* ---------- Contact ---------- */
.contact{ background:var(--tint); }
.contact-grid{ align-items:start; }
/* Contact section with no form: a single centred info column. */
.contact-solo{ max-inline-size:600px; margin-inline:auto; text-align:center; }
.contact-solo .contact-list{ display:inline-grid; text-align:start; margin-inline:auto; }
.contact-solo .socials{ justify-content:center; }
.contact-list{ display:grid; gap:1.1rem; margin-block:1.8rem; }
.contact-list li{ display:flex; align-items:center; gap:1rem; }
.ci{
  flex:none; display:grid; place-items:center; inline-size:48px; block-size:48px;
  background:var(--white); border:1px solid var(--line); border-radius:14px; font-size:1.2rem;
}
.contact-list b{ display:block; font-size:.8rem; color:var(--muted); font-weight:700; }
.contact-list a{ color:var(--blue); font-weight:700; text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }

.socials{ display:flex; flex-wrap:wrap; gap:.6rem; }
.socials a{
  font-family:var(--font-head); font-size:.85rem; font-weight:700; text-decoration:none;
  background:var(--white); border:1px solid var(--line); border-radius:100px;
  padding:.55rem 1.2rem; color:var(--blue-mid); transition:background .2s, color .2s, border-color .2s;
}
.socials a:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }

.contact-form{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.5rem,3.5vw,2.4rem); box-shadow:var(--shadow);
  display:grid; gap:1.1rem;
}
.field{ display:grid; gap:.4rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field label{ font-size:.86rem; font-weight:700; color:var(--ink); }
.field input,.field select,.field textarea{
  inline-size:100%; padding:.85rem 1rem;
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-block-size:120px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:var(--white); border-color:var(--blue-bright);
  box-shadow:0 0 0 4px rgba(5,112,218,.18);
}
.field input.invalid,.field textarea.invalid{ border-color:#D94B4B; background:#FEF3F3; }
.form-status{ margin:0; font-size:.9rem; font-weight:700; min-block-size:1.4em; }
.form-status.ok{ color:#1E8A4C; }
.form-status.err{ color:#D94B4B; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--blue-deep); color:rgba(255,255,255,.7); padding-block:3rem 2rem; }
.footer-inner{ display:grid; gap:1.6rem; justify-items:center; text-align:center; }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem; }
.footer-nav a{ text-decoration:none; font-weight:700; font-size:.92rem; transition:color .2s; }
.footer-nav a:hover{ color:var(--gold); }
/* Staff login sits a touch apart from the public links: an icon + a subtle
   outline mark it as the private entrance without shouting. */
.footer-staff{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .85rem; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; color:rgba(255,255,255,.8);
}
.footer-staff:hover{ color:var(--gold); border-color:var(--gold); }
.footer-staff-ico{ flex:none; }
.legal{
  margin:0; font-size:.8rem; color:rgba(255,255,255,.45); max-inline-size:70ch; line-height:1.8;
  padding-block-start:1.4rem; border-block-start:1px solid rgba(255,255,255,.1); inline-size:100%;
}

/* ---------- Reveal on scroll ----------
   Only hidden once main.js has confirmed it is running (html.js), so the page
   still reads fine if the script fails to load. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.js .reveal.in-view{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-copy .lead{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .hero-art{ order:-1; }
  .pretzel-hero{ inline-size:min(70%,280px); }
  .grid-2{ grid-template-columns:1fr; }
  .story-visual{ max-inline-size:460px; margin-inline:auto; inline-size:100%; }
  .section-head{ margin-inline:auto; }
}

@media (max-width:820px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset-block-start:var(--header-h); inset-inline:0;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--blue-deep); padding:1rem 1.5rem 2rem;
    border-block-end:1px solid rgba(255,255,255,.1);
    transform:translateY(-130%); transition:transform .35s cubic-bezier(.2,.8,.3,1);
    max-block-size:calc(100dvh - var(--header-h)); overflow-y:auto;
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:.9rem 1rem; font-size:1rem; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1rem; }
  .places-cta{ flex-direction:column; align-items:flex-start; text-align:start; }
  .places-cta .btn{ inline-size:100%; }
}

@media (max-width:520px){
  .container{ width:min(1180px,100% - 2rem); }
  .field-row{ grid-template-columns:1fr; }
  .brand img{ block-size:38px; }
  
  .btn{ padding:0 1.5rem; }   /* height stays 48px — never shrink below it */
  .hero-cta .btn{ inline-size:100%; }
}

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

/* Product names keep their English form with an Arabic transliteration after
   them (Saudi guide §5) — the bracketed part is set quieter and always LTR-safe. */
.translit{ display:block; font-family:var(--font-body); font-weight:400;
  font-size:1rem; line-height:1.5; color:var(--muted); margin-block-start:.15rem; }
.card h3{ font-family:var(--font-head); }