/* ═══════════════════════════════════════════════════════════════
   LOCALWORKS V2 - pricing tiers and the device cards

   The device frames are real photographs with a live page rendered
   into the glass. Every number below was measured off the pixels in
   v1 and must not be re-derived by eye:

     · the screens are switched off in the photos, so panel and bezel
       are both pure black and cannot be told apart by brightness.
       Measuring the "black region" puts the page ON the bezel, which
       reads as pasted-on in a way people feel but cannot name.
     · the laptop's bezel comes from the camera dot: it sits 18px below
       the black edge and a camera is centred in its bezel, giving
       ~36px top and ~31px sides. The phone is inset 9px, checked by
       compositing a white block and looking at it.
     · corner radii belong to the DISPLAY, not the bezel.

   The page sits in .zoom (scaled to the screen) inside .mini (the part
   that scrolls). Keeping those on separate elements stops the scroll
   animation fighting the scaling.
   ═══════════════════════════════════════════════════════════════ */

.tiers{
  display:grid; gap:var(--s5); margin-top:var(--s8);
  grid-template-columns:repeat(3, 1fr);
}
.tier{
  display:flex; flex-direction:column; gap:var(--s5);
  padding:var(--s6) var(--s5) var(--s5);
  position:relative;
}
.tier.featured{border-color:var(--line-strong)}
.tier .badge{
  position:absolute; top:calc(var(--s4) * -1); left:var(--s5);
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-ui); font-size:10px; letter-spacing:.18em; font-weight:500;
  text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pill);
}
.tier .name{color:var(--dim)}
.tier .price{
  font-size:clamp(38px, 3.6vw, 54px); line-height:1; font-weight:300;
  letter-spacing:var(--track-tight); margin-top:var(--s2);
}
.tier .price small{font-size:.42em; color:var(--faint); letter-spacing:0; margin-left:6px}
.tier .when{
  font-family:var(--font-ui); font-size:11px; letter-spacing:.18em; font-weight:500;
  text-transform:uppercase; color:var(--accent); margin-top:var(--s3);
}
.tier .feat{list-style:none; display:grid; gap:10px; margin-top:auto}
.tier .feat li{
  font-size:var(--fs-small); color:var(--dim); line-height:1.45;
  padding-left:18px; position:relative;
}
.tier .feat li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--accent);
}
.tier .btn{justify-content:center}

/* ── the device cluster ── */
.devices{display:flex; align-items:flex-start; gap:3.5%; margin-block:var(--s2)}
.dev{position:relative; flex:none; transition:transform var(--t-slow) var(--ease-out)}
/* Intrinsic ratios declared up front. The screens are positioned in
   percentages of the photo, so before the image arrives the device has
   no height, the screen collapses and the page inside cannot be fitted.
   Declaring the ratio also keeps the cards from jumping as the images
   land, which is half of a bad layout-shift score. */
.dev > img{width:100%; display:block; height:auto}
.dev-laptop > img{aspect-ratio:1652 / 1208}
.dev-phone  > img{aspect-ratio:305 / 621}
.dev-laptop{width:74%}
.dev-phone{width:20%; margin-top:2.43%}
.tier:hover .dev-laptop{transform:translateY(-3px)}
.tier:hover .dev-phone{transform:translateY(-6px)}

.screen{position:absolute; overflow:hidden; background:#0D1B2A}
.dev-laptop .screen{left:13.499%; top:4.222%; width:73.365%; height:63.079%}
.dev-phone  .screen{left:7.541%;  top:3.542%; width:86.230%; height:93.237%}
.zoom{position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform}
.dev-laptop .zoom{width:1440px}
.dev-phone  .zoom{width:390px}
.mini{will-change:transform}

/* Content sits BEHIND glass, not on top of the device. Three things
   sell it: a hard diagonal reflection, a dark rim so the panel is
   recessed rather than applied, and pulling the page's brightness down
   to the scene's exposure. Without these it reads as a screenshot
   taped to a photograph. */
.screen .mini{filter:brightness(.93) saturate(.95) contrast(.98)}
.screen::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(101deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 18%,
      transparent 34%, transparent 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 60%, rgba(0,0,0,.35) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55);
}

