/* Fulcrena — website stylesheet v0.2 (v-next palette + Inter Display + Inter)
   Palette: DR-058 candidate (Earth · Water · Metal)
   Typography: Brand Identity v2.1 §3 — Inter Display ≥15pt, Inter <15pt
   Fonts: self-hosted static WOFF2 from rsms/inter v4.1 (OFL 1.1)
*/

/* ==== Font faces ==== */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/Inter-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/Inter-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/Inter-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/InterDisplay-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Inter Display';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('fonts/InterDisplay-ExtraBold.woff2') format('woff2');
}

/* ==== Tokens ==== */
:root{
  /* v-next palette (DR-058) */
  --navy:#0D1B2A;              /* Deep Navy — anchor, dark backgrounds */
  --navy-2:#122437;            /* Deep Navy tint — dark card surfaces */
  --gold:#C49B40;              /* Earth Gold — canonical per DR-059 ratification (2026-09-14). Premium highlight, CTAs, logomark pivot. LARGE-DISPLAY ONLY on warm-white (2.9:1). */
  --gold-2:#a5822f;            /* Earth Gold shade — hover states, small-caps eyebrows */
  --gold-ink:#8A6A1F;          /* Earth Gold Deep — DR-058 Option A: body-copy accents on warm white (5.8:1 AA pass). */
  --gold-ink-2:#6f5518;        /* Earth Gold Deep hover */
  --water:#184A87;             /* Deep Water Blue — links, digital accents */
  --water-2:#153f74;           /* Deep Water Blue shade — hover */
  --silver:#B8BCC0;            /* Soft Silver Gray — borders, dividers */
  --silver-2:#d4d7db;          /* Silver tint — softer dividers */
  --charcoal:#3A3E44;          /* Charcoal — body text, captions */
  --charcoal-2:#5a5f66;        /* Charcoal light — secondary text */
  --white:#F7F5F0;             /* Warm White — primary background */
  --white-2:#EFEDE8;           /* Warm White shade — alt section background */

  /* Semantic status (retained from v2.1; not addressed by v-next; DR-058 §Open governance) */
  --warn:#8A3B1E;
  --ok:#3E6B2A;

  /* Legacy aliases (retained for zero-touch backward compat on existing HTML) */
  --cream:var(--white);
  --cream-2:var(--white-2);
  --line:var(--silver);
  --muted:var(--charcoal-2);
  --text:var(--charcoal);
  --ink:var(--charcoal);

  /* Type families with per-format fallback stacks per brand v2.1 §3.4 */
  --f-display:'Inter Display','Segoe UI Semibold','Helvetica Neue Bold','Arial Bold',system-ui,sans-serif;
  --f-body:'Inter','Segoe UI','Helvetica Neue',Arial,system-ui,sans-serif;

  /* Layout */
  --wrap:1180px;
  --pad-x:clamp(20px,4vw,44px);
}

/* ==== Reset ==== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  color:var(--charcoal);
  background:var(--white);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ==== Layout ==== */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ==== Header ==== */
.site-hdr{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,0.06)}
.site-hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;text-decoration:none;color:#fff;flex-shrink:0}
/* Canonical horizontal lockup (3068×1080 = 2.84:1) — dark-variant PNG for navy header.
   Includes mark + wordmark + tagline as one intentional composition per brand v2.1.
   Height needs to be generous because the mark occupies only ~35% of the lockup's vertical space. */
