/* ==========================================================================
   MIB — shared stylesheet for index.html · about.html · faq.html
   Apple design language: centred tiles, short sections, one blue accent.
   Two faces: Suisse Int'l (Inter stand-in) for everything, Noto Serif TC 900
   for display-scale type only — the headline face in the client's reference.
   @layer tokens → reset → base → layout → components
   ========================================================================== */
/* ---- licensed Suisse Int'l goes here ----
@font-face{font-family:"Suisse Int'l"; src:url("SuisseIntl-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:"Suisse Int'l"; src:url("SuisseIntl-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;}
------------------------------------------- */
@layer tokens, reset, base, layout, components;

@layer tokens{
:root{
  /* every value below is measured off the client's own logo source
     (mib_header_lockup_all_blue.svg): #16181D tile · #2E90F2 cursor · #FFFFFF.
     Committed light theme: three light grounds, no dark surfaces anywhere.
     The logo colours stay — --ink IS the tile, every ground is white tinted
     with the logo blue. No neutral greys. */
  --brand:#2E90F2;       /* the logo blue exactly, in the mark and as an accent */
  --bg:#ffffff;
  --bg-2:#f0f7fe;        /* the quiet alternating stage — 7% logo blue */
  --panel:#deedfd;       /* the emphasis band + footer — 16% logo blue */
  --ink:#16181D;         /* the logo tile IS the text colour */
  --ink-2:#5f646c;       /* one secondary that clears AA on all three grounds */
  --line:#d3e3f6;
  --blue:#276cb2;        /* logo blue toward the tile: 5.42 white / 4.55 on --panel */
  --blue-btn:#276cb2;
  --blue-btn-hi:#225488; /* hover DARKENS — brightening to #2E90F2 drops white text to 3.29 */
  --on-blue:#ffffff;
  --on-panel:#16181D;    /* the band is light now, so its text is just ink */
  --on-panel-2:#5f646c;
  --card:#ffffff;
  --nav-bg:var(--panel);   /* the bar is the same blue as the band and the footer */

  /* Suisse Int'l is licensed from Swiss Typefaces and cannot ship in this repo.
     Drop the licensed .woff2 files next to this file, uncomment the @font-face
     block below, and it takes over automatically — no other change needed.
     Inter is the stand-in until then; CJK always falls through to PingFang TC
     because neither face has Chinese glyphs. */
  --sans:"Suisse Int'l","Suisse Intl",SuisseIntl,Inter,
         -apple-system,BlinkMacSystemFont,"PingFang TC","Helvetica Neue",
         "Microsoft JhengHei",sans-serif;
  /* display face — used ONLY at --fs-4 and above (h1/h2, the menu, the
     footer wordmark). 900 is the weight in the reference image; the Latin
     fallbacks matter because the footer wordmark "MIB" is Latin. */
  --display:"Noto Serif TC","Songti TC","Source Han Serif TC",
            "PingFang TC",serif;

  /* Apple's own steps: 12 / 14 / 17 body / 21 / 24 / 28 / 32 / 40 / 48 / 80 */
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-0:1.0625rem; --fs-1:1.3125rem;
  --fs-2:1.5rem;  --fs-3:1.75rem;  --fs-4:2rem;      --fs-5:3rem;  --fs-6:5rem;

  --lh-display:1.14; --lh-head:1.2; --lh-snug:1.4; --lh-ui:1.5; --lh-relaxed:1.6; --lh-body:1.7;
  --ls-display:-.005em; --ls-head:-.008em; --ls-0:0; --ls-tight:.02em;

  --sp-0:.25rem; --sp-1:.5rem; --sp-2:1rem;  --sp-3:1.5rem;
  --sp-4:2.5rem; --sp-5:4rem;  --sp-6:5.5rem; --sp-7:7.5rem;

  --r-1:12px; --r-2:18px; --r-3:28px; --r-pill:980px;
  --ctl-y:.7rem; --ctl-x:1.35rem; --pill-y:.45rem; --pill-x:1rem;  /* control padding */
  --red:#b3261e;                                                    /* the one error colour */
  --black:#000000;       /* the ONE neutral in the system, and only for .gnav-cta */
  /* LINE's official brand green. Not derived from the logo and not ours to
     alter — LINE's guidelines require this exact value. (Distinct from --line,
     which is the hairline colour.) */
  --linebrand:#06C755;
  --linebrand-hi:#05a747;
  --t-fast:180ms; --t-med:320ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --hair:color-mix(in srgb, var(--ink) 12%, transparent);
  --hair-strong:color-mix(in srgb, var(--ink) 22%, transparent);
  --nav-ctl:2.2rem;      /* nav mark + CTA height — 80% of the 2.75rem control size */
  --nav-h:3.5rem;
  --container:69.25rem;   /* 1108px — Apple's grid */
  --measure:36ch;
}
}