/* ══ the miniature sites ══
   One skeleton, themed per tier. Authored at the device's design width
   and deliberately TALLER than the screen: the overflow is what scrolls
   as the card passes the viewport, so the site is visibly running
   rather than sitting there as a screenshot. */
.mini{--m:#1F5FBF; --mink:#12161C; --mmut:#5B6068; --mbg:#fff; --mpale:#F4F6F9;
  background:var(--mbg); color:var(--mink); font-family:var(--font-ui)}
.mini .mnav{display:flex; align-items:center; gap:26px; padding:0 54px; height:88px;
  border-bottom:1px solid rgba(0,0,0,.07)}
.mini .mlogo{font-size:26px; font-weight:600; letter-spacing:-.02em}
.mini .mlogo b{color:var(--m)}
.mini .mlinks{display:flex; gap:26px; font-size:17px; color:var(--mmut); margin-left:18px}
.mini .mcta{margin-left:auto; background:var(--m); color:#fff; font-weight:600;
  font-size:17px; padding:14px 22px; border-radius:10px}
.mini .mhero{padding:54px 54px 40px}
.mini .mkick{font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--m); font-weight:600}
.mini .mhero h3{font-size:66px; line-height:1.02; letter-spacing:-.035em;
  font-weight:600; margin-top:20px}
.mini .mhero p{font-size:21px; color:var(--mmut); margin-top:20px; max-width:44ch;
  line-height:1.5}
.mini .mbtns{display:flex; gap:14px; margin-top:32px}
.mini .mb1{background:var(--m); color:#fff; font-weight:600; font-size:20px;
  padding:16px 28px; border-radius:11px}
.mini .mb2{border:2px solid rgba(0,0,0,.12); font-weight:600; font-size:20px;
  padding:14px 26px; border-radius:11px}
