/* ===========================================================
   NICECARE PHARMACEUTICAL — "Grid" design
   Swiss-technical: hairline rules, numbered sections,
   monospace metadata, no shadows, no rounded cards.
   =========================================================== */
:root{
  --red:#FF1938; --red-deep:#CE0E27; --slate:#4C6366;
  --ink:#0C1416; --body:#4E6165;
  --paper:#FCFCFA; --paper-2:#F2F2EE; --white:#fff;
  --rule:#0C1416; --rule-soft:rgba(12,20,22,.16); --rule-faint:rgba(12,20,22,.08);
  --shell:min(1400px,94vw);
  --gut:max(3vw,(100vw - 1400px)/2);   /* the page margin either side of --shell */
  --e:cubic-bezier(.16,.84,.34,1);
}

/* ---- named patient switch (see site-config.js) ---- */
[data-npi="without"]{display:none}
html.npi-off [data-npi="only"]{display:none!important}
html.npi-off [data-npi="without"]{display:revert}
html.mi-off [data-mi="only"]{display:none!important}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:"Space Grotesk","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
p{margin:0 0 1.1em}
a{color:inherit}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
::selection{background:var(--red);color:#fff}
.shell{width:var(--shell);margin-inline:auto}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
section{padding:0;position:relative}
.band{padding:clamp(56px,6vw,96px) 0}
.band-sm{padding:clamp(34px,3.6vw,52px) 0}
.ruled{position:relative}
.ruled::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--shell);height:1px;background:var(--rule)}

/* The numbered label is the section's name, so it is the biggest thing in the
   section. The line under it reads as the section's subtitle. */
.sec-label{display:flex;align-items:baseline;gap:clamp(12px,1.3vw,20px);padding-bottom:clamp(14px,1.6vw,20px);
  margin-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid var(--rule-soft);flex-wrap:wrap}
.sec-label .n{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(13px,1.2vw,17px);
  color:var(--red);letter-spacing:.06em;flex:none}
.sec-label .t{font-family:"Space Grotesk","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:500;
  font-size:clamp(27px,3.5vw,46px);line-height:1.02;letter-spacing:-.035em;
  text-transform:none;color:var(--ink)}
.sec-label .r{margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;color:var(--body);
  letter-spacing:.08em;text-transform:uppercase;align-self:flex-end;padding-bottom:3px}
/* the statement under the section name — a subtitle now, not the headline */
.h-sec{font-size:clamp(19px,2vw,27px);line-height:1.22;letter-spacing:-.02em;max-width:46ch;margin-bottom:16px}
.lede{font-size:clamp(17px,1.7vw,19.5px);max-width:60ch;margin:0}