@layer reset{
*,*::before,*::after{box-sizing:border-box; margin:0;}
[hidden]{display:none !important;}
img,svg{display:block; max-width:100%;}
button,input,select,textarea{font:inherit; color:inherit;}
ul{padding:0; list-style:none;}
}

@layer base{
html{
  /* committed light: tells the UA to render form controls, scrollbars and the
     canvas light even when the reader's OS is set to dark */
  color-scheme:light;
  font-size:100%;                 /* respects the reader's own base size */
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + var(--sp-2));
}
/* desktop scale-up — type, spacing, nav and container all move together */
@media (min-width:1440px){ html{font-size:112%;} }
@media (min-width:1920px){ html{font-size:125%;} }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-0); line-height:var(--lh-body);
  letter-spacing:var(--ls-0); line-break:strict;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{line-height:var(--lh-head); letter-spacing:var(--ls-head); font-weight:600; text-wrap:balance;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--blue); color:var(--on-blue);}
:focus-visible{outline:4px solid var(--blue); outline-offset:2px; border-radius:var(--sp-0);}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important; transition:none!important;}
}
.skip{position:fixed; top:var(--sp-1); left:var(--sp-1); z-index:100; min-height:2.75rem;
  display:inline-flex; align-items:center;
  background:var(--blue-btn); color:var(--on-blue); padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-pill); font-size:var(--fs-sm);
  transform:translateY(-300%); transition:transform var(--t-fast) var(--ease);}
.skip:focus-visible{transform:none;}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
}

@layer layout{
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-3);}
/* a stage = one idea, centred, deliberately short */
.stage{padding-block:var(--sp-5); text-align:center;}
.stage.tight{padding-block:var(--sp-4);}
.stage.grey{background:var(--bg-2);}
/* the emphasis band — was a dark stage, now the deepest light ground */
.stage.band{background:var(--panel); color:var(--on-panel);}
@media(max-width:734px){
  .stage{padding-block:var(--sp-4);}
  /* 16px gutters on phones — the 24px pair squeezed 'NT$ 11,000 起' onto two lines */
  .wrap,.gnav-in,.gmenu ul,.gfoot-in{padding-inline:var(--sp-2);}
}
}

@layer components{
/* ---------- global nav (Apple: 44px, blurred, 12px links) ---------- */
.gnav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  /* opaque, so no backdrop-filter: there is nothing to see through and the
     blur would just cost a compositor layer. The hairline is what separates
     the bar from --bg-2, which is only 1.1 away from it. */
  background:var(--nav-bg);
  border-bottom:1px solid var(--line);
}
.gnav-in{max-width:var(--container); margin-inline:auto; height:100%;
  padding-inline:var(--sp-3); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);}
