/* HonedIT — HONEDIT-003 reference-fidelity stylesheet.
   Layout proportions derived from Logo/Monad Video.mp4 measured at a 766px
   capture width normalised to a 1440px CSS viewport (scale 1.8799).
   Brand exceptions (authorised): ivory canvas, graphite controls/top strip,
   gold/silver falcon and gold accent atmosphere in place of the reference's
   green/emerald. */

/* ---- self-hosted OFL faces (assets/fonts/LICENSE-*.txt) --------------------
   Newsreader replaces Georgia: measured against the reference headline it is
   ~5% wider per character where Georgia was ~10%, and it carries the
   reference's higher stroke contrast. IBM Plex Mono replaces Consolas as a
   neutral neo-grotesque mono. Two weights each; nothing loads from a CDN. */
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-400-normal.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';src:url('fonts/newsreader-latin-500-normal.woff2')format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-400-normal.woff2')format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url('fonts/ibm-plex-mono-latin-500-normal.woff2')format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ivory:#f8f6f1;
  --paper:#fffefb;
  --panel:#f3f1ea;
  --ink:#22231f;
  --muted:#575a54;
  --faint:#6e6960;
  --graphite:#5b5953;
  --graphite-deep:#44433e;
  --gold:#bd945f;
  /* AA-contrast gold for small text on light panels (HONEDIT-008): the
     decorative --gold measures 2.4-2.8:1 and fails WCAG AA under ~18px. */
  --gold-text:#886538;
  --gold-soft:#e4c79a;
  --line:#d6d0c5;
  --hairline:#e3ded3;
  --serif:'Newsreader',Georgia,'Iowan Old Style','Times New Roman',serif;
  --mono:'IBM Plex Mono',Consolas,'Cascadia Mono','SF Mono',Menlo,'DejaVu Sans Mono',monospace;
  --wrap:1216px;
  --gutter:112px;
  --radius-panel:18px;
  --radius-pill:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font:15px/1.7 var(--mono);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wp-site-blocks{padding:0}