.btn{display:inline-flex;align-items:center;gap:12px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:16px 26px;border:1px solid var(--rule);background:transparent;color:var(--ink);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .3s var(--e),border-color .3s var(--e)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .38s var(--e);z-index:-1}
.btn:hover{color:var(--paper)}
.btn:hover::before{transform:translateY(0)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{border-color:var(--ink);color:#fff}
.btn-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn-light::before{background:#fff}
.btn-light:hover{color:var(--ink);border-color:#fff}
.txtlink{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid var(--rule-soft);padding-bottom:4px;transition:color .3s var(--e),border-color .3s var(--e)}
.txtlink:hover{color:var(--red);border-color:var(--red)}
.txtlink em{font-style:normal;transition:transform .3s var(--e)}
.txtlink:hover em{transform:translateX(4px)}

/* ---------------- header ---------------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.72)}
.topbar-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:26px;min-height:38px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--red)}
.topbar .right{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.topbar .flag{color:var(--red)}
.head{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--rule)}
.head-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:20px;min-height:92px}
.brand img{max-height:54px;width:auto}
.nav{display:flex;margin-left:auto;align-items:stretch;align-self:stretch}
.nav > li{display:flex;align-items:stretch;border-left:1px solid var(--rule-faint);position:relative}
.nav > li:last-child{border-right:1px solid var(--rule-faint)}
.nav > li > a{display:flex;align-items:center;gap:8px;padding:0 24px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative;transition:color .28s var(--e)}
.nav > li > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--e)}
.nav > li > a:hover{color:var(--red)}
.nav > li > a:hover::after,.nav > li > a[aria-current="page"]::after{transform:scaleX(1)}
.nav .sub{position:absolute;top:100%;left:-1px;min-width:330px;background:var(--paper);border:1px solid var(--rule);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .26s var(--e),transform .26s var(--e),visibility 0s linear .26s;z-index:20}
.nav > li.open .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav .sub a{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:14px 20px;border-bottom:1px solid var(--rule-faint);text-decoration:none;transition:background .25s var(--e)}
.nav .sub li:last-child a{border-bottom:0}
.nav .sub a:hover{background:var(--paper-2)}
.nav .sub .idx{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11px;color:var(--red);letter-spacing:.08em;padding-top:3px}
.nav .sub b{display:block;font-size:15.5px;color:var(--ink);font-weight:500}
.nav .sub small{display:block;font-size:13px;color:var(--body);margin-top:2px}
.head-cta{align-self:stretch;display:flex;border-left:1px solid var(--rule-faint)}
.head-cta a{display:flex;align-items:center;padding:0 26px;background:var(--red);color:#fff;text-decoration:none;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;transition:background .3s var(--e)}
.head-cta a:hover{background:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);padding:13px;cursor:pointer}
.burger i{display:block;width:20px;height:1.5px;background:var(--ink);margin:4px 0;transition:transform .3s var(--e),opacity .25s var(--e)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------------- hero ---------------- */
.hero{border-bottom:1px solid var(--rule);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr}
.hero-l{padding:clamp(44px,5vw,80px) clamp(28px,3vw,54px) clamp(36px,4vw,56px) 0;border-right:1px solid var(--rule)}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,42px);color:var(--body)}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta i{width:6px;height:6px;background:var(--red);display:block}
.hero h1{font-size:clamp(38px,6.6vw,96px);line-height:.96;letter-spacing:-.045em;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-sub{font-size:clamp(17px,1.75vw,20px);max-width:48ch;margin-bottom:34px}
.hero-acts{display:flex;gap:14px;flex-wrap:wrap}
.hero-r{position:relative;min-height:clamp(340px,42vw,560px);background:var(--paper-2)}
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;background:var(--ink);color:#fff;padding:16px 22px;display:flex;align-items:center;gap:16px}
.hero-cap .idx{color:var(--red);white-space:nowrap}
.hero-cap .lbl{flex:1;color:rgba(255,255,255,.85)}
.hero-cap button{background:none;border:0;cursor:pointer;color:#fff;padding:6px;line-height:0;transition:color .3s var(--e)}
.hero-cap button:hover{color:var(--red)}
.hero-cap svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}

.ticker{background:var(--ink);color:#fff;overflow:hidden;display:flex;border-bottom:1px solid var(--rule)}
.ticker-track{display:flex;flex:none;animation:tick 42s linear infinite;white-space:nowrap}
.ticker-track span{display:inline-flex;align-items:center;gap:28px;padding:13px 28px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.ticker-track span::after{content:"";width:5px;height:5px;background:var(--red);display:block}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------------- figures ---------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule-soft)}
.fig{padding:clamp(28px,3vw,42px) clamp(18px,2vw,30px);border-right:1px solid var(--rule-soft)}
.fig .n{display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.05em;color:var(--ink);font-weight:500}
.fig .n sup{color:var(--red);font-size:.45em;vertical-align:super;margin-left:2px}
.fig .l{display:block;margin-top:12px;font-size:15px}

/* ---------------- index list ---------------- */
.ilist{border-top:1px solid var(--rule-soft);overflow-x:clip}
.irow{display:grid;grid-template-columns:70px 1.05fr 1.45fr auto;gap:clamp(16px,2.4vw,40px);align-items:center;padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;position:relative;transition:padding .35s var(--e)}
.irow::before{content:"";position:absolute;left:-3vw;right:-3vw;top:0;bottom:0;background:var(--paper-2);opacity:0;transition:opacity .35s var(--e);z-index:-1}
.irow:hover::before{opacity:1}
.irow:hover{padding-left:16px}
.irow .idx{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;color:var(--red);letter-spacing:.08em}
.irow h3{font-size:clamp(20px,2.3vw,30px);letter-spacing:-.03em}
.irow p{margin:0;font-size:15.5px;max-width:52ch}
.irow .go{width:42px;height:42px;border:1px solid var(--rule-soft);display:grid;place-items:center;transition:background .3s var(--e),border-color .3s var(--e)}
.irow:hover .go{background:var(--red);border-color:var(--red)}
.irow .go svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.8;transition:stroke .3s var(--e)}
.irow:hover .go svg{stroke:#fff}

/* ---------------- cells ---------------- */
.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));border-top:1px solid var(--rule-soft);border-left:1px solid var(--rule-soft)}
.cell{padding:clamp(26px,2.8vw,38px);border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);position:relative;text-decoration:none;display:block;transition:background .35s var(--e)}
.cell:hover{background:var(--paper-2)}
.cell .idx{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11.5px;color:var(--red);letter-spacing:.1em;display:block;margin-bottom:18px}
.cell h3{font-size:21px;margin-bottom:10px;letter-spacing:-.025em}
.cell p{margin:0;font-size:15.5px}
.cell::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--red);transition:width .45s var(--e)}
.cell:hover::after{width:100%}