.gnav-logo{display:flex; align-items:center; gap:var(--sp-1); flex:none; min-height:2.75rem;}
.gnav-logo b{font-size:var(--fs-1); font-weight:600; letter-spacing:var(--ls-tight);}
.gnav ul{display:flex; align-items:center; gap:var(--sp-4);}
.gnav ul a{font-size:var(--fs-sm); color:var(--ink); opacity:.85; transition:opacity var(--t-fast) var(--ease);}
.gnav ul a:hover{opacity:1;}
.gnav ul a[aria-current="page"]{opacity:1; font-weight:600;}
.gmenu a[aria-current="page"]{color:var(--blue);}
/* the one filled control in the bar: a solid BLACK rounded rectangle with white
   type and the logo's blue cursor after it. True #000 rather than the logo tile
   #16181D — at this size the tile reads as a dark blue-grey, not as black.
   Rounded rectangle, not a pill, so it doesn't read as one of the .btn pills. */
.gnav-cta{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  min-height:var(--nav-ctl); padding-inline:var(--sp-2); border-radius:var(--r-1);
  background:var(--black); color:#fff;        /* 21:1 */
  font-size:var(--fs-sm); font-weight:600; white-space:nowrap;
  transition:background var(--t-fast) var(--ease);
}
/* the logo's cursor bar, at the type's scale and raised the way it is in the mark */
.gnav-cta::after{
  content:""; flex:none; width:2px; height:.8em; margin-left:.45em;
  margin-bottom:.14em; border-radius:1px; background:var(--brand);
}
/* hover lifts the black toward the logo blue rather than toward grey */
.gnav-cta:hover{background:color-mix(in srgb, var(--black) 86%, var(--brand));}
.gnav-burger{display:none; width:3rem; height:3rem; margin-right:calc(var(--sp-3) * -.5);  /* optical: pull the tap area to the container edge */
  background:none; border:0; cursor:pointer; align-items:center; justify-content:center; color:var(--ink);}
@media(max-width:833px){
  .gnav ul,.gnav-cta{display:none;}
  .gnav-burger{display:flex;}
}
/* full-screen menu — Apple's mobile pattern */
.gmenu{position:fixed; inset:var(--nav-h) 0 0; z-index:49; background:var(--bg);
  padding:var(--sp-3) 0; overflow-y:auto; opacity:0; visibility:hidden;
  transition:opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);}
.gmenu.open{opacity:1; visibility:visible; transition:opacity var(--t-med) var(--ease), visibility 0s;}
.gmenu ul{max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-3);}
.gmenu a{display:block; padding-block:var(--sp-2); font-size:var(--fs-3);
  font-family:var(--display); font-weight:900;
  letter-spacing:var(--ls-head); border-bottom:1px solid var(--line); min-height:2.75rem;}
.gmenu li:last-child a{border-bottom:0;}
/* the same contact block as the utility strip, reachable without closing the menu */
.gmenu-contact{max-width:var(--container); margin-inline:auto;
  padding:var(--sp-3) var(--sp-3) 0; border-top:1px solid var(--line);
  margin-top:var(--sp-2); display:flex; flex-direction:column;}
.gmenu-contact a{display:inline-flex; align-items:center; gap:var(--sp-1); min-height:2.75rem;
  font-size:var(--fs-1); color:var(--blue); border-bottom:0; padding-block:0;
  font-family:var(--sans); font-weight:400; letter-spacing:var(--ls-0);}
.gmenu-contact svg{width:1em; height:1em; flex:none; opacity:.8;}
.gmenu-contact p{font-size:var(--fs-sm); color:var(--ink-2); margin-top:var(--sp-1);}

/* ---------- headline system ---------- */
.h-hero,.h-stage{font-family:var(--display); font-weight:900;
  line-height:var(--lh-display); letter-spacing:var(--ls-display);}
.h-hero{font-size:clamp(2.5rem,7vw,var(--fs-6));}
.h-stage{font-size:clamp(var(--fs-4),5vw,var(--fs-5));}
/* inline highlight — the same face, pulled into body copy */
.hl{font-family:var(--display); font-weight:900; font-style:normal; color:var(--ink);}
.lead{font-size:clamp(var(--fs-1),2.2vw,var(--fs-3)); font-weight:400; color:var(--ink-2);
  line-height:var(--lh-snug); margin-top:var(--sp-2); margin-inline:auto; max-width:40rem;
  text-wrap:balance;}   /* ch is ~0.5em — useless for CJK; balance beats a hard measure */