.wp-site-blocks>*+*,.wp-block-post-content>*+*{margin-block-start:0}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:5px}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{outline:3px solid #8c622b;outline-offset:4px;border-radius:4px}
img,svg{display:block;max-width:100%}
img{height:auto}

.wrap{width:min(var(--wrap),calc(100% - var(--gutter) * 2));margin-inline:auto}
.wrap-wide{width:min(1282px,calc(100% - 158px));margin-inline:auto}
.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:var(--paper);padding:12px 18px;border:1px solid var(--line);border-radius:8px}
.skip-link:focus{top:10px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;line-height:1.6;text-transform:uppercase;color:var(--muted);margin:0}
.fine-print{font-size:12px;line-height:1.7;color:var(--faint)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- controls */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:44px;padding:11px 34px;
  background:var(--graphite);border:1px solid var(--graphite);border-radius:var(--radius-pill);
  color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  white-space:nowrap;transition:background .2s ease,transform .2s ease;
}
.button:hover{text-decoration:none;background:var(--graphite-deep);transform:translateY(-1px)}
.button.outline{background:transparent;color:var(--ink);border-color:#b9b2a5}
.button.outline:hover{background:#eceadf}
.button.ghost{background:transparent;color:var(--ink);border-color:transparent;padding-inline:14px}
.button.ghost:hover{background:#eceadf;transform:none}
.button.small{min-height:40px;padding:9px 20px;font-size:11px;gap:9px}
.text-link{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px}
.text-link:hover{text-decoration:none;border-color:var(--gold)}

/* ----------------------------------------------------------- service strip */
.service-strip{
  position:relative;background:var(--graphite);color:#f4f1ea;
  min-height:56px;display:flex;align-items:center;justify-content:center;gap:18px;
  padding:9px 56px;font-size:11.5px;letter-spacing:.09em;text-align:center;
}
.service-strip p{margin:0}
.service-strip .strip-pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 13px;
  border:1px solid #8c887f;border-radius:var(--radius-pill);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.service-strip .strip-pill:hover{text-decoration:none;background:#6c6a63}
.strip-dismiss{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#cdc8bd;font-size:17px;line-height:1;
  width:30px;height:30px;cursor:pointer;border-radius:50%;
}
.strip-dismiss:hover{color:#fff;background:#6c6a63}
.service-strip[hidden]{display:none}

/* ----------------------------------------------------------------- header */
.site-header{height:110px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.header-left{display:flex;align-items:center;gap:34px;min-width:0}
.header-right{display:flex;align-items:center;gap:10px}
.header-phone{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink);
  padding:9px 14px;border:1px solid #cfc6b6;border-radius:var(--radius-pill);
  background:linear-gradient(180deg,#fffefb,#f7f4ed);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.header-phone:hover{text-decoration:none;border-color:var(--gold);box-shadow:0 3px 10px rgba(138,104,52,.14)}
.header-phone svg{width:15px;height:15px;stroke:var(--graphite);stroke-width:1.9;fill:none;flex:0 0 auto}
.header-phone .tel-label{display:inline}
.footer-phone{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.footer-phone svg{width:14px;height:14px;stroke:var(--muted);stroke-width:1.9;fill:none}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand img:first-child{width:34px;height:auto;object-fit:contain}
.brand img:last-child{width:135px;height:auto}
.desktop-nav{display:flex;align-items:center;gap:26px}
.desktop-nav>a:not(.button){font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:10px}
.mobile-nav{display:none}

/* ------------------------------------------------------------------- hero */
/* HONEDIT-004: headline raised ~40px, centred action removed, and the whole
   flow sized so inputs + falcon + outputs all sit above the fold at 1366x768. */
.hero{text-align:center;padding-top:26px;padding-bottom:30px}
/* Real, selectable, crawlable text -- never part of a graphic. Restrained
   serif, subordinate to the H1 but plainly readable, sitting in normal layout
   flow where the pause control used to be. */
.hero-statement{
  margin:26px auto 0;max-width:46ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(16px,1.42vw,21px);line-height:1.45;letter-spacing:-.012em;
  color:#3f3e37;text-wrap:balance;
}
.hero h1{
  font-size:clamp(38px,4.6vw,66px);line-height:1.09;letter-spacing:-.028em;
  margin:0 auto 18px;max-width:17ch;
}
.hero-description{
  max-width:720px;margin:0 auto 22px;
  font-size:clamp(13.5px,1.08vw,15.5px);line-height:1.62;color:var(--muted);text-wrap:balance;
}
.hero-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}

/* ------------------------------------------------- hero flow (one geometry)
   The SVG carries a 1:1 pixel viewBox set by site.js, so one SVG user unit is
   one CSS px and node ports, connector endpoints and packet positions all live
   in the same coordinate space. Nothing here hard-codes a path coordinate. */
.flow{
  position:relative;margin:0 auto;max-width:1240px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px) minmax(0,1fr);
  align-items:center;column-gap:clamp(8px,2vw,34px);
}
.flow-glow{
  position:absolute;left:50%;top:50%;width:min(360px,46vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(187,138,64,.34),rgba(213,177,118,.17) 48%,rgba(248,246,241,0) 76%);
}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none;z-index:1}
.flow-lines path{stroke:#c8bfae;stroke-width:1.25;stroke-linecap:round}

.flow-col{
  list-style:none;margin:0;padding:0;position:relative;z-index:2;
  display:grid;gap:clamp(6px,0.9vh,12px);
}
.flow-col.in{justify-items:start}
.flow-col.out{justify-items:end}

/* ------------------------------------------------------------- flow nodes */
.node{
  display:inline-flex;align-items:center;gap:11px;
  min-height:clamp(42px,4.6vh,50px);padding:0 16px;
  border:1px solid #cfc6b6;border-radius:14px;
  background:linear-gradient(180deg,#fffefb,#f7f4ed);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 7px rgba(96,84,62,.07);
  color:var(--ink);text-decoration:none;white-space:nowrap;max-width:100%;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.node:hover{
  text-decoration:none;border-color:var(--gold);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 14px rgba(138,104,52,.16);
  transform:translateY(-1px);
}
.node:focus-visible{outline:3px solid #8c622b;outline-offset:3px}
.node-ico{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(26px,2.1vw,30px);aspect-ratio:1;border-radius:9px;
  background:#f1ece1;border:1px solid #e4dccc;color:var(--graphite);
}
.node-icon{width:clamp(15px,1.25vw,17px);height:clamp(15px,1.25vw,17px);stroke-width:1.9}
.node-label{
  font-family:var(--mono);font-size:clamp(12.5px,1.03vw,14.5px);
  letter-spacing:.005em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;
}

/* ---------------------------------------------------------------- the hub */
.flow-core{
  position:relative;justify-self:center;align-self:center;z-index:3;
  width:clamp(188px,19vw,268px);aspect-ratio:1;display:grid;place-items:center;
}
.core-ring{
  position:absolute;inset:11%;border-radius:50%;
  border:1px solid rgba(189,148,95,.42);
  background:radial-gradient(closest-side,rgba(255,254,251,.94),rgba(252,249,242,.55) 62%,rgba(252,249,242,0));
  box-shadow:0 10px 30px rgba(120,95,55,.12);
}
/* the shield itself is enlarged -- not just its container */
.core-art{position:relative;z-index:2;display:block;line-height:0}
/* The glint is placed as a percentage of the artwork's own box -- the eye
   centre measured at 68.5% x 37.0% of shield.webp -- so it stays on the eye at
   every rendered size. The supplied artwork is never modified. */
.core-eye{
  /* z-index must beat .flow-core img (z-index:2) or the glint paints behind
     the artwork and is invisible */
  position:absolute;z-index:3;left:67.6%;top:36.8%;width:10.5%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(calc(.74 + var(--eye,0) * .72));
  border-radius:50%;pointer-events:none;
  /* --eye is the smoothed envelope (peaks near 0.5); the 1.65 gain maps that
     to the intended visual strength while the envelope itself stays gentle */
  background:radial-gradient(closest-side,
    rgba(255,238,198,calc(var(--eye,0) * 1.62)) 0%,
    rgba(246,196,112,calc(var(--eye,0) * .99)) 44%,
    rgba(214,150,60,calc(var(--eye,0) * .30)) 72%,
    rgba(214,150,60,0) 100%);
  /* plus-lighter reads as light catching the metal; browsers without it fall
     back to normal blending, which still looks like a warm glint */
  mix-blend-mode:plus-lighter;
  transition:opacity .12s linear;
}
.flow-core img{
  position:relative;z-index:2;width:auto;
  height:clamp(118px,12.1vw,172px);object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(104,80,44,.22));
}

/* ------------------------------------------------------------- packets */
.packet{
  /* left/top MUST be pinned: without them an absolutely positioned element
     keeps its *static* position, so the transform below would start from
     wherever the marker happened to fall in flow -- this was the root cause of
     the markers drifting away from their paths. */
  position:absolute;left:0;top:0;z-index:1;display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px 2px 4px;border-radius:999px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;
  background:rgba(255,254,251,.96);border:1px solid #e3dac9;color:var(--muted);
  box-shadow:0 1px 4px rgba(96,84,62,.10);
  opacity:0;pointer-events:none;will-change:transform,opacity;
}
.packet i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.packet b{font-weight:400}
.packet.warn i{background:#e0b566}
.packet.alert i{background:#d99287}
.packet.ok i{background:#8fae87}
.packet.ok{border-color:#cfdcca}

.coverage{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin:120px 0 80px;padding-top:4px;
}
.coverage .eyebrow{flex:0 0 auto}
.coverage ul{list-style:none;display:flex;gap:38px;flex-wrap:wrap;margin:0;padding:0}
.coverage li{font-family:var(--serif);font-size:19px;color:#4a4943}

/* ----------------------------------------------------------- section shell */
.section{padding:86px 0}
.section-head{margin-bottom:34px}
.section-head h2{font-size:clamp(28px,3.1vw,45px);line-height:1.1;margin:0}
.section-head p{max-width:560px;margin:14px 0 0;color:var(--muted);font-size:14px}

/* ------------------------------------------------------------ how it works */
.works-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.06fr);gap:21px;align-items:stretch}
.works-stack{display:grid;gap:21px;align-content:start}
.panel{
  position:relative;overflow:hidden;background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--radius-panel);padding:26px 28px;
}
.panel-atmos{position:absolute;inset:0;pointer-events:none;z-index:0}
.panel>*{position:relative;z-index:1}
.panel-icon{width:22px;height:22px;stroke:var(--muted);stroke-width:1.4;fill:none;margin-bottom:26px}
.panel h3{font-size:19px;margin:0 0 9px;letter-spacing:-.02em}
.panel p{margin:0;font-size:12.5px;line-height:1.75;color:var(--muted);max-width:40ch}

.panel-tall{display:flex;flex-direction:column;padding-bottom:26px}
.panel-tall .pipeline{margin-top:auto;padding-top:26px}

/* vertical pipeline illustration */
.pipeline{display:grid;justify-items:center;gap:0;position:relative}
.pipe-card{
  width:min(100%,222px);display:flex;align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:11px;
  padding:9px 12px;box-shadow:0 2px 10px rgba(90,80,60,.06);
}
.pipe-card .pc-ico{
  width:26px;height:26px;flex:0 0 auto;border-radius:7px;background:#f1eee6;
  display:grid;place-items:center;
}
.pipe-card .pc-ico svg{width:14px;height:14px;stroke:var(--graphite);stroke-width:1.5;fill:none}
.pipe-card b{display:block;font-weight:400;font-size:10.5px;letter-spacing:.02em;color:var(--ink)}
.pipe-card span{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pipe-rule{
  display:inline-flex;align-items:center;gap:6px;margin:0;
  padding:3px 10px;border:1px solid var(--hairline);border-radius:var(--radius-pill);
  background:var(--paper);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  position:relative;z-index:1;
}
.pipe-link{width:1px;height:18px;background:#d9d2c4}
.pipe-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:0}
.pipe-split .pipe-card{width:100%}
.pipe-fork{width:100%;height:18px;position:relative}
.pipe-fork svg{position:absolute;inset:0;width:100%;height:100%;stroke:#d9d2c4;stroke-width:1;fill:none}

/* panel graphics shared */
.panel-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:center}
.panel-split .copy{align-self:center}
.panel-art{position:relative;min-height:152px;align-self:stretch;display:grid;align-items:center}

/* art 1: core + orbiting chips */
.art-core{position:relative;height:196px;display:grid;place-items:center}
.art-core .hub{
  width:124px;height:104px;
  background:linear-gradient(142deg,#b9c0d4 0%,#d9b9a0 52%,#d59a72 100%);
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(120,90,60,.20);
  clip-path:polygon(0 0,34% 0,34% 13%,66% 13%,66% 0,100% 0,100% 100%,66% 100%,66% 87%,34% 87%,34% 100%,0 100%);
}
.art-core .hub .ring{width:44px;height:44px;border-radius:50%;border:2px dotted #4a4740}
.art-core .chip{position:absolute;border-radius:50%}
.art-core .c1{width:16px;height:16px;background:#aab3cd;right:12%;top:22%}
.art-core .c2{width:21px;height:21px;background:#dd8243;right:5%;bottom:24%}
.art-core .poly{position:absolute;width:21px;height:21px;border:1px solid #c6bdad;left:12%;top:34%;transform:rotate(18deg)}
.art-core .poly2{position:absolute;width:16px;height:16px;border:1px solid #cdc5b5;left:21%;bottom:24%;transform:rotate(-24deg)}

/* art 2: rules card */
.art-rules{display:grid;gap:13px;min-height:210px;align-content:center}
.rule-chips{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.rule-chips span{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;background:var(--paper);
  border:1px solid var(--hairline);border-radius:var(--radius-pill);
  font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.rules-card{background:var(--paper);border:1px solid var(--hairline);border-radius:11px;padding:15px 17px;box-shadow:0 3px 12px rgba(90,80,60,.07)}
.rules-card h4{font-family:var(--mono);font-size:11px;letter-spacing:.06em;margin:0 0 11px;color:var(--ink)}
.rules-card ol{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.rules-card li{display:flex;align-items:flex-start;gap:8px;font-size:9.5px;line-height:1.75;color:var(--muted)}
.rules-card li .n{color:var(--faint)}
.rules-card code{font-family:var(--mono);font-size:9.5px;background:#eef1ea;border-radius:3px;padding:1px 4px;color:#4a5a46}
/* the reference dims its last rule row; dimmed with colour rather than opacity
   so the decorative text still clears the 4.5:1 contrast threshold */
.rules-card .fade,.rules-card .fade code{color:var(--faint)}

/* art 3: deployment cards */
.art-deploy{display:flex;align-items:center;justify-content:center;gap:0;min-height:210px}
.dep-card{
  width:36%;background:var(--paper);border:1px solid var(--hairline);border-radius:11px;
  padding:10px 11px;box-shadow:0 4px 14px rgba(90,80,60,.09);position:relative;
}
.dep-card:nth-child(1){transform:translateY(14px)}
.dep-card:nth-child(2){transform:translateY(-10px);z-index:2}
.dep-card:nth-child(3){transform:translateY(20px)}
.dep-card .d-ico{width:26px;height:26px;border-radius:7px;background:#eef0f6;display:grid;place-items:center;margin-bottom:9px}
.dep-card .d-ico svg{width:12px;height:12px;stroke:#5b6480;stroke-width:1.5;fill:none}
.dep-card b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;margin-bottom:8px}
.dep-card ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.dep-card li{font-size:8.5px;letter-spacing:.03em;color:var(--faint)}
.dep-dot{position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;background:#8fae87;border:2px solid var(--paper)}

/* ------------------------------------------------------------- connect panel */
.connect{
  position:relative;overflow:hidden;border-radius:26px;
  background:linear-gradient(112deg,#ccd3e3 0%,#dbdce2 28%,#e9dcc6 68%,#f6dfb8 100%);
  border:1px solid #d9d7d2;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;min-height:620px;
}
.connect-atmos{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(54% 56% at 88% 28%,rgba(214,150,66,.44),transparent 72%),
             radial-gradient(46% 50% at 64% 92%,rgba(124,132,152,.38),transparent 74%),
             radial-gradient(42% 46% at 18% 12%,rgba(255,255,255,.46),transparent 70%)}
.connect-copy{padding:48px 0 48px 52px;position:relative;z-index:2}
.connect-copy h2{font-size:clamp(26px,2.6vw,37px);line-height:1.12;margin:0 0 16px}
.connect-copy p{font-size:12.5px;line-height:1.75;color:#3f3e38;max-width:480px;margin:0 0 26px}
.connect-copy .fine-print{max-width:430px;margin:20px 0 0;font-size:10.5px;line-height:1.65;color:#625f57}
.connect-stage{position:relative;height:620px;overflow:hidden;z-index:2}
.connect-chevrons{position:absolute;left:8%;top:50%;transform:translateY(-50%);opacity:.42;pointer-events:none}
.connect-chevrons svg{width:150px;height:260px;stroke:#a7a294;stroke-width:1;fill:none}
.connect-track{position:absolute;inset:0;list-style:none;margin:0;padding:0}
.connect-track li{
  position:absolute;left:0;top:0;display:flex;align-items:center;gap:22px;
  white-space:nowrap;will-change:transform,opacity;
}
.connect-track .ci{
  width:38px;height:38px;border-radius:50%;background:var(--paper);
  border:1px solid #e2dacb;display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 2px 8px rgba(90,80,60,.10);
}
.connect-track .ci svg{width:19px;height:19px;stroke:var(--graphite);stroke-width:1.5;fill:none}
.connect-track b{font-family:var(--serif);font-weight:400;font-size:33px;color:var(--ink);letter-spacing:-.015em}
.connect-pause{
  position:absolute;right:16px;bottom:14px;z-index:4;
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;
  background:rgba(255,254,251,.82);border:1px solid #ddd5c5;border-radius:var(--radius-pill);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;
}
.connect-pause:hover{background:#fff}

/* ----------------------------------------------------------------- benefits */
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px}
.benefit{
  position:relative;overflow:hidden;border-radius:var(--radius-panel);
  border:1px solid var(--hairline);background:var(--paper);padding:30px 34px 34px;min-height:261px;
}
.benefit .b-atmos{position:absolute;inset:0;pointer-events:none}
.benefit>*{position:relative;z-index:1}
.benefit svg.panel-icon{margin-bottom:34px}
.benefit h3{font-size:20px;margin:0 0 24px}
.benefit p{margin:0;font-size:12.5px;line-height:26px;color:var(--muted);max-width:48ch}
.b1 .b-atmos{background:radial-gradient(70% 90% at 6% 4%,rgba(150,152,182,.30),transparent 62%),radial-gradient(60% 80% at 96% 96%,rgba(214,186,140,.26),transparent 66%)}
.b2 .b-atmos{background:radial-gradient(70% 90% at 94% 6%,rgba(214,166,110,.30),transparent 62%),radial-gradient(60% 80% at 4% 94%,rgba(170,176,160,.22),transparent 66%)}
.b3 .b-atmos{background:radial-gradient(70% 90% at 4% 96%,rgba(160,150,180,.26),transparent 62%),radial-gradient(60% 80% at 92% 8%,rgba(205,190,160,.26),transparent 66%)}
.b4 .b-atmos{background:radial-gradient(70% 90% at 96% 92%,rgba(216,158,96,.28),transparent 62%),radial-gradient(60% 80% at 8% 6%,rgba(175,178,168,.24),transparent 66%)}

/* --------------------------------------------------------------------- FAQ */
.faq h2{font-size:clamp(28px,2.99vw,43px);margin:0 0 28px}
.faq-list{border-top:1px solid var(--hairline)}
.faq-list details{border-bottom:1px solid var(--hairline)}
.faq-list summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:35px 36px 35px 34px;font-family:var(--serif);font-size:26px;line-height:1.4;letter-spacing:-.015em;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{text-decoration:none;color:#000}
.faq-list summary .chev{flex:0 0 auto;width:21px;height:21px;stroke:var(--ink);stroke-width:1.4;fill:none;transition:transform .25s ease}
.faq-list details[open] summary .chev{transform:rotate(180deg)}
.faq-list .answer{padding:0 90px 32px 34px;font-size:13px;line-height:1.85;color:var(--muted);max-width:92ch}
.faq-list .answer p{margin:0}

/* ---------------------------------------------------------------- closing */
.closing{
  position:relative;overflow:hidden;border-radius:26px;border:1px solid #ece5d8;
  background:var(--paper);text-align:center;padding:72px 40px 104px;
}
.closing-atmos{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(92% 96% at 50% 112%,rgba(228,132,26,.92),rgba(234,165,70,.66) 36%,rgba(242,206,142,.30) 62%,rgba(255,254,251,0) 82%),
             radial-gradient(74% 50% at 50% -10%,rgba(212,188,132,.52),rgba(255,254,251,0) 76%)}
.closing>*{position:relative;z-index:1}
.closing h2{font-size:clamp(28px,3.1vw,45px);line-height:1.12;margin:0 0 20px}
.closing p{max-width:520px;margin:0 auto 28px;font-size:13px;line-height:1.75;color:#4e4d46}
.closing-actions{display:flex;justify-content:center;align-items:center;gap:13px;flex-wrap:wrap}
.closing .button.outline{background:rgba(255,254,251,.78)}

/* ---------------------------------------------------------------- inquiry */
.inquiry-wrap{padding:0 0 24px}
.inquiry-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:48px;align-items:start}
.inquiry-layout h2{font-size:clamp(24px,2.4vw,33px);margin:12px 0 14px}
.inquiry-layout>div>p{font-size:13px;line-height:1.8;color:var(--muted)}
.contact-panel{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-panel);padding:28px 30px}
.honedit-form{display:grid;gap:14px}
.honedit-form h3{font-size:20px;margin:0}
.honedit-form>p{margin:0;font-size:12px;line-height:1.7;color:var(--muted)}
.honedit-form label{display:grid;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.honedit-form input,.honedit-form select,.honedit-form textarea{
  font:14px/1.6 var(--mono);color:var(--ink);background:var(--ivory);
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;width:100%;
}
.honedit-form textarea{min-height:118px;resize:vertical}
.honedit-form .honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.honedit-form .field-error{font-size:11px;letter-spacing:0;text-transform:none;color:#9a3b2c;min-height:0}
.honedit-form .form-status{margin:0;font-size:12.5px;line-height:1.7}
.honedit-form .button{justify-self:start}

/* ----------------------------------------------------------------- footer */
.site-footer{padding:54px 0 0}
.footer-top{display:grid;grid-template-columns:minmax(0,2.4fr) repeat(4,minmax(0,1fr));gap:24px;padding-bottom:34px}
.footer-brand img{width:150px;height:auto}
.footer-brand p{margin:16px 0 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.footer-col h4{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-weight:400}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-col a{font-size:11.5px;line-height:1.55;color:var(--muted)}
.footer-col a:hover{color:var(--ink)}
.footer-meta{text-align:right;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-bottom:14px}
.footer-bottom{
  border-top:1px solid var(--hairline);padding:18px 0 38px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.footer-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.motion-toggle{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:transparent;border:1px solid var(--hairline);border-radius:var(--radius-pill);
  padding:7px 14px;min-height:34px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}
.motion-toggle:hover{border-color:#c6bdac;color:var(--ink)}
.motion-toggle:focus-visible{outline:3px solid #8c622b;outline-offset:3px}
.motion-toggle .sw{
  width:26px;height:14px;border-radius:999px;background:#d9d2c4;position:relative;
  transition:background .18s ease;flex:0 0 auto;
}
.motion-toggle .sw::after{
  content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;
  background:#fffefb;transition:transform .18s ease;
}
.motion-toggle[aria-pressed="true"] .sw{background:var(--gold)}
.motion-toggle[aria-pressed="true"] .sw::after{transform:translateX(12px)}

/* ------------------------------------------------------------------ motion */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.flow-glow{animation:glow-drift 13s ease-in-out infinite}
@keyframes glow-drift{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
.connect-atmos{animation:atmos-drift 17s ease-in-out infinite}
@keyframes atmos-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-12px,8px,0)}}

/* --------------------------------------------------------------- responsive */
@media (max-width:1180px){
  :root{--gutter:56px}
  .wrap-wide{width:calc(100% - 80px)}
  .connect-copy{padding:40px 0 40px 36px}
}
@media (max-width:980px){
  :root{--gutter:40px}
  .wrap-wide{width:calc(100% - 56px)}
  .connect{min-height:0}
  .section{padding:64px 0}
  .works-grid{grid-template-columns:1fr}
  .works-stack{grid-template-rows:none}
  .connect{grid-template-columns:1fr}
  .connect-copy{padding:38px 32px 10px}
  .connect-stage{height:300px}
  .inquiry-layout{grid-template-columns:1fr;gap:28px}
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .footer-brand{grid-column:1 / -1}
  .footer-meta{text-align:left}
}
@media (max-width:860px){
  .desktop-nav{display:none}
  .mobile-nav{display:block;position:relative}
  .mobile-nav summary{
    list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
    border:1px solid #b9b2a5;border-radius:var(--radius-pill);padding:10px 18px;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  }
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav nav{
    position:absolute;right:0;top:calc(100% + 10px);z-index:30;min-width:232px;
    background:var(--paper);border:1px solid var(--line);border-radius:14px;
    padding:12px;display:grid;gap:4px;box-shadow:0 18px 40px rgba(60,55,45,.16);
  }
  .mobile-nav nav a{padding:11px 13px;border-radius:9px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
  .mobile-nav nav a:hover{background:#f1eee6;text-decoration:none}
  /* compact connected diagram: a grouped input grid, the falcon, then a
     grouped output grid. Connectors are still drawn -- site.js switches each
     node's port to its vertical edge automatically once the hub is below it. */
  /* more clear space between the grids and the hub, so a marker has somewhere
     to be seen; on narrow widths the marker is a dot without its label, which
     keeps it clear of pill text while the handoff itself stays continuous */
  .flow{grid-template-columns:1fr;row-gap:clamp(44px,11vw,60px)}
  .packet b{display:none}
  .packet{padding:3px;gap:0;border-radius:999px}
  .packet i{width:8px;height:8px}
  .flow-col{grid-template-columns:1fr 1fr;gap:8px;justify-items:stretch}
  .flow-col.in,.flow-col.out{justify-items:stretch}
  .flow-col .node{width:100%;justify-self:stretch;padding:7px 11px;gap:9px;min-height:44px;align-items:center}
  .flow-col .node-label{white-space:normal;line-height:1.2;overflow:visible}
  .flow-col.in>li:nth-child(7){grid-column:1 / -1}
  .flow-core{order:0;width:min(190px,46vw)}
  .coverage{gap:14px}
  .coverage ul{gap:22px}
  .coverage li{font-size:16px}
  .benefit-grid{grid-template-columns:1fr}
  .panel-split{grid-template-columns:1fr;gap:22px}
  .closing{padding:46px 24px 42px}
}
@media (max-width:620px){
  :root{--gutter:22px}
  .wrap-wide{width:calc(100% - 32px)}
  .service-strip{padding:9px 44px;font-size:10.5px;flex-direction:column;gap:9px}
  .site-header{height:84px}
  .brand img:last-child{width:106px}
  .hero{padding-top:44px}
  .hero-actions .button{width:100%}
  .section{padding:52px 0}
  .faq-list summary{padding-left:0;font-size:15px;gap:14px}
  .faq-list .answer{padding:0 0 20px}
  .connect-stage{height:260px}
  .connect-track b{font-size:21px}
  .art-deploy{gap:6px}
  .dep-card{padding:8px}
  .footer-top{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------- reduced motion */
/* reduced motion: the moving list becomes an ordinary static list rather than
   a frozen carousel, so nothing is left mid-fade */
.connect-track.is-static{position:static;display:grid;gap:16px;padding:40px 0 40px 16%}
.connect-track.is-static li{position:static;opacity:1 !important;transform:none !important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  /* the eye keeps a very restrained static highlight -- never a pulse */
  .core-eye{--eye:0.10 !important;transform:translate(-50%,-50%) scale(.82) !important}
  .js .reveal{opacity:1 !important;transform:none !important}
  .packet{display:none !important}
  .connect-track li{transition:none !important}
}

/* ---- late cascade: decorative atmosphere layers must stay absolutely placed
   (these selectors deliberately outrank the `.x > *` stacking rules above) ---- */
.panel .panel-atmos,.closing .closing-atmos,.connect .connect-atmos,.benefit .b-atmos{
  position:absolute;inset:0;z-index:0;pointer-events:none;
}
.desktop-only{display:inline-flex}
@media (max-width:860px){.desktop-only{display:none}}

/* ---- panel atmosphere ------------------------------------------------------
   The reference gives each panel a saturated decorative wash, and the tall
   pipeline panel a full-height gradient behind the diagram. Reproduced here in
   the HonedIT palette (terracotta / plum-slate / sage / amber on ivory) rather
   than the reference's red-green-blue, per the approved brand exception. */
.panel-tall .panel-atmos{
  background:radial-gradient(66% 42% at 16% 58%,rgba(205,112,78,.46),transparent 70%),
             radial-gradient(78% 42% at 72% 94%,rgba(120,114,158,.46),transparent 72%),
             radial-gradient(58% 30% at 88% 26%,rgba(212,170,98,.30),transparent 70%);
}
.panel-a1 .panel-atmos{
  background:radial-gradient(56% 112% at 76% 48%,rgba(132,172,128,.52),transparent 66%),
             radial-gradient(44% 92% at 97% 12%,rgba(209,124,92,.40),transparent 68%);
}
.panel-a2 .panel-atmos{
  background:radial-gradient(60% 126% at 72% 54%,rgba(128,170,126,.54),transparent 64%),
             radial-gradient(42% 84% at 100% 2%,rgba(206,182,112,.40),transparent 68%),
             radial-gradient(36% 74% at 48% 100%,rgba(132,140,168,.30),transparent 70%);
}
.panel-a3 .panel-atmos{
  background:radial-gradient(62% 130% at 70% 56%,rgba(226,146,56,.50),transparent 62%),
             radial-gradient(42% 84% at 100% 0%,rgba(122,130,166,.34),transparent 68%);
}

/* ---- benefit card atmosphere: the reference tints each card strongly; the
   HonedIT palette substitutes plum-slate / terracotta / sage / amber ---- */
.benefit.b1 .b-atmos{
  background:radial-gradient(96% 128% at 2% 0%,rgba(126,122,176,.58),transparent 64%),
             radial-gradient(78% 108% at 100% 100%,rgba(216,166,100,.52),transparent 66%);
}
.benefit.b2 .b-atmos{
  background:radial-gradient(96% 128% at 98% 0%,rgba(230,146,52,.58),transparent 64%),
             radial-gradient(78% 108% at 0% 100%,rgba(142,162,134,.46),transparent 66%);
}
.benefit.b3 .b-atmos{
  background:radial-gradient(96% 128% at 0% 100%,rgba(130,124,176,.54),transparent 64%),
             radial-gradient(78% 108% at 96% 0%,rgba(210,184,122,.52),transparent 66%);
}
.benefit.b4 .b-atmos{
  background:radial-gradient(96% 128% at 100% 98%,rgba(232,148,44,.56),transparent 64%),
             radial-gradient(78% 108% at 2% 0%,rgba(138,146,172,.46),transparent 66%);
}

/* ---- inquiry disclosure ----------------------------------------------------
   The reference closes on the CTA panel and goes straight to the footer, so the
   durable inquiry form lives in a collapsed disclosure directly beneath the CTA
   rather than as an extra full-height section. It works without JavaScript. */
.inquiry-disclosure{border:1px solid var(--hairline);border-radius:var(--radius-panel);background:var(--paper);overflow:hidden}
.inquiry-disclosure>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;
  padding:22px 28px;min-height:44px;
}
.inquiry-disclosure>summary::-webkit-details-marker{display:none}
.inquiry-disclosure>summary::marker{content:''}
.inquiry-disclosure>summary:hover{text-decoration:none;background:#f6f3ec}
.inquiry-disclosure .disclosure-title{font-family:var(--serif);font-size:21px;margin-right:auto}
.inquiry-disclosure>summary .chev{flex:0 0 auto;width:19px;height:19px;stroke:var(--ink);stroke-width:1.4;fill:none;transition:transform .25s ease}
.inquiry-disclosure[open]>summary .chev{transform:rotate(180deg)}
.inquiry-disclosure[open]>summary{border-bottom:1px solid var(--hairline)}
.inquiry-disclosure .inquiry-layout{padding:34px 28px 38px}
.inquiry-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:48px;align-items:start}
.inquiry-layout h2{font-size:clamp(24px,2.4vw,33px);margin:0 0 14px}
.inquiry-layout>div>p{font-size:13px;line-height:1.8;color:var(--muted)}
.inquiry-disclosure .contact-panel{background:transparent;border:0;padding:0}

/* ---- narrow-viewport corrections (INFERRED: no mobile reference exists) ---- */
@media (max-width:980px){
  .inquiry-layout{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  /* Phone widths keep BOTH a compact call affordance and the primary
     Let's Talk beside the menu -- contact must never be discoverable only
     after opening navigation. Room is made by trimming the brand lock-up and
     the control padding, not by dropping an action. */
  .brand img:first-child{display:none}
  .brand img:last-child{width:92px}
  .site-header{gap:12px}
  .header-left{gap:0}
  .header-right{gap:7px}
  .header-right>.button{padding:9px 13px;font-size:10.5px;gap:0}
  .header-right>.button span[aria-hidden]{display:none}
  .header-phone{padding:9px 11px}
  .mobile-nav summary{padding:9px 13px;font-size:10.5px;gap:6px}
  .inquiry-disclosure .inquiry-layout{padding:24px 18px 28px}
  .inquiry-disclosure>summary{padding:18px;gap:12px}
  .inquiry-disclosure .disclosure-title{font-size:17px}
  .inquiry-disclosure>summary .eyebrow{display:none}
}

/* ---- narrow-viewport flow tuning (HONEDIT-004) ---------------------------- */
@media (max-width:620px){
  .flow-col{gap:7px}
  .flow-col .node{min-height:42px;padding:0 9px;gap:7px;border-radius:12px}
  .node-ico{width:24px;border-radius:7px}
  .node-icon{width:14px;height:14px}
  .node-label{font-size:11.5px;letter-spacing:-.01em}
  .flow-core{width:min(168px,44vw)}
  .flow-core img{height:clamp(96px,27vw,122px)}
  .packet{font-size:8.5px;padding:1px 6px 1px 3px}
  .hero h1{max-width:none}
}
@media (max-width:380px){
  .node-label{font-size:11px}
  .flow-col .node{padding:0 7px}
}

/* ---- hub response + pause control (HONEDIT-004) --------------------------- */
.flow-core.pulse .core-ring{
  border-color:rgba(189,148,95,.85);
  box-shadow:0 10px 30px rgba(120,95,55,.12),0 0 0 7px rgba(189,148,95,.10);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.core-ring{transition:border-color .5s ease,box-shadow .5s ease}

/* ---- display-name + type corrections for the self-hosted faces ------------ */
/* Newsreader runs lighter than Georgia at the same size; headings get a small
   optical bump and the mono body a slightly tighter measure. */
.section-head h2,.faq h2,.closing h2{font-weight:500}
.panel h3,.benefit h3,.connect-copy h2,.inquiry-layout h2{font-weight:500}
.node-label{font-weight:500}

/* ---- short desktop viewports (1366x768 and similar) -----------------------
   Responsive sizing, not clipping: the headline stays at 56px and the
   supporting line at 13.5px, both comfortably readable, which buys the ~45px
   needed for the complete flow AND its pause control to clear the fold. */
@media (min-width:861px) and (max-height:830px){
  /* Space for the executive line is reclaimed from gaps and node height, not
     from the headline and not by clipping. The headline stays at 56px. */
  .hero{padding-top:18px;padding-bottom:26px}
  .hero h1{font-size:clamp(34px,4.05vw,56px);margin-bottom:14px}
  .hero-description{margin-bottom:12px;font-size:13.5px;max-width:660px}
  .flow-col{gap:4px}
  .node{min-height:38px;padding:0 13px}
  .flow-core{width:clamp(176px,17.6vw,236px)}
  .flow-core img{height:clamp(108px,11.2vw,150px)}
}

/* ---- motion off: same complete static diagram as reduced motion ----------- */
html[data-motion="off"] .packet{display:none !important}
html[data-motion="off"] .core-eye{--eye:0.10 !important;transform:translate(-50%,-50%) scale(.82) !important}
html[data-motion="off"] .flow-glow,
html[data-motion="off"] .connect-atmos{animation:none !important}
html[data-motion="off"] .connect-track.is-static{position:static;display:grid;gap:16px;padding:40px 0 40px 16%}
html[data-motion="off"] .connect-track.is-static li{position:static;opacity:1 !important;transform:none !important}

/* ---- narrow viewports: compact phone affordance, statement sizing --------- */
@media (max-width:980px){
  .header-phone .tel-label{display:none}
  .header-phone{padding:9px 11px;gap:0}
}
@media (max-width:620px){
  .hero-statement{margin-top:20px;font-size:clamp(15px,4.2vw,17px);max-width:30ch}
  .header-right{gap:7px}
  .header-phone{padding:8px 10px}
  .footer-bottom{gap:14px}
}

/* ---- short desktop viewports: make room for the executive line ------------ */
@media (min-width:861px) and (max-height:830px){
  .hero-statement{margin-top:14px;font-size:clamp(15px,1.28vw,17.5px)}
}

@media (max-width:380px){
  .brand img:last-child{width:82px}
  .site-header{gap:9px}
  .header-right>.button{padding:9px 11px}
  .mobile-nav summary{padding:9px 11px}
}

/* ===================================================== HONEDIT-009 nav
 * A disclosure for the Services menu. <details> is used rather than a hover
 * menu so it works by keyboard and on touch with no JavaScript, and so it
 * cannot trap focus. New class names only; no existing selector is changed.
 */
.nav-drop{position:relative}
.nav-drop>summary{
  display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary:hover{color:#000}
.nav-drop>summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.nav-drop .chev{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;transition:transform .2s ease}
.nav-drop[open] .chev{transform:rotate(180deg)}
.nav-drop-panel{
  position:absolute;top:calc(100% + 13px);left:-16px;z-index:60;min-width:246px;
  display:grid;gap:2px;padding:9px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgba(34,35,31,.09)}
.nav-drop-panel a{
  padding:9px 12px;border-radius:9px;font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--ink);white-space:nowrap}
.nav-drop-panel a:hover{background:var(--panel);text-decoration:none}
.nav-drop-panel a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.nav-drop .chev{transition:none}}
/* group headings inside the mobile menu */
.mobile-nav .mnav-head{
  margin:9px 0 2px;padding:0 13px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-text)}
.mobile-nav .mnav-head:first-child{margin-top:2px}