/* ---------------- process ---------------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule-soft)}
.pstep{padding:clamp(26px,2.8vw,38px);border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);counter-increment:ps}
.proc{counter-reset:ps}
.pstep::before{content:counter(ps,decimal-leading-zero);display:block;font-family:"Space Grotesk",sans-serif;font-size:clamp(40px,4.4vw,58px);line-height:1;letter-spacing:-.05em;color:var(--red);margin-bottom:22px}
.pstep h3{font-size:20px;margin-bottom:10px;letter-spacing:-.025em}
.pstep p{margin:0;font-size:15.5px}

/* ---------------- split ---------------- */
/* These sections sit inside the page margin like every other section — the
   photo stops at the same line, it does not run to the edge of the screen. */
.split{display:grid;grid-template-columns:1fr 1fr;width:var(--shell);margin-inline:auto;
  border:1px solid var(--rule);border-bottom:0}
.split + .split{border-top:1px solid var(--rule)}
.split:has(+ :not(.split)){border-bottom:1px solid var(--rule);margin-bottom:clamp(56px,6vw,96px)}
.split > div{padding:clamp(40px,4.4vw,72px) clamp(26px,3vw,56px)}
.split.flip > .sp-media{order:2}
/* The photo is never shorter than 80% of its own width (the ::before sets that
   floor), and when the text beside it runs longer the photo grows with it, so
   there is never a block of empty background under the picture. Either way it
   fills its box completely — no padding, no border, no gaps. */
.sp-media{padding:0!important;border:0!important;background:var(--paper-2);
  display:block;min-height:0;overflow:hidden;position:relative;line-height:0}
.sp-media::before{content:"";display:block;padding-top:80%}
.sp-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center;display:block;border:0}
/* band image on the About page, inside the page margin as well */
.framed{border:0;background:var(--paper-2);overflow:hidden;line-height:0}
.framed img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:center}

.ticks{display:grid;margin:26px 0 30px;border-top:1px solid var(--rule-soft)}
.ticks li{padding:14px 0 14px 34px;border-bottom:1px solid var(--rule-soft);position:relative;font-size:16px}
.ticks li::before{content:"";position:absolute;left:0;top:19px;width:13px;height:7px;border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);transform:rotate(-45deg)}

.spec{border-top:1px solid var(--rule);margin:0}
.spec .r{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule-faint)}
.spec dt{margin:0;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--body)}
.spec dd{margin:0;color:var(--ink);font-weight:500;text-align:right;font-size:15.5px}

.note{border:1px solid var(--rule);border-left:3px solid var(--red);padding:24px 26px;margin-top:30px;background:var(--white)}
.note p{margin:0;font-size:16px}
.note strong{color:var(--ink)}
.docs{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:30px;padding:22px 24px;border:1px dashed var(--rule-soft);background:var(--white)}
.docs .mono{color:var(--red)}
.docs p{margin:0;font-size:15.5px}
.docs strong{color:var(--ink)}