.note{font-size:var(--fs-sm); color:var(--ink-2); margin-top:var(--sp-2);}

/* ---------- links & buttons (Apple exactly) ---------- */
.links{display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; margin-top:var(--sp-3);}
.lk{display:inline-flex; align-items:center; min-height:2.75rem; color:var(--blue);
  font-size:var(--fs-1); transition:opacity var(--t-fast) var(--ease);}
.lk::after{content:"›"; margin-left:.25em; font-weight:400;}
.lk:hover{text-decoration:underline;}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem;
  padding:var(--ctl-y) var(--ctl-x); border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--blue-btn); color:var(--on-blue); font-size:var(--fs-0); font-weight:400;
  transition:background var(--t-fast) var(--ease);}
.btn:hover{background:var(--blue-btn-hi);}
.btn-ghost{background:transparent; color:var(--blue); border:1px solid var(--blue);}
.btn-ghost:hover{background:var(--blue); color:var(--on-blue);}


/* ---------- tile grid (the core Apple homepage device) ---------- */
.tiles{display:grid; gap:var(--sp-2); margin-top:var(--sp-4); text-align:left;}
.tiles.two{grid-template-columns:repeat(2,1fr);}
.tiles.three{grid-template-columns:repeat(3,1fr);}
.tiles.demos{grid-template-columns:repeat(4,1fr);}
@media(max-width:1068px){ .tiles.demos{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .tiles.demos{grid-template-columns:repeat(2,1fr); gap:var(--sp-1);} }
.tiles.four{grid-template-columns:repeat(4,1fr);}
@media(max-width:1068px){ .tiles.four{grid-template-columns:repeat(2,1fr);} }
@media(max-width:734px){ .tiles.two,.tiles.three{grid-template-columns:1fr;} }
@media(max-width:900px) and (min-width:735px){ .tiles.three{grid-template-columns:1fr;} }
/* phones: stay 2-across so four tiles are two rows, not four */
@media(max-width:734px){
  .tiles.four{grid-template-columns:repeat(2,1fr); gap:var(--sp-1);}
  .tile{padding:var(--sp-2);}
  .tile h3{font-size:var(--fs-1);}
  .tile .desc{display:none;}          /* name + timeframe + price is enough to choose */
}
.tile{
  background:var(--card); border-radius:var(--r-2); padding:var(--sp-3);
  display:flex; flex-direction:column; text-align:center;
  transition:transform var(--t-med) var(--ease);
}
.stage.grey .tile{background:var(--bg);}
.tile:hover{transform:scale(1.012);}
.tile h3{font-size:var(--fs-2); margin-bottom:var(--sp-0);}
.tile .kv{font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--sp-2);}
.tile .desc{font-size:var(--fs-sm); color:var(--ink-2); line-height:var(--lh-relaxed); margin-bottom:var(--sp-2); flex:1; text-wrap:pretty;}
.tile .price{font-size:var(--fs-0); font-weight:600; margin-bottom:var(--sp-1);}
.tile .price small{display:block; font-size:var(--fs-sm); font-weight:400; color:var(--ink-2);
  margin-top:var(--sp-0); text-wrap:balance;}   /* stop '起' orphaning on its own line */
.tile .lk{justify-content:center; font-size:var(--fs-0);}

/* demo tiles carry a picture */
.tile-demo{padding:0; overflow:hidden;}
.tile-demo .shot{aspect-ratio:4/3; background:var(--bg-2); overflow:hidden;}
.tile-demo .shot svg{width:100%; height:100%; transition:transform var(--t-med) var(--ease);}
.tile-demo:hover .shot svg{transform:scale(1.03);}
.tile-demo .bd{padding:var(--sp-2) var(--sp-2) var(--sp-3);}
.tile-demo h3{font-size:var(--fs-1);}
.tile-demo .desc{margin-bottom:var(--sp-1); flex:none;}