.brand-lockup{height:64px;width:auto;display:block}
@media(min-width:640px){.brand-lockup{height:76px}}
@media(min-width:1024px){.brand-lockup{height:88px}}
/* Header link should not underline */
.site-hdr a.brand{text-decoration:none}
.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* Nav links at 14px → below 15pt threshold → Inter (body), per v2.1 §3.1 */
.nav a{color:rgba(255,255,255,0.86);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:6px;font-weight:500;font-family:var(--f-body);white-space:nowrap}
.nav a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.nav a.here{color:var(--gold)}
.nav a.cta{background:var(--gold);color:var(--navy);font-weight:700;padding:9px 16px;margin-left:6px}
.nav a.cta:hover{background:#d1a94a}
/* Mobile: hide secondary nav items, keep just CTA to avoid vertical stack. */
@media(max-width:720px){
  /* Mobile: keep every nav link reachable; wrap onto a second row under the logo. */
  .site-hdr .wrap{flex-wrap:wrap;gap:6px;padding-top:12px;padding-bottom:12px}
  .brand-lockup{height:48px}
  .nav{width:100%;justify-content:flex-start;gap:2px 4px}
  .nav a{padding:7px 9px;font-size:13px}
  .nav a.cta{margin-left:0;padding:8px 12px;font-size:13px}
}

/* ==== Type ==== */
/* Eyebrow: 12px → below 15pt → Inter Semibold */
.eyebrow{font-family:var(--f-body);font-size:12px;letter-spacing:0.22em;text-transform:uppercase;font-weight:600;color:var(--gold-2);margin:0 0 14px}
.eyebrow.on-dark{color:var(--gold)}

/* Headings: all sized ≥15pt (20px) → Inter Display Bold or ExtraBold per v2.1 §3.1 */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;color:var(--navy);margin:0 0 0.5em;line-height:1.1;letter-spacing:-0.015em}
h1{font-size:clamp(34px,4vw,52px);font-weight:800;letter-spacing:-0.02em}
h2{font-size:clamp(30px,4vw,46px);letter-spacing:-0.018em}
h3{font-size:clamp(21px,2.2vw,26px);line-height:1.2;letter-spacing:-0.012em}
h4{font-size:19px;line-height:1.25;letter-spacing:-0.01em}

p{margin:0 0 1em}
/* Lede: min 19px (≥15pt) → Inter Display permissible, but for readability at long-form lede we prefer Inter body */
.lede{font-family:var(--f-body);font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--charcoal);max-width:64ch;font-weight:400}
strong{font-weight:700;color:var(--navy)}

/* Links on warm-white body surfaces — DR-058 Option B: Deep Water Blue #184A87.
   8.3:1 contrast on warm white — WCAG AAA. Uses the palette's existing digital-accent token.
   Gold remains reserved for headings, CTAs, dividers, and the mark's pivot dot. */
a{color:var(--water);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:rgba(24,74,135,0.35)}
a:hover{color:var(--water-2);text-decoration-color:var(--water-2)}