.mini .mcards{display:flex; gap:18px; padding:0 54px}
.mini .mcard{flex:1; background:var(--mpale); border-radius:15px; padding:28px}
.mini .mcard h4{font-size:23px; font-weight:600; margin-bottom:9px}
.mini .mcard p{font-size:16.5px; color:var(--mmut); line-height:1.45}
.mini .mband{margin-top:44px; padding:48px 54px; background:var(--mpale)}
.mini .mband h4{font-size:32px; font-weight:600; letter-spacing:-.03em}
.mini .mquotes{display:flex; gap:18px; margin-top:24px}
.mini .mq{flex:1; background:var(--mbg); border-radius:15px; padding:24px}
.mini .mq u{color:#E8A317; text-decoration:none; letter-spacing:2px; font-size:17px}
.mini .mq p{font-size:17px; line-height:1.5; margin:10px 0 12px}
.mini .mq b{font-size:14px; color:var(--mmut); font-weight:500}

/* The pages must run well past the bottom of the screen, or there is
   nothing for the scrub to move and the device reads as a screenshot.
   These blocks exist to give the sample real depth. */
.mini .mgal{padding:44px 54px 0}
.mini .mgal h4{font-size:30px; font-weight:600; letter-spacing:-.03em; margin-bottom:22px}
.mini .mgrid{display:flex; gap:18px}
.mini .mgrid span{flex:1; height:230px; border-radius:15px; background:var(--mpale);
  border:1px solid rgba(0,0,0,.05)}
.mini .mfoot{margin-top:44px; padding:46px 54px; background:var(--m); color:#fff}
.mini .mfoot h4{font-size:34px; font-weight:600; letter-spacing:-.03em}
.mini .mfoot p{font-size:19px; opacity:.86; margin-top:12px}
.mini .mfoot .mb1{background:#fff; color:var(--m); display:inline-block; margin-top:24px}

/* phone variant: same skeleton, phone proportions */
.mini-ph{}
.mini-ph .mnav{height:64px; padding:0 20px; gap:0}
.mini-ph .mlogo{font-size:17px}
.mini-ph .mlinks{display:none}
.mini-ph .mcta{font-size:12px; padding:9px 13px; border-radius:8px}
.mini-ph .mhero{padding:24px 20px 18px}
.mini-ph .mkick{font-size:10px}
.mini-ph .mhero h3{font-size:34px; margin-top:12px}
.mini-ph .mhero p{font-size:14px; margin-top:12px}
.mini-ph .mbtns{margin-top:18px; gap:9px}
.mini-ph .mb1,.mini-ph .mb2{font-size:14px; padding:12px 16px; border-radius:9px}
.mini-ph .mcards{flex-direction:column; padding:0 20px; gap:10px}
.mini-ph .mcard{padding:16px; border-radius:11px}
.mini-ph .mcard h4{font-size:15px; margin-bottom:5px}
.mini-ph .mcard p{font-size:12.5px}
.mini-ph .mband{margin-top:22px; padding:24px 20px}
.mini-ph .mband h4{font-size:20px}
.mini-ph .mquotes{flex-direction:column; gap:10px; margin-top:14px}
.mini-ph .mq{padding:16px; border-radius:11px}
.mini-ph .mq p{font-size:13px}
.mini-ph .mgal{padding:22px 20px 0}
.mini-ph .mgal h4{font-size:19px; margin-bottom:12px}
.mini-ph .mgrid{flex-direction:column; gap:10px}
.mini-ph .mgrid span{height:120px; border-radius:11px}
.mini-ph .mfoot{margin-top:22px; padding:26px 20px}
.mini-ph .mfoot h4{font-size:21px}
.mini-ph .mfoot p{font-size:13px; margin-top:8px}
.mini-ph .mfoot .mb1{margin-top:16px}

/* ── tier skins ──
   Deliberately three unrelated palettes and three different type
   voices. Blue-on-white was doing us real harm: it is the default
   every builder ships, it reads as Facebook, and three samples that
   look like one another quietly contradict the thing we charge for. */

/* Essential: deep pine and warm bone. Grounded, tradesman, not corporate. */
.mini.t-essential{
  --m:#12564A; --mink:#141A18; --mmut:#59645F; --mbg:#F7F5F0; --mpale:#EBE7DE;
}
.mini.t-essential .mlogo{text-transform:uppercase; letter-spacing:.06em; font-size:22px}
.mini.t-essential .mhero h3{font-weight:700; letter-spacing:-.04em}

/* Essential's split hero: copy beside a real photograph.
   STRUCTURE IS DECLARED HERE, in the block both devices share, and only
   the SIZES change per device below. Declaring a layout in the laptop
   block alone is exactly how the Signature menu collapsed into a
   paragraph on the phone last session. Scoped to t-essential because
   Flagship puts a canvas in .mhero and must not become a flex row. */
.mini.t-essential .mhero{display:flex; align-items:center}
.mini.t-essential .mhcopy{flex:1 1 0; min-width:0}
.mini.t-essential .mhshot{flex:0 0 auto; overflow:hidden; background:var(--mpale)}
.mini.t-essential .mhshot img{display:block; width:100%; height:100%; object-fit:cover}
/* the gallery holds photographs of real work, not empty plates */
.mini.t-essential .mgrid span{overflow:hidden; background:var(--mpale)}
.mini.t-essential .mgrid img{display:block; width:100%; height:100%; object-fit:cover}
.mini.t-essential .mcta,
.mini.t-essential .mb1{border-radius:4px}
.mini.t-essential .mcard,
.mini.t-essential .mq{border-radius:4px}
.mini.t-essential .mgrid span{border-radius:4px}

/* Essential split hero, sizes only. Laptop: copy left, photograph right,
   the shot running to the edge so it reads as a photograph rather than a
   card. Phone: the photograph goes on top, full width, which is what a
   trade site actually does on a handset. */
.mini-lap.t-essential .mhero{padding:0 0 0 54px; gap:48px; min-height:520px}
.mini-lap.t-essential .mhshot{width:620px; height:520px}
.mini-ph.t-essential .mhero{flex-direction:column; align-items:stretch;
  padding:0 0 18px; gap:0}
.mini-ph.t-essential .mhcopy{padding:20px 20px 0}
.mini-ph.t-essential .mhshot{order:-1; width:100%; height:190px}

/* Signature: terracotta on cream, serif display. Hospitality, editorial. */
.mini.t-signature{
  --m:#A8563C; --mink:#211812; --mmut:#6E5F55; --mbg:#FAF4EC; --mpale:#F0E5D8;
}
.mini.t-signature .mcta,
.mini.t-signature .mb1,
.mini.t-signature .mb2{border-radius:999px}
.mini.t-signature .mcard,
.mini.t-signature .mq,
.mini.t-signature .mgrid span{border-radius:2px}
.mini.t-signature .mkick{letter-spacing:.28em; font-weight:500}
.mini.t-signature .mhero h3{font-family:Georgia,'Times New Roman',serif; font-weight:400;
  letter-spacing:-.02em}
.mini.t-signature .mlogo{font-family:Georgia,serif; letter-spacing:.02em}
/* Flagship shows OUR work: the same near-black canvas and one accent
   the visitor is currently looking at. Selling the site with the site. */
.mini.t-flagship{
  --m:#5683DA; --mink:#EEF2F8; --mmut:#8D96A3; --mbg:#090A0C; --mpale:#111318;
}
/* The room film sits behind the hero copy, full bleed. Structure in the
   shared block, sizes per device below, so the phone cannot end up with
   a hero the laptop block alone knows how to lay out. */
.mini.t-flagship .mhero-room{position:relative; display:flex;
  flex-direction:column; justify-content:flex-end}
.mini.t-flagship .mroom{position:absolute; inset:0; width:100%; height:100%;
  display:block; background:#0B0C0E}
/* the copy has to stay readable over a moving picture, and a scrim is
   cheaper and steadier than restyling type per frame */
.mini.t-flagship .mhero-room::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,10,12,.10) 0%, rgba(9,10,12,.62) 58%,
    rgba(9,10,12,.88) 100%)}
.mini.t-flagship .mhero-room > *:not(.mroom){position:relative; z-index:1}
.mini-lap.t-flagship .mhero-room{height:600px; padding:0 54px 54px}
.mini-ph.t-flagship .mhero-room{height:300px; padding:0 20px 20px}

/* the gallery holds real frames, so the plates need to carry an image */
.mini.t-flagship .mgrid span{overflow:hidden}
.mini.t-flagship .mgrid img{display:block; width:100%; height:100%; object-fit:cover}

.mini.t-flagship .mnav{border-bottom:1px solid rgba(255,255,255,.08)}
.mini.t-flagship .mlogo{font-family:var(--font-mono); font-size:20px; letter-spacing:.24em}
.mini.t-flagship .mcta{background:transparent; border:1px solid rgba(255,255,255,.22);
  color:var(--mink)}
.mini.t-flagship .mhero h3{font-weight:300; letter-spacing:-.04em}
.mini.t-flagship .mcard{border:1px solid rgba(255,255,255,.08)}
.mini.t-flagship .mq{border:1px solid rgba(255,255,255,.08)}
.mini.t-flagship .mb2{border-color:rgba(255,255,255,.22)}
/* the signature visual, in miniature */
.mini.t-flagship .mhero{position:relative}
.mini.t-flagship .mfig{position:absolute; right:40px; top:-10px; width:420px; height:340px}
.mini-ph.t-flagship .mfig{position:relative; right:auto; top:auto; width:100%; height:150px;
  margin-top:14px}

@media (max-width: 1080px){
  .tiers{grid-template-columns:1fr; max-width:620px}
}

/* ═══════════════════════════════════════════════════════════════
   SIGNATURE - the restaurant. Its own structure and its own palette,
   sharing nothing with Essential but the device frame around it.

   The palette is the point of this pass. It was dark brown with a
   brass accent, which the founder read as terracotta and dated - and
   he is right, warm gold on near-black is the steakhouse look, the
   same vice palette we retired from our own site. So: a BONE ground,
   near-black serif, and one restrained deep olive. The three
   photographs are warm, so the cool green sits opposite them and the
   food supplies all the colour. Light hospitality reads current and
   expensive; dark and gold reads 2015.
   ═══════════════════════════════════════════════════════════════ */
.mini.t-signature{
  --sbone:#F6F3EC;      /* the ground */
  --sink:#17140F;       /* type */
  --smut:#6E6559;       /* supporting type */
  --solive:#3E5140;     /* the single accent */
  --sline:rgba(23,20,15,.14);
  background:var(--sbone); color:var(--sink);
  font-family:var(--font-ui);
}
.t-signature .sbrand,
.t-signature .stitle,
.t-signature .ssay,
.t-signature .smh h4,
.t-signature .sdish b,
.t-signature .sdish s{font-family:Georgia,"Times New Roman",serif; font-weight:400}
.t-signature .skick{
  display:block; font-size:14px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--solive); font-weight:500;
}
/* A dish row is STRUCTURAL, so it belongs here and not in the laptop
   block. It was only laid out there, and because these are spans the
   phone fell back to inline and the whole menu ran together as a
   paragraph with the prices buried mid-sentence. Anything that decides
   whether an element is a row or a word has to be shared; only the
   sizes differ per device. */