/* ---------------- journal ---------------- */
.journal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border-top:1px solid var(--rule-soft);border-left:1px solid var(--rule-soft)}
.jcard{padding:clamp(26px,2.8vw,36px);border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);text-decoration:none;display:flex;flex-direction:column;transition:background .35s var(--e)}
.jcard:hover{background:var(--paper-2)}
.jmeta{display:flex;gap:12px;align-items:center;margin-bottom:20px;color:var(--body);flex-wrap:wrap}
.jmeta b{color:var(--red);font-weight:400}
.jcard h3{font-size:22px;line-height:1.22;margin-bottom:12px;letter-spacing:-.028em}
.jcard p{font-size:15.5px;flex:1;margin-bottom:18px}

.cta{background:var(--ink);color:rgba(255,255,255,.76);border-top:1px solid var(--rule)}
.cta h2{color:#fff;font-size:clamp(28px,3.8vw,52px);max-width:17ch}
.cta p{max-width:44ch;margin:16px 0 0}
.cta-in{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}

.phead{border-bottom:1px solid var(--rule);padding:clamp(40px,4.4vw,72px) 0 clamp(36px,4vw,60px)}
.crumbs{display:flex;gap:12px;align-items:center;margin-bottom:26px;color:var(--body);flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--body)}
.crumbs a:hover{color:var(--red)}
.crumbs i{width:16px;height:1px;background:var(--rule-soft);display:block}
.phead h1{font-size:clamp(36px,5.6vw,78px);letter-spacing:-.045em;max-width:17ch;margin-bottom:20px}
.phead p{font-size:clamp(17px,1.7vw,19.5px);max-width:58ch;margin:0}

/* ===========================================================
   SINGLE SERVICE PAGE
   =========================================================== */
.svc-head{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.svc-head-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,64px);align-items:center;
  padding:clamp(34px,4vw,64px) 0}
.svc-kick{color:var(--red);margin:0 0 14px;display:flex;align-items:center;gap:12px}
.svc-kick::before{content:"";width:22px;height:2px;background:var(--red)}
.svc-head h1{font-size:clamp(32px,4.6vw,62px);letter-spacing:-.045em;line-height:1.03;margin:0 0 18px;max-width:15ch}
.svc-lead{font-size:clamp(17px,1.6vw,19.5px);max-width:52ch;margin:0}
.sp-acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.svc-shot{border:0;background:var(--paper-2);overflow:hidden;line-height:0}
.svc-shot img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}

.svc-body{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:clamp(30px,4vw,64px);align-items:start}
.svc-h3{font-size:21px;letter-spacing:-.025em;margin:34px 0 0}
.svc-side{position:sticky;top:calc(var(--head-h,92px) + 24px)}
.svc-card{border:1px solid var(--rule);background:var(--white);padding:clamp(22px,2.4vw,30px)}
.svc-card .mono{color:var(--red);display:block;margin-bottom:16px}
.svc-card .spec{border-top:0}
.svc-side .docs{margin-top:20px}

/* FAQ — plain <details>, so it works with no JavaScript */
.faq{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule-soft)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:22px 0;font-family:"Space Grotesk",sans-serif;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.02em;
  color:var(--ink);transition:color .3s var(--e)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--red)}
.qa summary::after{content:"";flex:none;width:14px;height:14px;margin-top:6px;
  border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);
  transform:rotate(45deg);transition:transform .3s var(--e)}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa[open] summary{color:var(--red)}
.qa-a{padding:0 0 24px;max-width:72ch}
.qa-a p{margin:0;font-size:16.5px}

.form{border:1px solid var(--rule);background:var(--white);padding:clamp(26px,3vw,40px)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{margin-bottom:20px}
.f label{display:block;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);margin-bottom:8px}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);padding:0 0 11px;background:transparent;border:0;border-bottom:1px solid var(--rule-soft);border-radius:0;transition:border-color .3s var(--e)}
.f textarea{resize:vertical;min-height:90px;border:1px solid var(--rule-soft);padding:12px}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--red)}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.fnote{font-size:13.5px;margin:18px 0 0}
.map{border:1px solid var(--rule);aspect-ratio:16/9;background:var(--paper-2)}
.map iframe{width:100%;height:100%;border:0;display:block}