/* ==== Hero ==== */
.hero{background:var(--navy);color:#fff;padding:clamp(60px,10vw,120px) 0 clamp(50px,8vw,90px);position:relative;overflow:hidden}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:#fff;max-width:28ch}
.hero .sub{font-size:clamp(18px,1.5vw,21px);color:rgba(255,255,255,0.82);max-width:60ch;margin-top:20px;line-height:1.45}
.hero .hero-subhead{font-size:clamp(18px,1.5vw,21px);color:rgba(255,255,255,0.82);max-width:70ch;margin-top:20px;font-weight:400;line-height:1.45;font-family:var(--f-body)}
.hero .body{color:rgba(255,255,255,0.82);max-width:64ch;margin-top:20px;line-height:1.45}
.hero-frame{position:absolute;inset:0;background:radial-gradient(700px 400px at 90% 8%, rgba(196,155,64,0.10), transparent 60%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero a{color:#fff}
.hero a:hover{color:var(--gold)}

/* ==== Buttons ==== */
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* Button text 15px = exactly 15pt boundary; per v2.1 §3.1 "15 pt and above use Inter Display" — so buttons use Inter Display */
.btn{display:inline-block;padding:14px 24px;border-radius:6px;font-weight:700;font-size:15px;text-decoration:none;transition:transform .15s ease,background .15s ease;letter-spacing:0.005em;line-height:1.2;font-family:var(--f-display)}
.btn.primary{background:var(--gold);color:var(--navy)}
.btn.primary:hover{background:#d1a94a;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.35)}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,0.06)}
.btn.dark{background:var(--navy);color:#fff}
.btn.dark:hover{background:#0b1826}
.btn.line{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn.line:hover{background:var(--navy);color:#fff}
.btn.water{background:var(--water);color:#fff}
.btn.water:hover{background:var(--water-2);transform:translateY(-1px)}

.draft-flag{margin-top:26px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.55);font-family:var(--f-body)}
.draft-flag.on-light{color:var(--charcoal-2)}

/* ==== Sections ==== */
section{padding:clamp(60px,8vw,100px) 0}
section.tight{padding:clamp(40px,5vw,64px) 0}
section.dark{background:var(--navy);color:#fff}
/* Note: intentionally NOT setting h4 to white here — outcome cards (.oc) sit inside section.dark
   but have white backgrounds and need dark labels. Cards that legitimately need white headings
   on the navy surface itself use section.dark h2/h3 only. */
section.dark h2,section.dark h3{color:#fff}
section.dark .lede{color:rgba(255,255,255,0.82)}
section.dark .muted{color:rgba(255,255,255,0.6)}
section.dark a{color:var(--gold);text-decoration-color:rgba(196,155,64,0.5)}
section.dark a:hover{color:#d1a94a}
section.alt{background:var(--white-2)}
.rule{border:0;border-top:1px solid var(--silver);margin:0}

/* ==== Cards / Grids ==== */
.grid{display:grid;gap:24px}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:1fr}.g-2{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--silver);border-radius:10px;padding:28px}
.card h3{margin-top:0}
.service-build-cards{margin:24px 0 32px;gap:24px}
.service-build-cards .card{padding:24px}
.service-build-cards .card h3{margin:0 0 12px}
.service-build-cards .card p{margin:0}
section.dark .card{background:var(--navy-2);border-color:rgba(255,255,255,0.09)}
section.dark .card p{color:rgba(255,255,255,0.78)}

/* Tags — 11px = below 15pt → Inter */
.tag{display:inline-block;font-family:var(--f-body);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--gold-2);padding:5px 10px;border:1px solid var(--gold);border-radius:20px;margin-bottom:14px}
section.dark .tag{color:var(--gold);border-color:rgba(196,155,64,0.65)}

/* ==== Stats ==== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
@media (max-width:900px){.stats{grid-template-columns:1fr}}
.stat{border-left:3px solid var(--gold);padding-left:22px}
/* Stat numbers hero-sized, locked at 56px across breakpoints so all three stats (60–70%, >50%, 80%) render at identical size and never wrap. */
.stat .num{font-family:var(--f-display);font-weight:800;font-size:56px;line-height:1;color:var(--navy);margin-bottom:12px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
@media(max-width:480px){.stat .num{font-size:48px}}
.stat .cap{font-size:15px;color:var(--charcoal);margin-bottom:8px;font-family:var(--f-display);font-weight:700;line-height:1.35}
.stat .src{font-size:12px;color:var(--charcoal-2);line-height:1.5;font-family:var(--f-body)}

/* ==== Journey / Lifecycle ==== */
.stages{list-style:none;padding:0;margin:0;display:grid;gap:20px;grid-template-columns:repeat(3,1fr);counter-reset:s}
@media(max-width:900px){.stages{grid-template-columns:1fr}}
.stages li{background:#fff;border:1px solid var(--silver);padding:32px 28px;border-radius:10px;position:relative}
.stages li .n{font-family:var(--f-display);font-weight:800;font-size:56px;color:var(--gold);line-height:1;margin-bottom:12px;display:block;letter-spacing:-0.02em}
.stages li h3{margin:0 0 10px}
.stages li p{margin:0;color:var(--charcoal);font-size:15.5px}

.arc{margin-top:34px;padding:26px 28px;background:#fff;border:1px solid var(--silver);border-radius:10px;border-left:4px solid var(--gold)}
.arc .arc-lbl{font-family:var(--f-body);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:8px}
.arc p{margin:0}

/* ==== Buyer profile ==== */
.profile{background:#fff;border:1px solid var(--silver);border-radius:10px;padding:28px}
.profile .p-tag{font-family:var(--f-body);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--gold-2);margin-bottom:8px}
.profile h3{margin-top:0;font-size:22px}
.profile ul{margin:14px 0 0;padding-left:20px}
.profile li{margin-bottom:6px;font-size:15px;color:var(--charcoal)}

/* ==== Table ==== */
table.rate{width:100%;border-collapse:collapse;margin-top:18px;background:#fff;border:1px solid var(--silver);border-radius:10px;overflow:hidden}
/* Table headers 15px → Inter Display per v2.1 §3.1 15pt boundary */
table.rate th,table.rate td{padding:16px 18px;text-align:left;font-size:15px;border-bottom:1px solid var(--silver)}
table.rate th{background:var(--navy);color:#fff;font-weight:700;letter-spacing:0.01em;font-family:var(--f-display)}
table.rate td{font-family:var(--f-body)}
table.rate tr:last-child td{border-bottom:0}
table.rate td.pending{color:var(--charcoal-2);font-style:italic}

/* ==== Founder ==== */
.founder-wrap{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:start}
@media(max-width:900px){.founder-wrap{grid-template-columns:1fr;gap:34px}}

/* Founder opener — portrait sits inline with first-person copy on desktop; stacks above on mobile */
.founder-opener{display:grid;grid-template-columns:190px 1fr;gap:36px;align-items:start}
@media(max-width:720px){.founder-opener{grid-template-columns:1fr;gap:24px;justify-items:start}}
.founder-portrait{margin:0;width:190px;max-width:100%}
.founder-portrait img{display:block;width:100%;height:auto;border-radius:8px;background:var(--silver)}
@media(max-width:720px){.founder-portrait{width:160px}}
/* Founder quote is display-sized (22–28px) → Inter Display Bold */
.founder-quote{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.35;color:var(--navy);border-left:3px solid var(--gold);padding-left:22px;margin:22px 0 0;letter-spacing:-0.01em}
.creds{list-style:none;padding:0;margin:0}
.creds li{padding:16px 0;border-bottom:1px solid var(--silver);color:var(--charcoal);font-size:15.5px;line-height:1.55}
.creds li:last-child{border-bottom:0}

/* ==== Pull ==== */
.pull{background:var(--white-2);padding:clamp(60px,8vw,100px) 0}
.pull .mark{font-family:var(--f-display);font-weight:800;color:var(--gold);font-size:72px;line-height:0.6;margin:0 0 16px}
.pull .body{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,2.8vw,32px);line-height:1.35;color:var(--navy);max-width:36ch;margin:0;letter-spacing:-0.012em}
.pull .attrib{font-family:var(--f-body);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--charcoal-2);margin-top:22px}

/* ==== Outcomes ==== */
.oc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
@media(max-width:900px){.oc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.oc-grid{grid-template-columns:1fr}}
.oc{background:#fff;border:1px solid var(--silver);border-top:3px solid var(--gold);padding:22px;border-radius:10px}
/* Outcome titles 17px → Inter Display Bold */
.oc h4{margin:0 0 8px;font-size:17px;color:var(--navy);font-family:var(--f-display);font-weight:700;letter-spacing:-0.005em}
.oc p{margin:0;font-size:14px;color:var(--charcoal);line-height:1.5;font-family:var(--f-body)}

/* ==== Notice ==== */
.notice{margin-top:20px;padding:16px 20px;background:rgba(196,155,64,0.10);border-left:3px solid var(--gold);border-radius:4px;font-size:14px;color:var(--charcoal);font-family:var(--f-body)}
.notice strong{color:var(--warn)}
.notice.dark{background:rgba(196,155,64,0.16);color:#fff}
.notice.dark strong{color:var(--gold)}

/* ==== Utilities ==== */
.center{text-align:center}
.muted{color:var(--charcoal-2)}
.small{font-size:14px}
.top-tag{display:inline-block;font-family:var(--f-body);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin-bottom:14px}

/* ==== Footer ==== */
.site-foot{background:var(--navy);color:rgba(255,255,255,0.7);padding:48px 0 40px;margin-top:0;font-size:14px}
/* Footer section titles 13px → Inter (below 15pt) */
.site-foot h5{color:#fff;font-family:var(--f-body);font-weight:700;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;margin:0 0 14px}
.site-foot a{color:rgba(255,255,255,0.7);text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex;align-items:center;margin-bottom:14px}
/* Footer uses the same canonical horizontal lockup as the header, tuned to a footer-appropriate height. */
.foot-brand .foot-lockup{height:56px;width:auto;display:block}
@media (max-width:560px){.foot-brand .foot-lockup{height:48px}}
.site-foot a{text-decoration:none}
.foot-tag{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.55;max-width:34ch}
.site-foot .foot-list{list-style:none;padding:0;margin:0}
.site-foot .foot-list li{margin-bottom:8px;font-size:13.5px}
.site-foot .foot-hint{color:rgba(255,255,255,0.5);font-size:12px;margin-left:4px}
.foot-bar{border-top:1px solid rgba(255,255,255,0.09);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(255,255,255,0.5)}
.foot-bar .draft{color:var(--gold);letter-spacing:0.14em;text-transform:uppercase;font-weight:600}

/* ==== Prose page ==== */
.prose{max-width:var(--wrap);margin:0 auto}
.prose p{color:var(--charcoal)}
.stub-tile{background:#fff;border:1px solid var(--silver);border-left:4px solid var(--gold);border-radius:10px;padding:28px;margin-bottom:16px}
.stub-tile h3{margin-top:0;margin-bottom:8px}
.stub-tile p{margin:0;color:var(--charcoal);font-size:15px}

/* ==== Reduced motion ==== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn.primary:hover,.btn.water:hover{transform:none}
}


/* v1.3 consistency pass (2026-09-29): one text measure and one size per role across all pages */
main .wrap p.lede, main .wrap p.body, main .wrap p.sub, main .wrap p.hero-subhead{max-width:none}
.hero .body, .hero .sub, .hero .hero-subhead{font-size:clamp(18px,1.5vw,21px)}
.prose h2{font-size:clamp(24px,2.4vw,30px);margin-top:44px}
.stub-tile p{font-size:17px}
section[id]{scroll-margin-top:110px}

.founder-cap{margin-top:10px;font-size:15px;line-height:1.4;color:inherit}
.founder-cap strong{font-size:16px}

.prose p.eyebrow{color:var(--gold-2);margin-top:48px}
.prose p.eyebrow:first-child{margin-top:0}

/* Company founder block: image+caption column; text column spans image top to caption bottom */
.founder-opener{grid-template-columns:216px 1fr;gap:40px;align-items:stretch}
.founder-portrait{width:216px}
.founder-portrait{display:flex;flex-direction:column}
.founder-portrait img{flex:1 1 auto;height:auto;min-height:230px;object-fit:cover;object-position:center top}
.founder-cap{white-space:nowrap;font-size:12px;letter-spacing:-0.01em;margin-top:10px;line-height:1.3;text-align:left}
.founder-cap strong{font-size:12px}
.founder-opener > div{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.founder-opener > div p{margin:0}
@media(max-width:720px){.founder-opener{grid-template-columns:1fr;gap:24px}.founder-opener > div{gap:16px}.founder-portrait{width:216px}.founder-portrait img{flex:none;height:230px}}

/* Consent bar: equal-weight Accept / Decline */
#consent-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:760px;margin:0 auto;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,0.18);border-radius:10px;padding:16px 20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;box-shadow:0 8px 30px rgba(0,0,0,0.35)}
#consent-bar p{margin:0;flex:1 1 320px;font-size:14px;line-height:1.5;color:rgba(255,255,255,0.9)}
#consent-bar a{color:var(--gold);text-decoration:underline}
#consent-bar .consent-actions{display:flex;gap:10px}
#consent-bar button{font:600 14px var(--f-body);padding:10px 20px;border-radius:6px;border:1px solid var(--gold);background:transparent;color:#fff;cursor:pointer;min-width:96px}
#consent-bar button:hover{background:var(--gold);color:var(--navy)}
#consent-bar button:focus-visible{outline:2px solid #fff;outline-offset:2px}