.t-signature .sdish{
  display:flex; align-items:baseline; gap:12px;
  border-bottom:1px solid var(--sline);
}
.t-signature .sdish i{flex:1; border-bottom:1px dotted rgba(23,20,15,.30)}
.t-signature .sdish s{text-decoration:none; color:var(--solive)}
.t-signature .scol{display:block}

/* photographs, with a warm gradient underneath so a slow or missing
   image never leaves a blank rectangle */
.t-signature .splate{
  display:block; background:linear-gradient(150deg,#3A2E24,#221A14 60%,#171210);
  background-size:cover; background-position:center; position:relative; overflow:hidden;
}
.t-signature .p1{background-image:url("assets/sig-interior.webp")}
.t-signature .p2{background-image:url("assets/sig-dish.webp")}
.t-signature .p3{background-image:url("assets/sig-fire.webp")}

/* ── laptop ── */
.mini-lap.t-signature .snav{
  display:flex; align-items:center; padding:0 56px; height:96px;
  border-bottom:1px solid var(--sline);
}
.mini-lap.t-signature .sbrand{font-size:27px; letter-spacing:.22em}
.mini-lap.t-signature .slinks{
  display:flex; gap:34px; margin-left:auto; font-size:16px;
  letter-spacing:.14em; color:var(--smut); text-transform:uppercase;
}
.mini-lap.t-signature .sbook{
  margin-left:38px; border:1px solid var(--solive); color:var(--solive);
  padding:14px 26px; font-size:14px; letter-spacing:.18em; text-transform:uppercase;
}
.mini-lap.t-signature .shero{position:relative; height:600px}
.mini-lap.t-signature .shero .splate{position:absolute; inset:0}
/* the hero photo carries light copy, so it keeps a dark foot */
.mini-lap.t-signature .shero .splate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,16,.05) 0%, rgba(20,17,16,.24) 46%,
             rgba(20,17,16,.84) 100%);
}
.mini-lap.t-signature .scopy{
  position:absolute; left:56px; right:56px; bottom:54px; z-index:2; color:#F7F4EE;
}
.mini-lap.t-signature .scopy .skick{color:#D9C9A4}
.mini-lap.t-signature .stitle{
  display:block; font-size:94px; line-height:1.02; letter-spacing:-.02em; margin-top:18px;
}
.mini-lap.t-signature .stitle i{font-style:italic; color:#D9C9A4}
.mini-lap.t-signature .ssub{
  display:block; font-size:21px; color:rgba(247,244,238,.76); margin-top:20px;
  max-width:50ch; line-height:1.5;
}
.mini-lap.t-signature .ssay{
  padding:84px 56px; text-align:center; font-size:44px; line-height:1.28;
  max-width:26ch; margin-inline:auto; border-bottom:1px solid var(--sline);
}
.mini-lap.t-signature .smenu{
  padding:72px 56px; display:grid; grid-template-columns:1fr 1fr; gap:22px 64px;
}
.mini-lap.t-signature .smh{grid-column:1/-1; margin-bottom:6px}
.mini-lap.t-signature .smh h4{font-size:46px; margin-top:14px}
.mini-lap.t-signature .sdish{padding:16px 0}
.mini-lap.t-signature .sdish b{font-size:22px; font-weight:400}
.mini-lap.t-signature .sdish s{font-size:21px}
/* Three equal columns. The first used to be 1.4fr, which is a normal
   editorial move at full size but reads as a mistake at the size these
   are actually seen: the eye registers "one is bigger" long before it
   registers why, and an accidental-looking asymmetry costs more than a
   deliberate one gains. The PHONE keeps its full-width first image,
   where stacking makes the hierarchy obvious. */
.mini-lap.t-signature .sgal{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; padding:0 56px;
}
.mini-lap.t-signature .sgal .splate{height:250px}
.mini-lap.t-signature .sbookbar{
  margin-top:72px; padding:52px 56px; display:flex; align-items:center; gap:16px;
  background:#EFEBE1; border-top:1px solid var(--sline);
}
.mini-lap.t-signature .sfld{
  flex:1; border:1px solid var(--sline); padding:20px 22px; font-size:17px; color:var(--smut);
}
.mini-lap.t-signature .sgo{
  background:var(--solive); color:#F6F3EC; padding:21px 34px; font-size:16px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.mini-lap.t-signature .sfoot{
  padding:44px 56px; display:flex; font-size:17px; color:var(--smut);
  border-top:1px solid var(--sline);
}
.mini-lap.t-signature .sfoot span:last-child{margin-left:auto; letter-spacing:.2em; color:var(--solive)}

/* ── phone: the same site, laid out as a phone would ── */
.mini-ph.t-signature .snav{
  display:flex; align-items:center; padding:0 22px; height:74px;
  border-bottom:1px solid var(--sline);
}
.mini-ph.t-signature .sbrand{font-size:17px; letter-spacing:.20em}
.mini-ph.t-signature .slinks{display:none}
.mini-ph.t-signature .sbook{
  margin-left:auto; border:1px solid var(--solive); color:var(--solive);
  padding:9px 14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.mini-ph.t-signature .shero{position:relative; height:440px}
.mini-ph.t-signature .shero .splate{position:absolute; inset:0}
.mini-ph.t-signature .shero .splate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,16,.05), rgba(20,17,16,.88));
}
.mini-ph.t-signature .scopy{position:absolute; left:22px; right:22px; bottom:26px; z-index:2; color:#F7F4EE}
.mini-ph.t-signature .scopy .skick{color:#D9C9A4; font-size:11px}
.mini-ph.t-signature .stitle{display:block; font-size:40px; line-height:1.06; margin-top:12px}
.mini-ph.t-signature .stitle i{font-style:italic; color:#D9C9A4}
.mini-ph.t-signature .ssub{
  display:block; font-size:15px; color:rgba(247,244,238,.78); margin-top:14px; line-height:1.5;
}
.mini-ph.t-signature .ssay{
  padding:40px 22px; text-align:center; font-size:24px; line-height:1.3;
  border-bottom:1px solid var(--sline);
}
.mini-ph.t-signature .smenu{padding:34px 22px; display:block}
.mini-ph.t-signature .smh h4{font-size:27px; margin-top:10px}
.mini-ph.t-signature .smh{margin-bottom:6px}
.mini-ph.t-signature .sdish{padding:13px 0}
.mini-ph.t-signature .sdish b{font-size:15px}
.mini-ph.t-signature .sdish s{font-size:15px}
.mini-ph.t-signature .sgal{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 22px;
}
.mini-ph.t-signature .sgal .splate{height:120px}
.mini-ph.t-signature .sgal .splate:first-child{grid-column:1/-1; height:150px}
.mini-ph.t-signature .sbookbar{
  margin-top:34px; padding:26px 22px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:#EFEBE1; border-top:1px solid var(--sline);
}
.mini-ph.t-signature .sfld{border:1px solid var(--sline); padding:14px; font-size:13px; color:var(--smut)}
.mini-ph.t-signature .sgo{
  grid-column:1/-1; background:var(--solive); color:#F6F3EC; padding:16px; text-align:center;
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.mini-ph.t-signature .sfoot{
  padding:26px 22px; display:flex; font-size:13px; color:var(--smut);
  border-top:1px solid var(--sline);
}
.mini-ph.t-signature .sfoot span:last-child{margin-left:auto; color:var(--solive); letter-spacing:.18em}