/* three plain points — replaces the numbered process */
.points{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-4);}
@media(max-width:734px){ .points{grid-template-columns:1fr; gap:var(--sp-3);} }
.point h3{font-size:var(--fs-2); margin-bottom:var(--sp-1);}
.point p{font-size:var(--fs-0); color:var(--ink-2); line-height:var(--lh-relaxed); margin-inline:auto; max-width:17rem; text-wrap:balance;}

.who{font-size:var(--fs-0); color:var(--on-panel-2); line-height:var(--lh-relaxed);
  margin:var(--sp-3) auto 0; max-width:34rem; text-wrap:balance;
  padding-top:var(--sp-3); border-top:1px solid color-mix(in srgb, var(--on-panel) 18%, transparent);}

.prose{max-width:42rem; margin:var(--sp-3) auto 0; display:flex; flex-direction:column; gap:var(--sp-2);}
.prose p{font-size:var(--fs-0); line-height:var(--lh-body); color:var(--ink-2); text-wrap:pretty;}


/* ---------- contact page ---------- */
/* the mark is inlined wherever it appears so the tile can invert in dark mode
   — the shipped SVGs are a fixed #16181D tile that would vanish on a dark page.
   Both official variants are covered: dark tile on light, light tile on dark. */
.lk-tile{fill:var(--ink);}
.lk-mib{fill:var(--bg);}
.lk-bar{fill:var(--brand);}
.lk-word{fill:var(--blue);}
.lockup{margin:0 auto var(--sp-3); width:min(19rem,80%); height:auto;}
/* same box as .gnav-cta, so the two ends of the bar stay locked together */
.navmark{flex:none; width:var(--nav-ctl); height:var(--nav-ctl);}
.ccard{align-items:center; justify-content:flex-start; gap:var(--sp-1);
  border:1px solid var(--line); text-align:center;}
.stage.grey .ccard,.ccard{background:var(--card);}
.ccard svg{width:1.5rem; height:1.5rem; color:var(--blue); margin-bottom:var(--sp-0);}
.ccard .lab{font-size:var(--fs-sm); color:var(--ink-2);}
.ccard .val{font-size:var(--fs-1); font-weight:600; letter-spacing:var(--ls-head);
  word-break:break-word;}
.ccard .sub{font-size:var(--fs-sm); color:var(--ink-2); margin-top:var(--sp-0);}
a.ccard .val{color:var(--blue);}
a.ccard:hover .val{text-decoration:underline;}

/* ---------- FAQ ---------- */
.faq{max-width:44rem; margin:var(--sp-3) auto 0; text-align:left; border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;
  position:relative; font-size:var(--fs-1); font-weight:600; letter-spacing:var(--ls-head); min-height:2.75rem;
  display:flex; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before,.faq summary::after{content:""; position:absolute; right:.4rem; top:50%;
  width:.85rem; height:1.5px; background:var(--blue); border-radius:1px;
  transition:transform var(--t-fast) var(--ease);}
.faq summary::after{transform:rotate(90deg);}
.faq details[open] summary::after{transform:rotate(0);}
.faq .ans{padding:0 var(--sp-4) var(--sp-3) 0; font-size:var(--fs-0); color:var(--ink-2); line-height:var(--lh-relaxed);}

/* ---------- contact ---------- */
.form{max-width:30rem; margin:var(--sp-4) auto 0; text-align:left;}
.field{margin-bottom:var(--sp-2);}
.field label{display:block; font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--sp-0);}
.field input,.field textarea{width:100%; min-height:2.75rem; padding:var(--ctl-y) var(--sp-2);
  background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-1);
  font-size:var(--fs-0); transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);}
.stage.grey .field input,.stage.grey .field textarea{background:var(--bg);}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent);}
.field textarea{resize:vertical; min-height:5rem; line-height:var(--lh-ui);}
.form .btn{width:100%; margin-top:var(--sp-1);}
.fnote{font-size:var(--fs-sm); color:var(--ink-2); margin-top:var(--sp-2); text-align:center;}
.fnote.ok{color:var(--blue);} .fnote.err{color:var(--red);}
.contact-meta{display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap;
  align-items:center; margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--ink-2);}