.art{display:grid;grid-template-columns:230px 1fr;gap:clamp(30px,4vw,70px);align-items:start}
.art-side{position:sticky;top:120px}
.art-side h2{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:16px}
.art-side ol{counter-reset:t;border-top:1px solid var(--rule-soft)}
.art-side li{counter-increment:t;border-bottom:1px solid var(--rule-soft)}
.art-side a{display:grid;grid-template-columns:26px 1fr;gap:8px;padding:12px 0;text-decoration:none;font-size:15px;color:var(--body);transition:color .3s var(--e)}
.art-side a::before{content:counter(t,decimal-leading-zero);font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11px;color:var(--red)}
.art-side a:hover{color:var(--red)}
.prose{max-width:70ch;font-size:19px;line-height:1.7}
.prose .stand{font-size:23px;line-height:1.45;color:var(--ink);letter-spacing:-.02em;margin-bottom:1.4em;font-family:"Space Grotesk",sans-serif}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin:1.9em 0 .5em;padding-top:.7em;border-top:1px solid var(--rule-soft);scroll-margin-top:130px}
.prose h3{font-size:21px;margin:1.6em 0 .4em}
.prose ul{display:grid;gap:12px;margin:0 0 1.3em}
.prose ul li{padding-left:30px;position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:1.5px;background:var(--red)}
.prose ol{counter-reset:p;display:grid;gap:12px;margin:0 0 1.3em}
.prose ol li{counter-increment:p;padding-left:34px;position:relative}
.prose ol li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12px;color:var(--red)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--red)}