.contact-meta a{min-height:2.75rem; display:inline-flex; align-items:center; color:var(--blue);}
.contact-meta a:hover{text-decoration:underline;}

/* ---------- floating LINE add-friend button ----------
   Fixed bottom-right on every page. z-index 40 sits under .gmenu (49) and
   .gnav (50), so opening the phone menu covers it instead of the button
   floating on top of the menu.

   White-on-#06C755 is 2.26:1, under the 3:1 WCAG 1.4.11 wants for a graphical
   object — but this is LINE's registered mark rendered LINE's way, which
   1.4.11 exempts as a logotype. What is not exempt is being able to find the
   thing, so the button carries a shadow to define its edge against all three
   grounds (the green alone is only 1.89:1 on --panel), a 3.5rem target, and a
   real label for screen readers. */
.linefab{
  position:fixed; right:var(--sp-3); bottom:var(--sp-3); z-index:40;
  width:3.5rem; height:3.5rem; border-radius:var(--r-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--linebrand); color:#fff;
  box-shadow:0 1px 3px color-mix(in srgb, var(--ink) 24%, transparent),
             0 6px 20px color-mix(in srgb, var(--ink) 16%, transparent);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.linefab:hover{background:var(--linebrand-hi); transform:scale(1.06);}
.linefab:active{transform:scale(.97);}
.linefab svg{width:1.9rem; height:1.9rem;}
@media(max-width:734px){ .linefab{right:var(--sp-2); bottom:var(--sp-2); width:3.25rem; height:3.25rem;} }
@media(prefers-reduced-motion:reduce){ .linefab:hover,.linefab:active{transform:none;} }
@media print{ .linefab{display:none;} }

/* ---------- footer — the dark anchor, closed by the outlined wordmark ---------- */
.gfoot{background:var(--panel); color:var(--ink-2); font-size:var(--fs-xs);
  padding-top:var(--sp-3); padding-bottom:0; overflow:hidden;}
.gfoot-in{max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-3);}
.gfoot-links{display:flex; gap:var(--sp-3); flex-wrap:wrap; padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--hair); margin-bottom:var(--sp-2);}
.gfoot-links a{min-height:2.75rem; display:inline-flex; align-items:center; color:var(--ink);}
.gfoot-links a:hover{text-decoration:underline;}
.gfoot-bot{display:flex; justify-content:space-between; align-items:center;
  gap:var(--sp-2) var(--sp-3); flex-wrap:wrap;}
/* contact is the only thing left down here, so it reads a step larger than
   the 12px footer default and sits at full --on-panel rather than muted */
.gfoot-contact{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--ink);}
.gfoot-contact a,.gfoot-contact span{display:inline-flex; align-items:center; gap:var(--sp-0);
  min-height:2.75rem;}
.gfoot-contact a:hover{text-decoration:underline;}
.gfoot-contact svg{width:1em; height:1em; flex:none; opacity:.7;}
@media(max-width:734px){
  /* stacked, so the phone number never shares a line with the address */
  .gfoot-contact{flex-direction:column; align-items:flex-start; gap:0;}
  .gfoot-bot{align-items:flex-start;}
}
/* the logo drawn as outline only — letterforms as construction lines.
   line-height <1 crops the box; .gfoot's overflow:hidden crops the feet. */
.foot-word{
  display:block; width:100%; text-align:center; user-select:none; pointer-events:none;
  font-family:var(--display); font-weight:900; letter-spacing:var(--ls-tight);
  font-size:clamp(6rem,24vw,18rem); line-height:.84;
  margin-top:var(--sp-3); color:transparent;
  -webkit-text-stroke:1px var(--hair-strong); text-stroke:1px var(--hair-strong);
}
@media(max-width:734px){ .foot-word{-webkit-text-stroke-width:.75px;} }
}