.foot{background:var(--ink);color:rgba(255,255,255,.6);border-top:1px solid var(--rule)}
/* minmax(0,1fr) lets the columns shrink below their longest link — without it
   the footer pushes the page wider than the screen on tablets */
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));border-left:1px solid rgba(255,255,255,.12)}
.foot-col{padding:clamp(30px,3vw,44px) clamp(18px,2vw,28px);border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.foot h4{color:#fff;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px;font-weight:400}
.foot ul{display:grid;gap:11px}
.foot a{color:rgba(255,255,255,.6);text-decoration:none;font-size:15px;transition:color .25s var(--e)}
.foot a:hover{color:var(--red)}
.foot img{max-height:50px;width:auto;margin-bottom:18px}
.foot-col p{font-size:15px;max-width:32ch;margin-bottom:18px}
.foot-contact{display:grid;gap:8px;font-size:15px}
.foot-contact a{color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0;color:rgba(255,255,255,.4)}

.fab{position:fixed;right:24px;bottom:26px;z-index:95;display:grid;gap:10px}
.fab a{width:52px;height:52px;display:grid;place-items:center;color:#fff}
.fab .wa{background:#25D366}
.fab .tel{background:var(--red)}
.fab svg{width:24px;height:24px;fill:currentColor}
.mbar{display:none}

.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--e),transform .7s var(--e)}

@media(max-width:1100px){
  .hero-grid,.split,.cta-in,.art{grid-template-columns:1fr}
  /* Stacked: the photo spans the section's full width and is shown WHOLE.
     There is no text column beside it to match, so the box takes the shape of
     the picture rather than cutting the picture to a fixed shape. */
  .sp-media{position:static;line-height:0}
  .sp-media::before{display:none}
  .sp-media img{position:static;inset:auto;height:auto;aspect-ratio:auto;object-fit:contain}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-head-in,.svc-body{grid-template-columns:1fr}
  .svc-side{position:static}
  .svc-shot img{height:auto;aspect-ratio:auto;object-fit:contain}
  .framed img{height:auto;aspect-ratio:auto;object-fit:contain}
  .hero-l{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .split > div:first-child{border-right:0;border-bottom:0}
  .split.flip > .sp-media{order:0;border-left:0;border-bottom:0}
  .figs,.proc{grid-template-columns:repeat(2,1fr)}
  .art-side{position:static}
  .art-side ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .irow{grid-template-columns:52px 1fr auto;gap:18px}
  .irow p{display:none}
}
@media(max-width:940px){
  /* touch sizes: every link big enough to hit reliably with a thumb */
  .txtlink{min-height:44px;align-items:center;padding-bottom:0;line-height:1.3}
  .foot-contact a,.foot-contact span{min-height:40px;display:flex;align-items:center}
  .spec dd a{min-height:40px;display:inline-flex;align-items:center}
  .hs-more{min-height:44px;display:inline-flex;align-items:center;padding-bottom:0}
  /* the brand block gets its own row rather than a cramped third of one */
  .foot-col:first-child{grid-column:1/-1}
  .burger{display:block}
  .nav{position:fixed;top:var(--head-h,92px);left:0;right:0;height:calc(100dvh - var(--head-h,92px));flex-direction:column;align-items:stretch;background:var(--paper);border-top:1px solid var(--rule);overflow-y:auto;display:none;z-index:99;padding-bottom:80px}
  .nav.open{display:flex}
  .nav > li{border-left:0;border-bottom:1px solid var(--rule-faint);display:block}
  .nav > li:last-child{border-right:0}
  .nav > li > a{padding:20px 5vw;font-size:14px}
  .nav .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;background:var(--paper-2);display:none;min-width:0}
  .nav .sub,.nav > li.open .sub{display:none!important}
  .head-cta,.fab{display:none}
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.2fr;position:fixed;left:0;right:0;bottom:0;z-index:96;background:var(--paper);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:60px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-right:1px solid var(--rule-faint)}
  .mbar a:last-child{border-right:0;background:var(--red);color:#fff}
  .mbar svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
  .mbar .wa{fill:#25D366;stroke:none}
  body{padding-bottom:60px}
}
@media(max-width:700px){
  body{font-size:16.5px}
  .proc,.foot-grid,.f-row{grid-template-columns:1fr}
  /* figures stay 2x2 on phones and tighten up, so the block reads in one glance
     instead of scrolling for a full screen */
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig{padding:18px 14px}
  .fig .n{font-size:clamp(28px,8.5vw,38px)}
  .fig .l{margin-top:5px;font-size:13px;line-height:1.35}
  .fig:nth-child(-n+2){border-bottom:1px solid var(--rule-soft)}
  .topbar .hide-sm{display:none}
  .topbar-in{justify-content:center;gap:16px}
  .topbar .right{margin-left:0}
  .irow{grid-template-columns:40px 1fr auto;gap:14px}
  .hero-meta{gap:14px}
  .spec .r{grid-template-columns:1fr;gap:4px}
  .spec dd{text-align:left}
  /* the "On request" box: label above the text, so the paragraph gets the
     full width instead of being squeezed into a narrow second column */
  .docs{grid-template-columns:1fr;gap:10px;padding:20px}
  .docs .mono{align-self:start}
  /* the notice boxes gain back the width their padding was taking */
  .note{padding:20px}
  .note p,.docs p{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}
@media(max-width:700px){ .hero-meta{display:none} .hero-l{padding-top:34px} }

/* ===========================================================
   HERO — a simple slideshow: one photo, one message at a time
   =========================================================== */
.hs{padding:0}
.hs-box{position:relative;overflow:hidden;background:#F4F4F0;border-bottom:1px solid var(--rule)}
.hs-slides{display:grid}
.hs-slide{grid-area:1/1;position:relative;min-height:clamp(480px,44vw,640px);display:flex;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .8s var(--e),visibility 0s linear .8s}
.hs-slide.on{opacity:1;visibility:visible;transition-delay:0s}
/* the photo fills the slide, however the file is cropped. Each slide has two
   files — a wide one and a phone one — and the browser downloads only the
   one it needs (see the <picture> element in the markup). */
.hs-slide > picture{position:absolute;inset:0;display:block}
.hs-photo{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;background:#F4F4F0}
.hs-slide.on .hs-photo{animation:hsPan 9s var(--e) forwards}
@keyframes hsPan{from{transform:scale(1.06)}to{transform:scale(1)}}
/* paper wash on the left so the headline stays readable over any photo */
.hs-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,244,240,.97) 0%,rgba(244,244,240,.92) 34%,rgba(244,244,240,.55) 50%,rgba(244,244,240,.12) 66%,rgba(244,244,240,0) 78%)}
.hs-in{position:relative;z-index:2;width:var(--shell);margin-inline:auto}
.hs-text{max-width:640px;padding:clamp(44px,5vw,84px) 0 clamp(96px,8vw,120px)}
/* the service name is the headline — the biggest thing on the slide */
.hs .hs-title{color:var(--ink);font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.045em;
  margin:0 0 18px;max-width:13ch;display:flex;flex-direction:column;gap:6px}
.hs .hs-title::before{content:"";width:34px;height:3px;background:var(--red);margin-bottom:10px}
/* the promise, one step down */
.hs-line{color:var(--ink);font-family:"Space Grotesk",sans-serif;font-weight:500;
  font-size:clamp(18px,1.95vw,27px);line-height:1.18;letter-spacing:-.025em;max-width:26ch;margin:0 0 14px}
.hs-line em{font-style:normal;color:var(--red)}
.hs-sub{color:var(--body);font-size:clamp(15px,1.3vw,17px);max-width:46ch;margin:0 0 28px}
.hs-acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hs-more{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--rule-soft);padding-bottom:4px;transition:color .3s var(--e),border-color .3s var(--e)}
.hs-more:hover{color:var(--red);border-color:var(--red)}

.hs-navwrap{position:absolute;z-index:3;left:0;right:0;bottom:clamp(24px,2.6vw,36px)}
.hs-nav{width:var(--shell);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hs-dots{display:flex;gap:10px}
.hs-dot{width:11px;height:11px;padding:0;border:1.5px solid var(--ink);background:transparent;cursor:pointer;
  transition:background .3s var(--e),border-color .3s var(--e)}
.hs-dot[aria-selected="true"]{background:var(--red);border-color:var(--red)}
.hs-arrows{display:flex;gap:8px}
.hs-arrow{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--rule);background:var(--paper);
  color:var(--ink);cursor:pointer;transition:background .3s var(--e),border-color .3s var(--e)}
.hs-arrow:hover{background:var(--red);border-color:var(--red);color:#fff}
.hs-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* phones: photo on top, text below — easier to read than text over a photo */
@media(max-width:760px){
  .hs-slide{display:block;min-height:0}
  .hs-slide::after{display:none}
  .hs-slide > picture{position:relative;inset:auto}
  .hs-photo{position:relative;inset:auto;aspect-ratio:4/3;height:auto;object-fit:cover}
  .hs-slide.on .hs-photo{animation:none}
  .hs-text{padding:24px 0 18px}
  .hs .hs-title{font-size:clamp(32px,8.6vw,44px);max-width:none}
  .hs .hs-title::before{width:28px;height:2px;margin-bottom:8px}
  .hs-line{font-size:clamp(17px,4.6vw,21px);max-width:none;margin-bottom:12px}
  .hs-sub{font-size:15.5px}
  /* The dots and arrows sit on the photo itself rather than below the text.
     The photo is 4:3 across the full width, so its bottom edge is at 75vw;
     the bar is pushed down to sit just above that line. */
  .hs-navwrap{position:absolute;top:0;left:0;right:0;bottom:auto;z-index:4;
    transform:translateY(calc(75vw - 100% - 14px))}
  .hs-nav{padding:0}
  /* The dot stays the same size to look at, but the button around it is 36px
     so it can be tapped with a thumb. Legible over a light or a dark photo. */
  .hs-dots{gap:2px}
  .hs-dot{width:36px;height:36px;border:0;background:transparent;box-shadow:none;
    display:grid;place-items:center}
  .hs-dot::before{content:"";width:12px;height:12px;border:1.5px solid #fff;
    background:rgba(12,20,22,.38);box-shadow:0 1px 4px rgba(0,0,0,.35);
    transition:background .3s var(--e),border-color .3s var(--e)}
  .hs-dot[aria-selected="true"]::before{background:var(--red);border-color:#fff}
  .hs-arrow{width:44px;height:44px;background:rgba(252,252,250,.94);
    border-color:rgba(12,20,22,.25);box-shadow:0 2px 10px rgba(0,0,0,.22)}
}

/* tablets: the dots need a thumb-sized button too */
@media(min-width:761px) and (max-width:940px){
  /* slideshow dots: 36px button, same small square to look at */
  .hs-dots{gap:2px}
  .hs-dot{width:36px;height:36px;border:0;background:transparent;display:grid;place-items:center}
  .hs-dot::before{content:"";width:11px;height:11px;border:1.5px solid var(--ink);background:transparent;
    transition:background .3s var(--e),border-color .3s var(--e)}
  .hs-dot[aria-selected="true"]{background:transparent}
  .hs-dot[aria-selected="true"]::before{background:var(--red);border-color:var(--red)}
}

/* logo: a definite height, so an SVG without width/height attributes still sizes itself */
.brand img{height:54px;width:auto;max-width:none}
.foot img{height:50px;width:auto}
@media(max-width:700px){ .brand img{height:44px} }