/* Front-end manifest. Add one @import per new block stylesheet - nothing else. *//* Articulat CF. url() paths are relative to assets/css/main.build.css - see README. */
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-100.woff2) format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-200.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-300.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-cf";src:url(../fonts/articulat-cf-normal-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"articulat-heavy-cf";src:url(../fonts/articulat-heavy-cf-normal-900.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* Design tokens. Every colour, radius and rhythm value in the theme resolves here. */
:root{
  /* Brand */
  --nm-green:#114B4C;
  --nm-green-d:#0d3a3b;
  --nm-green-footer:#0e3738;
  --nm-green-fill:#197072;
  --nm-mint:#AAFAAA;
  --nm-grey-green:#6A8688;

  /* Surfaces */
  --nm-paper:#EBF0F0;
  --nm-sage:#E7ECEA;
  --nm-sand:#D8D3CB;
  --nm-rust:#D2896A;
  --nm-tint:#EEF2F1;

  /* Text */
  --nm-ink:#17231f;
  --nm-body:#54615f;
  --nm-line:#114b4c1a;

  /* Layout */
  --nm-wrap:1560px;
  --nm-gutter:56px;
  --nm-section-y:152px;

  /* Spacing scale */
  --nm-sp-1:8px;
  --nm-sp-2:16px;
  --nm-sp-3:24px;
  --nm-sp-4:40px;
  --nm-sp-5:64px;
  --nm-sp-6:96px;

  /* Type scale */
  --nm-t-h1:clamp(3.1rem,4.2vw,4.75rem);
  --nm-t-h2:clamp(2.2rem,3.4vw,3.3rem);
  --nm-t-h3:26px;
  --nm-t-lead:20px;
  --nm-t-body:18px;

  /* Radii */
  --nm-r-sm:8px;
  --nm-r-md:14px;
  --nm-r-lg:20px;
  --nm-r-pill:40px;

  /* Motion */
  --nm-ease:cubic-bezier(.2,.7,.2,1);
}
/* Reset, document defaults and the shared section shell.
   .section owns vertical rhythm, .nm-wrap owns horizontal - blocks never set either. */
*{margin:0;padding:0;box-sizing:border-box}

/* The universal reset above is specificity (0,0,0), which is weaker than anything.
   The block editor's reset.css hands user-agent spacing back to text elements with

     :where(.editor-styles-wrapper) h1,...,h6 { margin: revert }
     :where(.editor-styles-wrapper) p         { margin: revert }
     :where(.editor-styles-wrapper) ul, ol    { margin: revert; padding: revert }

   and :where() carries no specificity, so those score (0,0,1) and beat it. In the
   canvas that gave headings and paragraphs their 1em margins back, and lists their
   40px indent - visible wherever a block spaces its children with flex gap rather
   than explicit margins. Restating the reset at (0,0,1) puts it on equal footing,
   and the theme's editor styles load after core's, so it wins the tie. No effect on
   the front end, where the values are identical. */
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd,figure,blockquote{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{font-family:"articulat-cf",system-ui,sans-serif;color:var(--nm-body);background:#fff;font-size:var(--nm-t-body);line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.nm-wrap{max-width:var(--nm-wrap);margin:0 auto;padding:0 var(--nm-gutter)}
.site-main{position:relative;z-index:1;background:#fff}
.section{padding:var(--nm-section-y) 0}
.section.tint{background:var(--nm-tint)}

h1,h2,h3{color:var(--nm-green);font-weight:500;line-height:1.05;letter-spacing:-.022em}
.eyebrow{display:inline-block;background:var(--nm-mint);color:var(--nm-green);font-size:14px;font-weight:700;padding:7px 15px;border-radius:var(--nm-r-sm);line-height:1.2}

/* Height-constrained so any uploaded logo, SVG or raster, sits on the same baseline.
   The max-width stops an unusually wide upload from crowding the nav. */
.brand{height:28px;width:auto;max-width:240px;display:block;-o-object-fit:contain;object-fit:contain}

/* Single-colour mode: every shape follows the ink colour of its container, so one
   uploaded SVG reads green in the header and white in the footer. A CSS rule beats
   both a presentation attribute and the SVG's own \3c style> class on specificity, so
   this wins over the colours baked in by Illustrator. Omitted when the logo is set
   to keep its own colours. */
.brand--mono path,
.brand--mono polygon,
.brand--mono polyline,
.brand--mono rect,
.brand--mono circle,
.brand--mono ellipse,
.brand--mono g{fill:currentColor}

.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed;top:12px;left:12px;z-index:200;width:auto;height:auto;clip:auto;margin:0;padding:12px 20px;background:var(--nm-green);color:#fff;border-radius:var(--nm-r-sm);font-weight:700}

.link{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--nm-green)}
.link .arw{transition:transform .2s}
.link:hover .arw{transform:translateX(4px)}
.arw{display:inline-flex;align-items:center}
.arw svg{width:18px;height:18px;display:block}

.sec-head{max-width:40em;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .eyebrow{margin-bottom:24px;font-size:14px;color:var(--nm-green);max-width:none}
.sec-head h2{font-size:var(--nm-t-h2);margin-bottom:22px}
.sec-head p{font-size:19px;color:var(--nm-body);max-width:33em}

/* Scroll reveal - motion.js toggles .in */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--nm-ease),transform .7s var(--nm-ease)}
.reveal.in{opacity:1;transform:none}
[data-parallax] img{will-change:transform}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* Buttons. .btn-fill is the radial hover wipe injected by motion.js. */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:700;font-size:15px;border:0;border-radius:var(--nm-r-pill);cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;z-index:0;transition:color .3s ease .06s,border-color .3s ease}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}

.btn-solid{background:var(--nm-green);color:#fff;padding:15px 28px}
.btn-solid:hover{background:var(--nm-green-d)}
.btn-out{border:1.5px solid #114b4c33;color:var(--nm-green);padding:13.5px 26px}
.btn-out:hover{border-color:var(--nm-green);color:#fff}
.btn-white{background:#fff;color:var(--nm-green);padding:15px 28px}
.btn-white:hover{background:var(--nm-paper)}
.btn-ghost{border:1.5px solid #ffffff66;color:#fff;padding:13.5px 26px;background:transparent}
.btn-ghost:hover{border-color:#fff;color:var(--nm-green)}

.btn-fill{position:absolute;z-index:-1;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);transition:width .72s cubic-bezier(.22,.7,.25,1),height .72s cubic-bezier(.22,.7,.25,1);pointer-events:none}
.btn-fill.on{width:500px;height:500px;transition:width 1.05s cubic-bezier(.22,.7,.25,1),height 1.05s cubic-bezier(.22,.7,.25,1)}
.btn-solid .btn-fill{background:var(--nm-green-fill)}
.btn-out .btn-fill{background:var(--nm-green)}
.btn-white .btn-fill{background:var(--nm-mint)}
.btn-ghost .btn-fill{background:#fff}

.cta-row{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px}
/* Sticky header, two-level dropdown menu, language switcher and mobile menu. */
header{position:sticky;top:0;z-index:130;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.nav .logo{color:var(--nm-green)}
.nav .btn{padding:12px 24px}
.nav-right{display:flex;align-items:center;gap:26px}

.menu{display:flex;align-items:center;gap:38px;list-style:none}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:6px;font-size:16px;color:var(--nm-ink);padding:14px 0}
.menu>li>a:hover{color:var(--nm-green)}
.menu>li>a.nav-active{position:relative;color:var(--nm-green)}

/* Underline spans the link and sits inside its padding, so it reads as belonging to
   the word rather than floating below it. Mint keeps the brand accent in the header. */
.menu>li>a.nav-active::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:8px;
	height:2px;
	background:var(--nm-mint);
	border-radius:2px;
}

/* The caret on a parent item is not part of the label, so the underline stops short
   of it instead of running under the arrow. */
.menu>li>a.nav-active:has(.caret)::after{right:13px}
.menu .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}

.drop{position:absolute;top:100%;left:-16px;min-width:230px;background:#fff;border-radius:10px;box-shadow:0 24px 50px -18px #11202033;padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.menu>li:hover .drop,.menu>li:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:11px 16px;font-size:14.5px;color:var(--nm-body);border-radius:7px}
.drop a:hover{background:var(--nm-paper);color:var(--nm-green)}

.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:8px;font-family:inherit;font-size:16px;font-weight:500;color:var(--nm-ink);background:none;border:0;cursor:pointer;padding:8px 0}
.lang-btn:hover{color:var(--nm-green)}
.lang-btn svg{width:19px;height:19px}
.lang-btn .caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}
.lang-drop{position:absolute;top:100%;right:0;min-width:134px;background:#fff;border-radius:var(--nm-r-sm);box-shadow:0 20px 44px -18px #11202030;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:20}
.lang:hover .lang-drop,.lang:focus-within .lang-drop{opacity:1;visibility:visible;transform:translateY(0)}
.lang-drop a{display:block;padding:9px 14px;font-size:15px;color:var(--nm-body);border-radius:6px}
.lang-drop a:hover{background:var(--nm-paper);color:var(--nm-green)}
.lang-drop a.active{color:var(--nm-green);font-weight:700}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;position:relative;z-index:110}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--nm-green);transition:transform .3s,opacity .2s;margin:0 auto}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:0;background:#fff;z-index:100;padding:96px 40px 40px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;overflow-y:auto;display:flex;flex-direction:column}
.mobile-menu.open{transform:translateY(0);opacity:1;visibility:visible}
.mm-link,.mm-parent{display:flex;align-items:center;justify-content:space-between;width:100%;font-family:inherit;font-size:22px;font-weight:500;color:var(--nm-green);background:none;border:0;border-bottom:1px solid var(--nm-line);padding:18px 0;cursor:pointer;text-align:left}
.mm-parent i{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s;flex-shrink:0}
.mm-group.open .mm-parent i{transform:rotate(-135deg)}
.mm-sub{overflow:hidden;max-height:0;transition:max-height .35s ease}
.mm-group.open .mm-sub{max-height:340px}
.mm-sub a{display:block;font-size:17px;color:var(--nm-body);padding:12px 0 12px 2px}
.mm-sub a:last-child{padding-bottom:16px}
.mm-foot{margin-top:auto;padding-top:36px}
.mm-lang{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:22px}
.mm-lang a{color:var(--nm-body);font-size:16px}
.mm-lang a.active{color:var(--nm-green);font-weight:700}
.mm-contact{width:100%;justify-content:center;padding:16px}
/* Sticky reveal footer. .site-main scrolls over it - see globals.css. */
footer{background:var(--nm-green-footer);color:#cfe0d8;position:sticky;bottom:0;z-index:0;overflow:hidden}
footer .mono{position:absolute;right:2vw;bottom:-4vw;width:30vw;max-width:420px;opacity:.05;pointer-events:none}
footer .mono path,footer .mono polygon{fill:#fff}
footer .diag{position:absolute;inset:0;pointer-events:none}
footer .nm-wrap{position:relative;padding-top:156px;padding-bottom:60px}

.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:52px;padding-bottom:88px}
.f-logo{color:#fff}
.f-payoff{font-size:14px;color:var(--nm-mint);opacity:.85;margin:20px 0 26px}
.f-addr{font-size:14.5px;line-height:1.8;color:#a9c2b7}
.f-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#fff;margin-bottom:24px}
.f-col a{display:block;font-size:15px;color:#a9c2b7;padding:7px 0;transition:.15s}
.f-col a:hover{color:#fff}
.f-iso-logo{width:100%;max-width:230px;height:auto;display:block;margin-top:4px;border-radius:4px}
.f-cert{display:flex;flex-direction:column;gap:3px}
.f-cert-code{color:#fff;font-size:15px;font-weight:500;letter-spacing:.01em}
.f-cert-lbl{color:#8ba79b;font-size:13px}

.f-bottom{border-top:1px solid #ffffff14;padding-top:40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:13.5px;color:#ffffff66}
.f-bottom>div:first-child{justify-self:start}
.f-bottom .lks{justify-self:center;display:flex;gap:28px}
.f-bottom>div:last-child{justify-self:end}
.f-bottom a:hover{color:#fff}
/* Shared horizontal carousel shell and arrow buttons.
   Used by the solutions carousel and, from step 5, the case and article carousels. */
.carousel{display:flex;gap:28px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding:4px 32px 8px var(--nm-edge,var(--nm-gutter));scroll-padding-left:var(--nm-edge,var(--nm-gutter))}
.carousel::-webkit-scrollbar{display:none}

.art-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid #114b4c26;background:#fff;color:var(--nm-green);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.art-arrow svg{width:20px;height:20px}
.art-arrow:hover{border-color:var(--nm-green);background:var(--nm-green);color:#fff}
.art-arrow:disabled{opacity:.3;cursor:default}
.art-arrow:disabled:hover{background:#fff;color:var(--nm-green);border-color:#114b4c26}

.seg-tag{position:absolute;left:16px;bottom:14px;z-index:2;background:var(--nm-mint);color:var(--nm-green);font-size:13px;font-weight:700;padding:6px 13px;border-radius:var(--nm-r-sm);line-height:1.2}

/* Blocks - one file per block or block family, added as blocks land. */

/* nordmark/hero-video and nordmark/hero-page */

.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:88vh;background:#0e2a2b}
.hero-video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:0}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,#07201fe8 0%,#07201fbf 44%,#07201f61 100%);z-index:1}
.hero .nm-wrap{position:relative;z-index:2;width:100%}
.hero-copy{max-width:820px}
.hero-copy .eyebrow{margin-bottom:22px;background:none;padding:0;border-radius:0;color:#fff;font-size:15px;font-weight:600;letter-spacing:.01em}
.hero-copy h1{color:#fff;font-size:var(--nm-t-h1);line-height:1.04;letter-spacing:-.022em;margin-bottom:24px;max-width:15em;text-wrap:balance}
.hero-copy .lead{color:#ffffffdb;font-size:21px;line-height:1.55;max-width:32em;margin-bottom:40px}
.hero-copy .cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero .cc{position:absolute;right:28px;bottom:22px;z-index:2;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#ffffffcc}

.hero-hi{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden;background:#0e2a2b}
.hero-hi>img,.hero-hi-media{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;z-index:0}
.hero-hi .scrim{position:absolute;inset:0;background:linear-gradient(90deg,#07201f 0%,#07201fe0 34%,#07201f8c 66%,#07201f4d 100%);z-index:1}
.hero-hi .nm-wrap{position:relative;z-index:2;width:100%}
.hero-hi-in{max-width:820px}
.hero-hi-in .eyebrow{margin-bottom:24px}
.hero-hi-in h1{color:#fff;font-size:var(--nm-t-h1);line-height:1.04;letter-spacing:-.022em;margin-bottom:24px}
.hero-hi-in .lead{color:#ffffffdb;font-size:20px;line-height:1.55;max-width:34em;margin-bottom:36px}

/* Compact variant, matching the shorter hero used on the solution pages. */
.hero-hi--tight{min-height:58vh}
.hero-hi--tight .scrim{background:linear-gradient(90deg,#07201f 0%,#07201fe8 32%,#07201f8c 66%,#07201f4d 100%)}
.hero-hi--tight .hero-hi-in{max-width:760px}
.hero-hi--tight .hero-hi-in .lead{max-width:30em}

.hero-hi .crumbs{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:100%;max-width:var(--nm-wrap);padding:0 var(--nm-gutter);z-index:2}
.crumbs{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500}
.crumbs a{color:#ffffffb0;transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs .sep{color:#ffffff54}
.crumbs .cur{color:#fff}
/* nordmark/split-media, nordmark/feature-split, nordmark/why-split */

.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split.rev .split-img{order:-1}
.split-img{border-radius:var(--nm-r-lg);overflow:hidden;aspect-ratio:5/4}
.split-img img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.split .eyebrow{margin-bottom:24px}
.split h2{font-size:var(--nm-t-h2);margin-bottom:22px}
.split .lead{font-size:19px;color:var(--nm-body);margin-bottom:34px;max-width:26em}
.split .lead.qlead{max-width:none}

/* List variant: two columns of dotted labels. */
.caplist{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin-bottom:38px}
.caplist div{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;color:var(--nm-ink)}
.caplist div::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--nm-green);flex-shrink:0}

/* List variant: certification code over label. */
.qcerts{display:flex;gap:56px;margin:36px 0 40px;flex-wrap:wrap}
.qcert b{display:block;font-size:26px;font-weight:400;color:var(--nm-green);letter-spacing:-.02em}
.qcert span{font-size:14px;color:var(--nm-grey-green)}

/* List variant: two columns of checkmarks. */
.ss-list{list-style:none;margin:26px 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.ss-list li{position:relative;padding-left:28px;font-size:15px;color:var(--nm-ink);font-weight:500;line-height:1.4}
.ss-list li::before{content:"";position:absolute;left:4px;top:3px;width:7px;height:12px;border:solid var(--nm-green);border-width:0 2.3px 2.3px 0;transform:rotate(43deg)}

/* List variant: two columns with a leading icon. */
.qpts{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;margin-top:30px}
.qpt{display:flex;align-items:flex-start;gap:13px;font-size:16px;font-weight:500;color:var(--nm-ink);line-height:1.4}
.qpt svg{width:22px;height:22px;color:var(--nm-green);flex-shrink:0;margin-top:1px}

/* Feature split: edge to edge, text beside a full-height image. */
.sustain-full{display:grid;grid-template-columns:1fr 1fr;background:#fff}
.sustain-full .sf-content{display:flex;flex-direction:column;justify-content:center;padding:var(--nm-section-y) clamp(48px,5.5vw,110px)}
.sustain-full .sf-content .eyebrow{align-self:flex-start;margin-bottom:24px}
.sustain-full .sf-content h2{font-size:var(--nm-t-h2);margin-bottom:22px}
.sustain-full .sf-content .lead{font-size:19px;color:var(--nm-body);margin-bottom:34px;max-width:26em}
.sustain-full .sf-content .btn{align-self:flex-start}
.sustain-full .sf-img{position:relative;min-height:740px;order:2;overflow:hidden}
.sustain-full .sf-img img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.sustain-full--rev .sf-img{order:0}

/* Why split: image beside a green panel of benefits. */
.why-full{display:grid;grid-template-columns:1fr 1fr;background:var(--nm-green)}
.why-img{position:relative;min-height:740px;overflow:hidden}
.why-img img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.why-full--rev .why-img{order:2}
/* A dark panel has to establish light ink of its own. Every child below sets its own
   colour, so this changes nothing on the front end - but without it anything that
   inherits, including the editor's own controls, picks up the dark body colour and
   disappears against the green. */
.why-content{display:flex;flex-direction:column;justify-content:center;padding:var(--nm-section-y) clamp(48px,5.5vw,110px);color:#fff}
.why-content .eyebrow{margin-bottom:24px;align-self:flex-start}
.why-content h2{font-size:var(--nm-t-h2);margin-bottom:34px;color:#fff}
.why-content .lead{font-size:18px;line-height:1.55;color:#dbe8e3;margin-bottom:32px;max-width:26em}

.gains{display:flex;flex-direction:column}
.gain{display:flex;gap:18px;padding:22px 0;border-top:1px solid #ffffff21}
.gain:first-child{border-top:0;padding-top:0}
.gain .ico{width:28px;height:28px;color:var(--nm-mint);flex-shrink:0;margin-top:2px}
.gain .ico svg{width:100%;height:100%;display:block}
.gain h3{font-size:18px;font-weight:700;color:#fff;margin-top:0;margin-bottom:5px}
.gain p{font-size:15.5px;line-height:1.55;color:#cfe0d8}
/* nordmark/cta-banner and nordmark/band-cta */

.career-full{position:relative;min-height:660px;display:flex;align-items:center;overflow:hidden}
.career-full>img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.career-full .scrim{position:absolute;inset:0;background:#0a2322;opacity:.42;z-index:1}
.career-full .cn{position:absolute;left:2%;bottom:-14%;width:30%;opacity:.13;pointer-events:none;z-index:1}
.career-full .cn polygon{fill:#fff}
.career-full .nm-wrap{position:relative;z-index:2}
.career-in{max-width:680px;margin:0 auto;text-align:center}
.career-in .eyebrow{margin-bottom:22px}
.career-in h2{color:#fff;font-size:clamp(2.4rem,4vw,3.6rem);margin-bottom:18px}
.career-in .lead{color:#ffffffe0;font-size:19px;max-width:26em;margin:0 auto 34px}

.ml-section{scroll-margin-top:150px}
.ml-section--flush{padding-top:0}
.ml-band{background:var(--nm-green);border-radius:var(--nm-r-lg);padding:56px 60px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.ml-band h2{color:#fff;font-size:2rem;font-weight:500;letter-spacing:-.015em;margin-bottom:12px;line-height:1.1}
.ml-band p{color:#c4d8d1;font-size:17px;max-width:42em;line-height:1.55}
.ml-band .btn{gap:11px}
.ml-band .btn svg{width:20px;height:20px}
/* nordmark/stats */
.stats{background:var(--nm-green);color:#fff;position:relative;overflow:hidden}
.stats .nm-wrap{position:relative;z-index:1;padding:var(--nm-section-y) var(--nm-gutter)}
.stats .eyebrow{margin-bottom:44px}
/* Qualified with the tag for the same reason as h2.dprep-h: a lone class at (0,1,0)
   is the weakest heading rule in the theme and loses to editor and admin styles. */
h2.stats-title{color:#fff;font-size:clamp(1.7rem,2.5vw,2.35rem);font-weight:500;line-height:1.15;letter-spacing:-.01em;max-width:16em;margin-top:0;margin-bottom:54px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.stat{padding-right:28px}
.stat+.stat{padding-left:40px}
.stat .num{font-size:clamp(2.3rem,3vw,3.1rem);font-weight:400;color:var(--nm-mint);line-height:1;letter-spacing:-.03em;margin-bottom:12px;white-space:nowrap}
.stat .num i{font-style:normal;font-size:.42em;font-weight:700}
.stat .lab{font-size:15px;font-weight:700;color:#fff}
/* nordmark/process-flow. The .pflow-bg chevrons are drawn by the block's view.js. */
.pflow{display:flex;gap:10px}
.pflow-step{flex:1;position:relative;min-height:232px;color:#fff}
.pflow-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.pflow-in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:30px 50px 32px 60px}
.pflow-step:first-child .pflow-in{padding-left:34px}
.pflow-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pflow-ico{width:30px;height:30px;color:var(--nm-mint);flex-shrink:0}
.pflow-ico svg{width:100%;height:100%;display:block}
.pflow-n{font-family:"articulat-heavy-cf","articulat-cf",sans-serif;font-weight:900;font-size:1.5rem;color:var(--nm-mint);line-height:1}
.pflow-step h3{font-size:19px;font-weight:700;color:#fff;line-height:1.22;margin-bottom:10px}
.pflow-step p{font-size:14.5px;line-height:1.55;color:#e5f2ee}
/* nordmark/solutions-carousel.
   --nm-edge lines the track up with the page gutter while letting cards bleed
   past the right-hand edge of the container. */
.solutions-sec{--nm-edge:calc((100vw - min(100vw, var(--nm-wrap)))/2 + var(--nm-gutter))}

.sol-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px;padding:0 var(--nm-edge)}
.sol-head .sh-text{max-width:40em}
.sol-head h2{font-size:var(--nm-t-h2);margin-bottom:18px}
.sol-head p{font-size:19px;color:var(--nm-body);max-width:33em}
.sol-arrows{display:flex;gap:10px;flex-shrink:0}

.sol-card{flex:0 0 66%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,39%) 1fr;background:#EEF2F1;border-radius:var(--nm-r-lg);overflow:hidden;transition:transform .3s,background .3s}
.sol-card:hover{transform:translateY(-4px);background:#e6ecea}
.sol-card figure{position:relative;margin:0;overflow:hidden;min-height:360px}
.sol-card figure img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .85s var(--nm-ease)}
.sol-card:hover figure img{transform:scale(1.05)}
.sol-card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0a2322b3,transparent 44%);z-index:1;pointer-events:none}

.sc-body{padding:40px 42px 36px;display:flex;flex-direction:column}
.sc-body h3{font-size:26px;font-weight:500;color:var(--nm-green);line-height:1.16;letter-spacing:-.01em;margin-bottom:15px}
.sc-body>p{font-size:16px;line-height:1.6;color:var(--nm-body);margin-bottom:24px;max-width:34em}
.sc-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;margin-bottom:30px}
.sc-points li{position:relative;padding-left:27px;font-size:14.5px;line-height:1.35;color:var(--nm-ink);font-weight:500}
.sc-points li::before{content:"";position:absolute;left:7px;top:2px;width:6.5px;height:12px;border:solid var(--nm-green);border-width:0 2.3px 2.3px 0;transform:rotate(43deg)}
.sc-link{margin-top:auto;font-size:15px}

/* Desktop only: the section is pinned and the track is moved by view.js, so the
   track must not scroll itself and the cards size to the viewport. */
@media(min-width:1025px){
  .solutions-sec{padding:0}
  .sol-pin{position:sticky;top:0;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .sol-pin .sol-head{margin-bottom:44px}
  .sol-carousel{overflow:visible;width:-moz-max-content;width:max-content;flex-wrap:nowrap;will-change:transform;scroll-snap-type:none;padding-top:0;padding-bottom:0}
  .sol-card{flex:0 0 62vw}
}
/* nordmark/anchor-nav. top matches the sticky header height at each breakpoint. */
.cap-subnav{position:sticky;top:88px;z-index:90;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--nm-line);border-bottom:1px solid var(--nm-line)}
.cap-subnav-in{display:flex;align-items:center;gap:26px;padding-top:13px;padding-bottom:13px}
.cap-subnav-label{flex:0 0 auto;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nm-grey-green)}
.cap-nav{display:flex;gap:10px;flex:1;overflow-x:auto;scrollbar-width:none}
.cap-nav::-webkit-scrollbar{display:none}
.cap-nav a{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--nm-green);border:1px solid var(--nm-line);border-radius:var(--nm-r-pill);padding:9px 18px 9px 13px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.cap-nav a b{font-family:"articulat-heavy-cf","articulat-cf",sans-serif;font-weight:900;font-size:11.5px;color:var(--nm-grey-green);line-height:1;position:relative;top:1px;transition:color .2s}
.cap-nav a:hover,.cap-nav a.on{background:var(--nm-green);color:#fff;border-color:var(--nm-green)}
.cap-nav a:hover b,.cap-nav a.on b{color:var(--nm-mint)}
/* nordmark/image-collage */
.collage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:44px}
.collage figure{margin:0;border-radius:var(--nm-r-md);overflow:hidden;background:var(--nm-paper)}
.collage figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.collage img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
/* nordmark/icon-cards - three variants of one grid. */

/* Attached: sits directly under the section above it, with a divider instead of
   a full band of section padding.

   In the original static page both halves lived in one <section>, separated by an
   80px margin. As two blocks they each carry the full section rhythm, so the gap
   above the divider came out at 152px. Zeroing this block's padding-top only fixes
   its own half; the other half is the previous section's padding-bottom, and :has()
   is the only way to reach it from here. Together they restore the original 80px. */
.section--attached{padding-top:0}
.section:has(+ .section--attached){padding-bottom:80px}
/* No margin-top. In the original static page .dprep sat inside the same <section>
   as the block above it, so an 80px margin separated the two. As its own block it
   only ever renders inside .section--attached, which zeroes padding-top and has no
   top border - so a margin here collapses straight through the section and shows up
   as a band of page background between two tinted sections. The preceding section's
   padding-bottom already does the separating; this just draws the divider. */
.dprep{border-top:1px solid var(--nm-line);padding-top:44px}

/* Qualified with the tag so it scores (0,1,1), matching every other heading rule in
   the theme (.sec-head h2, .split h2, .cap-group h2 ...). As a lone class at (0,1,0)
   its margin lost to the heading spacing the block editor generates into the canvas
   at runtime, so the gap under it collapsed there while being correct on the front
   end. Identical rendering, just no longer the one rule that can be outranked. */
h2.dprep-h{font-size:26px;font-weight:500;color:var(--nm-green);margin-top:0;margin-bottom:26px;letter-spacing:-.01em;line-height:1.25}

/* Variant: photo cards. */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cap-card{display:flex;flex-direction:column;background:#EEF2F1;border-radius:var(--nm-r-md);overflow:hidden}
.cap-card figure{position:relative;aspect-ratio:16/10;overflow:hidden;margin:0}
.cap-card figure img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.cap-body{padding:23px 26px 27px;display:flex;flex-direction:column;gap:11px;flex:1}
.cap-card h3{font-size:19px;font-weight:500;color:var(--nm-green)}
.cap-card p{font-size:15px;line-height:1.55;color:var(--nm-body);flex:1}
.cap-cta{margin-top:46px;display:flex;justify-content:center}

/* Variant: icon tiles. */
.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dcard{display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:var(--nm-r-md);padding:30px}
.dcard h3{font-size:19px;font-weight:500;color:var(--nm-green)}
.dcard p{font-size:15px;line-height:1.55;color:var(--nm-body);flex:1}
.d-ico{width:46px;height:46px;border-radius:var(--nm-r-sm);background:var(--nm-green);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.d-ico svg{width:23px;height:23px}

/* Variant: plain columns. Written as final values rather than as a modifier on an
   unused four-column .steps base, so no dead rules ship. */
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--nm-line);margin-top:6px}
.steps-3 .step{background:transparent;border-radius:0;padding:34px 30px 0 0;color:var(--nm-body);position:relative;display:flex;flex-direction:column}
.steps-3 .step .top{display:flex;align-items:center;justify-content:flex-start;margin-bottom:20px}
.steps-3 .step .ico{width:30px;height:30px;color:var(--nm-green);display:block}
.steps-3 .step .ico svg{width:100%;height:100%;display:block}
.steps-3 .step h3{font-weight:500;color:var(--nm-green);font-size:20px;margin-bottom:10px;line-height:1.22}
.steps-3 .step p{font-size:15px;line-height:1.55;color:var(--nm-body)}
/* nordmark/capability-group */
.cap-group{padding:var(--nm-section-y) 0;border-top:1px solid var(--nm-line);scroll-margin-top:150px}
.cap-group--tight{padding-bottom:104px}
.cap-group h2{font-size:var(--nm-t-h2);color:var(--nm-green);margin-bottom:16px;line-height:1.1;letter-spacing:-.02em}

.cg-head{max-width:46em;margin-bottom:50px}
.cg-head .lead{font-size:18px;line-height:1.6;color:var(--nm-body);max-width:44em}
.cg-label{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.cg-num{font-family:"articulat-heavy-cf","articulat-cf",sans-serif;font-weight:900;font-size:13px;color:var(--nm-green);background:var(--nm-mint);border-radius:6px;padding:5px 10px;line-height:1}
.cg-eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nm-grey-green)}
.cap-group .split .cg-label{margin-bottom:18px}

.machine-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.machine{background:var(--nm-tint);border-radius:var(--nm-r-md);overflow:hidden;display:flex;flex-direction:column}
.m-photo{aspect-ratio:16/10;overflow:hidden;position:relative;margin:0}
.m-photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}
.m-body{padding:22px 25px 25px;display:flex;flex-direction:column;flex:1}
.m-body h3{font-size:18px;font-weight:600;color:var(--nm-green);letter-spacing:-.01em}
.m-body p{margin-top:7px;font-size:14px;line-height:1.5;color:var(--nm-body);flex:1}
.m-specs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;margin:20px 0 0;padding:0}
.m-specs li{display:flex;flex-direction:column;gap:3px}
.m-specs li span{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--nm-grey-green)}
.m-specs li b{font-size:15.5px;font-weight:600;color:var(--nm-ink)}
/* nordmark/intro-stats */
.cap-intro{align-items:flex-start;gap:64px}
.cap-intro h2{font-size:var(--nm-t-h2);color:var(--nm-green);margin-bottom:0;line-height:1.1;letter-spacing:-.02em}
.cap-intro .ci-copy p{font-size:18px;line-height:1.6;color:var(--nm-body)}
.cap-intro .ci-copy p+p{margin-top:18px}

.cap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.cap-stat{background:var(--nm-tint);border-radius:var(--nm-r-md);padding:30px 30px 32px}
.cap-stat .v{font-size:2.3rem;font-weight:500;color:var(--nm-green);letter-spacing:-.02em;line-height:1}
.cap-stat .k{margin-top:15px;font-size:16px;font-weight:700;color:var(--nm-ink)}
.cap-stat .d{margin-top:5px;font-size:14px;color:var(--nm-grey-green)}
/* nordmark/case-carousel and nordmark/article-carousel, plus the case and post
   archive templates that reuse the same card. */

/* --nm-edge lines the track up with the page gutter while letting cards bleed past
   the right-hand edge; --nm-card-w makes three cards fit the content width exactly. */
.articles{
	--nm-edge:calc((100vw - min(100vw, var(--nm-wrap)))/2 + var(--nm-gutter));
	--nm-card-w:calc((min(100vw, var(--nm-wrap)) - 2*var(--nm-gutter) - 56px)/3);
}

.articles .art-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:46px;padding:0 var(--nm-edge)}
.articles .art-head h2{font-size:var(--nm-t-h2)}
.art-head-r{display:flex;align-items:center;gap:30px;flex-shrink:0}
.art-arrows{display:flex;gap:10px}

.art-card{flex:0 0 var(--nm-card-w);scroll-snap-align:start;display:block}
.art-card figure{position:relative;overflow:hidden;border-radius:var(--nm-r-md);aspect-ratio:1/1;margin-bottom:20px;background:var(--nm-paper)}
.art-card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0a2322cc,transparent 46%);pointer-events:none;z-index:1}
.art-card img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .85s var(--nm-ease)}
.art-card:hover img{transform:scale(1.05)}

.art-card .go{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--nm-green);display:flex;align-items:center;justify-content:center;z-index:2;transition:.25s}
.art-card .go svg{width:19px;height:19px}
.art-card:hover .go{background:var(--nm-green);color:#fff}

.art-meta{display:flex;align-items:center;gap:14px;margin-bottom:9px;font-size:13px}
.art-cat{color:var(--nm-green);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.art-date{color:var(--nm-grey-green);font-weight:500}

.art-title{font-size:21px;font-weight:500;line-height:1.25;color:var(--nm-green);max-width:15em;transition:color .2s}
.art-card:hover .art-title{color:var(--nm-green-d)}

.case-card .art-title{margin-bottom:9px}
.case-desc{font-size:15px;line-height:1.55;color:var(--nm-body);max-width:26em}

.art-card .facts{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.art-card .facts li{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--nm-grey-green);background:var(--nm-tint);border-radius:var(--nm-r-sm);padding:5px 10px}

/* Archive pages lay the same card out on a grid instead of a track. */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 28px}
.art-grid .art-card{flex:none}

/* Single case and single post. */
.entry{max-width:44em}
.entry-meta{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-size:13px}
.entry h1{font-size:var(--nm-t-h2);margin-bottom:22px}
.entry-lead{font-size:19px;line-height:1.6;color:var(--nm-body);margin-bottom:34px}
.entry-media{border-radius:var(--nm-r-lg);overflow:hidden;margin-bottom:44px;aspect-ratio:16/9}
.entry-media img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.entry-body{font-size:17px;line-height:1.7;color:var(--nm-body)}
.entry-body > * + *{margin-top:20px}
.entry-body h2{font-size:26px;margin-top:38px;margin-bottom:12px}
.entry-body h3{font-size:20px;margin-top:30px;margin-bottom:10px}
.entry-body ul,.entry-body ol{padding-left:22px}
.entry-body li+li{margin-top:8px}
.entry-body a{color:var(--nm-green);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.entry-body img{border-radius:var(--nm-r-md)}
.entry-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:0}
.entry-facts li{font-size:13px;font-weight:600;color:var(--nm-grey-green);background:var(--nm-tint);border-radius:var(--nm-r-sm);padding:7px 13px}

/* Pagination shared by the archives and search. */
.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:56px}
.nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border-radius:var(--nm-r-pill);border:1.5px solid var(--nm-line);color:var(--nm-green);font-size:15px;font-weight:700;transition:background .2s,border-color .2s,color .2s}
.nav-links .page-numbers:hover,.nav-links .page-numbers.current{background:var(--nm-green);border-color:var(--nm-green);color:#fff}
.nav-links .dots{border-color:transparent}
.nav-links .dots:hover{background:none;color:var(--nm-green)}
/* nordmark/contact, and the Gravity Forms markup inside it.
   GF's own stylesheets are switched off in inc/gravity-forms.php, so everything the
   plugin outputs is styled here from scratch with the theme's tokens. Nothing below
   needs !important, because there is no plugin CSS left to outrank. */

.section.contact{border-top:1px solid var(--nm-line)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start}
.contact .eyebrow{margin-bottom:24px}
.contact h2{font-size:var(--nm-t-h2);margin-bottom:22px}
.contact .lead{font-size:19px;color:var(--nm-body);max-width:28em;margin-bottom:18px}

.cinfo a{display:flex;align-items:center;gap:14px;font-size:18px;color:var(--nm-ink);font-weight:700;padding:9px 0}
.cinfo a svg{width:26px;height:26px;color:var(--nm-grey-green);flex-shrink:0}
.cinfo a:hover{color:var(--nm-green)}

.team{display:flex;align-items:center;gap:12px;margin-top:18px}
.team-avatars{display:flex}
.team-avatars img{width:54px;height:54px;border-radius:50%;-o-object-fit:cover;object-fit:cover;border:3px solid #fff;margin-left:-16px;box-shadow:0 2px 10px -4px #11202033;background:var(--nm-paper)}
.team-avatars img:first-child{margin-left:0}
.team-text{display:flex;flex-direction:column;gap:2px}
.team-text strong{font-size:16px;font-weight:700;color:var(--nm-green)}
.team-text span{font-size:14px;color:var(--nm-grey-green)}

.specialist{display:flex;align-items:center;gap:22px;margin-top:4px;background:var(--nm-tint);border-radius:var(--nm-r-md);padding:22px 24px}
.specialist img{width:112px;height:128px;border-radius:var(--nm-r-sm);-o-object-fit:cover;object-fit:cover;-o-object-position:center 12%;object-position:center 12%;flex-shrink:0;background:var(--nm-paper)}
.spec-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.spec-txt strong{font-size:19px;font-weight:700;color:var(--nm-green);line-height:1.2}
.spec-role{font-size:14.5px;color:var(--nm-grey-green);margin-bottom:12px}
.spec-contact{display:flex;flex-direction:column;gap:8px}
.spec-contact a{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--nm-ink);font-weight:500;transition:color .2s}
.spec-contact a:hover{color:var(--nm-green)}
.spec-contact svg{width:17px;height:17px;color:var(--nm-green);flex-shrink:0}

.form-title{font-size:22px;font-weight:500;color:var(--nm-green);margin:0 0 18px}

/* --- Gravity Forms ------------------------------------------------------------
   The plugin renders a <form> wrapped in .gform_wrapper. Field rows are .gfield
   inside a .gform_fields grid; GF sets its own grid column count per field, which
   is honoured below so a half-width field stays half-width. */

/* GF adds its own margins around the wrapper, form and every field, which loosens
   the 16px rhythm the design uses. Zeroed so the grid gap is the only spacing. */
.gform_wrapper,
.gform_wrapper form,
.gform_wrapper .gform_body{margin:0;padding:0}
.gform_wrapper form{display:block}
.gform_wrapper .gform_fields{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;list-style:none;margin:0;padding:0}
.gform_wrapper .gfield{grid-column:span 12;min-width:0;margin:0;padding:0}
.gform_wrapper fieldset{border:0;margin:0;padding:0;min-width:0}
.gform_wrapper .gfield.gfield--width-half{grid-column:span 6}
.gform_wrapper .gfield.gfield--width-third{grid-column:span 4}
.gform_wrapper .gfield.gfield--width-quarter{grid-column:span 3}

/* The design has no visible labels - the placeholder carries the name - but they
   must stay in the accessibility tree. */
.gform_wrapper .gfield_label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gform_wrapper .gform_required_legend,
.gform_wrapper .gfield_description:not(.validation_message){display:none}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper select,
.gform_wrapper textarea{
	width:100%;
	background:var(--nm-paper);
	border:0;
	border-radius:var(--nm-r-sm);
	padding:16px 18px;
	font-family:inherit;
	font-size:16px;
	color:var(--nm-ink);
	transition:box-shadow .2s;
}

.gform_wrapper input::-moz-placeholder, .gform_wrapper textarea::-moz-placeholder{color:var(--nm-grey-green);opacity:1}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{color:var(--nm-grey-green);opacity:1}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--nm-green)}

/* GF writes rows="10" on the textarea, so its intrinsic height is ~242px and a
   min-height alone never engages. An explicit height pins it to the design's four
   rows; resize:vertical means anyone who needs more room can still drag it. */
.gform_wrapper textarea{display:block;height:130px;min-height:130px;resize:vertical}

/* File upload.
   The design is one tinted row: an icon tile, then the field's label and its
   description stacked beside it. GF instead renders "Drop files here or" plus a
   Select files button, so those are hidden and the button is stretched over the whole
   row at zero opacity - clicking anywhere opens the picker, and GF keeps its own
   drag-and-drop and validation. The two lines of text come from the field's Label and
   Description in Forms, so the wording stays editable. */
.gform_wrapper .gfield--type-fileupload{
	position:relative;
	display:grid;
	grid-template-columns:42px 1fr;
	gap:3px 14px;
	align-items:center;
	background:var(--nm-paper);
	border-radius:var(--nm-r-sm);
	padding:15px 18px;
	cursor:pointer;
	transition:box-shadow .2s;
}
.gform_wrapper .gfield--type-fileupload:hover{box-shadow:inset 0 0 0 1.5px var(--nm-green)}

.gform_wrapper .gfield--type-fileupload::before{
	content:"";
	grid-column:1;
	grid-row:1/3;
	width:42px;
	height:42px;
	border-radius:var(--nm-r-sm);
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23114B4C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5V4M8 8l4-4 4 4'/%3E%3Cpath d='M4 14v4a2 2 0 002 2h12a2 2 0 002-2v-4'/%3E%3C/svg%3E") center/22px no-repeat;
}

/* This is the one field whose label is meant to be read, so it comes back out of
   the screen-reader-only treatment applied to every other label. */
.gform_wrapper .gfield--type-fileupload .gfield_label{
	cursor:pointer;
	position:static;
	grid-column:2;
	grid-row:1;
	width:auto;
	height:auto;
	margin:0;
	padding:0;
	overflow:visible;
	clip:auto;
	white-space:normal;
	font-size:15px;
	font-weight:700;
	color:var(--nm-green);
	line-height:1.25;
}

/* The description, the file list and the drop area are all nested inside this
   container rather than being siblings of the label, so the container itself is the
   second grid row and its children lay out inside it. */
.gform_wrapper .gfield--type-fileupload .ginput_container_fileupload{
	grid-column:2;
	grid-row:2;
	min-width:0;
	background:none;
	padding:0;
	margin:0;
}

/* The second line of text. GF writes this automatically from the field's allowed
   extensions and size limit, so it can never fall out of step with what the form
   actually accepts. A Description typed on the field wins over it - see below. */
.gform_wrapper .gfield--type-fileupload .gfield_description{
	display:block;
	margin:0;
	padding:0;
	font-size:12.5px;
	color:var(--nm-grey-green);
	line-height:1.2;
}
.gform_wrapper .gfield--type-fileupload:has(.gfield_description:not(.gform_fileupload_rules)) .gform_fileupload_rules{display:none}

/* GF's own prompt and button are replaced by a transparent sheet over the whole
   row, so a click anywhere opens the picker while its drag-and-drop still works. */
/* plupload sets position:relative on this inline, which would make it the containing
   block for the shim below - and it has no height of its own, so the shim would
   collapse to nothing. Forcing it static hands that role back to the field. */
.gform_wrapper .gfield--type-fileupload .gform_fileupload_multifile{position:static !important}
.gform_wrapper .gfield--type-fileupload .gform_drop_area{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:0;background:none}
.gform_wrapper .gfield--type-fileupload .gform_drop_instructions{display:none}
.gform_wrapper .gfield--type-fileupload .gform_button_select_files{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	border:0;
	background:none;
	opacity:0;
	cursor:pointer;
}

/* What actually opens the file picker.
   Plupload injects the real <input type="file"> inside a .moxie-shim and sizes that
   shim with inline styles, measured from the browse button. Because the button is the
   transparent sheet above, the measurement comes back 0px high and only a sliver of
   the row is clickable - the label works solely because its `for` points at the input.
   Stretching the shim over the row makes the whole thing open the picker.

   The !important here is unavoidable rather than lazy: plupload writes width, height
   and position onto the element as inline styles, which no selector can outrank. The
   only other use in this file is on GF's honeypot, for the same reason. */
.gform_wrapper .gfield--type-fileupload .moxie-shim{
	position:absolute !important;
	inset:0 !important;
	width:100% !important;
	height:100% !important;
	z-index:3 !important;
	overflow:hidden;
}
.gform_wrapper .gfield--type-fileupload .moxie-shim input[type=file]{
	width:100%;
	height:100%;
	cursor:pointer;
	opacity:0;
	font-size:0;
}

/* cursor on the input itself only covers the strip its own text occupies - the rest
   of a file input is a shadow-DOM button that keeps the default arrow. Growing that
   button to fill the input puts the pointer across the whole row. */
.gform_wrapper .gfield--type-fileupload .moxie-shim input[type=file]::file-selector-button{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
}
.gform_wrapper .gfield--type-fileupload .moxie-shim input[type=file]::-webkit-file-upload-button{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
}

/* Selected files sit above both the sheet and the shim so their remove links work. */
.gform_wrapper .gfield--type-fileupload .ginput_preview_list,
.gform_wrapper .gfield--type-fileupload .ginput_preview{position:relative;z-index:4;font-size:13.5px;color:var(--nm-body)}
.gform_wrapper .gfield--type-fileupload .ginput_preview_list:not(:empty){margin-top:10px}
.gform_wrapper .gfield--type-fileupload .gform_delete_file{color:var(--nm-rust)}
.gform_wrapper .gfield--type-fileupload .validation_message{position:relative;z-index:2}

/* Checkboxes and radios.
   GF's Consent field does not use .gchoice like a normal checkbox field - it puts
   the input and label directly inside .ginput_container_consent - so both shapes
   are covered here. */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gform_wrapper .gchoice,
.gform_wrapper .ginput_container_consent{display:flex;align-items:center;gap:12px}

.gform_wrapper .gchoice input[type=checkbox],
.gform_wrapper .gchoice input[type=radio],
.gform_wrapper .ginput_container_consent input[type=checkbox]{width:20px;height:20px;flex-shrink:0;accent-color:var(--nm-green);cursor:pointer;margin:0}

.gform_wrapper .gchoice label,
.gform_wrapper .gfield_consent_label{font-size:15px;color:var(--nm-body);cursor:pointer;margin:0;line-height:1.4}
.gform_wrapper .gchoice label a,
.gform_wrapper .gfield_consent_label a{color:var(--nm-green);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* The design marks no field as required, and every input already carries
   aria-required, so the asterisk is hidden rather than removed from the markup. */
.gform_wrapper .gfield_required{display:none}

/* Housekeeping for GF's own utility markup. */
.gform_wrapper .gform_hidden{display:none}
.gform_wrapper .gform-ul-reset{list-style:none;margin:0;padding:0}
.gform_wrapper .validation_message--hidden-on-empty:empty{display:none}

/* Submit.
   GF renders an <input type="submit">, which cannot hold a child element, so the
   design's arrow is a background image rather than an inline SVG. Replacing the
   markup through gform_submit_button would work too, but it carries GF's own
   double-submit and AJAX guards in its onclick, and losing those is not worth an
   icon. Hover shifts the arrow the same 4px the theme's own buttons do. */
.gform_wrapper .gform_footer{margin:22px 0 0;padding:0;display:flex}
.gform_wrapper .gform_button{
	display:inline-flex;
	align-items:center;
	font-family:inherit;
	font-weight:700;
	font-size:15px;
	border:0;
	border-radius:var(--nm-r-pill);
	background-color:var(--nm-green);
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 12h13.5M11.5 5.5L18 12l-6.5 6.5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 26px center;
	background-size:18px 18px;
	color:#fff;
	padding:15px 56px 15px 28px;
	cursor:pointer;
	white-space:nowrap;
	transition:background-color .3s ease,background-position .2s ease;
}
.gform_wrapper .gform_button:hover{background-color:var(--nm-green-d);background-position:right 22px center}

/* Validation and confirmation. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select{box-shadow:inset 0 0 0 1.5px var(--nm-rust)}
.gform_wrapper .validation_message{margin-top:7px;font-size:13.5px;font-weight:600;color:#a2513a}
.gform_wrapper .gform_validation_errors{margin-bottom:20px;padding:16px 18px;border-radius:var(--nm-r-sm);background:#d2896a1f;color:#a2513a;font-size:14.5px}
.gform_wrapper .gform_validation_errors h2{font-size:15px;color:#a2513a;margin:0}
.gform_confirmation_message{padding:22px 24px;border-radius:var(--nm-r-md);background:var(--nm-tint);color:var(--nm-green);font-size:17px;font-weight:500}

/* GF's spam honeypot must stay in the DOM but never be seen. */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield_visibility_hidden{position:absolute!important;left:-9999px}
/* Breakpoints last so they win on equal specificity. */
/* Breakpoint overrides. Feature-specific rules stay with their feature file;
   this holds the global token shifts and the shared chrome collapse. */
@media(max-width:1024px){
  :root{--nm-section-y:104px;--nm-gutter:40px}
  .menu,.nav-right{display:none}
  .nav-toggle{display:flex}
  .nav{height:72px}
  .f-grid{grid-template-columns:1fr 1fr;gap:44px}

  .hero{min-height:76vh}
  .hero-copy{max-width:100%}
  .hero-hi-in{max-width:640px}
  .hero-hi--tight .hero-hi-in{max-width:600px}

  .split,.contact-grid{grid-template-columns:1fr;gap:44px}
  .split.rev .split-img{order:0}
  .why-full,.sustain-full{grid-template-columns:1fr}
  .why-img,.sustain-full .sf-img{min-height:360px;order:0}
  .why-full--rev .why-img,.sustain-full--rev .sf-img{order:0}
  .why-content,.sustain-full .sf-content{padding:64px var(--nm-gutter)}

  .career-full{min-height:520px}
  .ml-band{grid-template-columns:1fr;padding:40px}

  .cap-subnav{top:72px}

  /* The chevron row becomes a swipeable strip below the pinned breakpoint. */
  .pflow{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;margin:0 calc(-1*var(--nm-gutter));padding:4px var(--nm-gutter) 8px;scroll-padding-left:var(--nm-gutter);gap:12px}
  .pflow::-webkit-scrollbar{display:none}
  .pflow-step{flex:0 0 46%;scroll-snap-align:start}

  .sol-card{flex-basis:80%}
  .sol-head p{max-width:none}

  .cap-intro{grid-template-columns:1fr;gap:28px}
  .cap-stats{grid-template-columns:1fr 1fr}
  .machine-grid{grid-template-columns:1fr 1fr}
  .cap-grid,.dcards{grid-template-columns:1fr 1fr}
  .cap-group--tight{padding-bottom:40px}

  .art-card{flex-basis:46%}
  .art-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  :root{--nm-section-y:64px;--nm-gutter:20px;--nm-t-h1:2rem;--nm-t-h2:1.6rem;--nm-t-h3:19px;--nm-t-lead:17px;--nm-t-body:16px}
  .nav{height:62px}
  header .brand{height:23px}
  .btn{font-size:14.5px}
  .mobile-menu{padding:88px var(--nm-gutter) 36px}
  .sec-head{margin-bottom:38px}
  footer{position:relative;bottom:auto}
  footer .nm-wrap{padding-top:88px;padding-bottom:36px}
  .f-grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .f-bottom{grid-template-columns:1fr;justify-items:start;gap:14px;padding-top:32px}
  .f-bottom .lks{justify-self:start;flex-wrap:wrap;gap:18px}
  .f-bottom>div:last-child{justify-self:start}

  .hero{min-height:auto;align-items:flex-start;padding-top:104px;padding-bottom:52px}
  .hero-copy .lead{font-size:17px;margin-bottom:30px}
  .hero-copy .cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero-copy .cta .btn{width:100%;justify-content:center}
  .hero .cc{font-size:11px;right:16px;bottom:14px}

  .hero-hi{min-height:auto;align-items:flex-start;padding-top:92px;padding-bottom:48px}
  .hero-hi .crumbs{top:20px}
  .hero-hi--tight .hero-hi-in .lead{font-size:16.5px;margin-bottom:28px}
  .hero-btns{width:100%}
  .hero-btns .btn{flex:1 1 auto;justify-content:center}

  .why-img,.sustain-full .sf-img{min-height:250px}
  .why-content,.sustain-full .sf-content{padding:48px var(--nm-gutter)}
  .qpts{grid-template-columns:1fr;gap:14px}
  .ss-list{grid-template-columns:1fr}

  .career-full{min-height:400px}

  .grid5{grid-template-columns:1fr 1fr;gap:30px 24px}
  .stat,.stat+.stat{border:0;padding:0}
  .stat .num{font-size:2.1rem}
  /* Matches the qualified base selector in blocks/stats.css - a bare .stats-title
     here would score lower than it and never apply. */
  h2.stats-title{margin-bottom:32px;font-size:1.55rem}

  .pflow-step{flex:0 0 80%}

  .cap-subnav{top:62px}
  .cap-subnav-in{padding-left:0;padding-right:0}
  .cap-subnav-label{display:none}
  .cap-nav{padding:0 var(--nm-gutter);scroll-padding-left:var(--nm-gutter)}

  .sol-head{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:24px}
  .sol-head p{max-width:none}
  .sol-arrows{justify-content:flex-start}
  .sol-carousel{gap:14px}
  .sol-card{flex:0 0 86%;grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .sol-card figure{min-height:0;aspect-ratio:16/9}
  .sc-body{padding:24px 22px 26px}
  .sc-body h3{font-size:20px;line-height:1.16;margin-bottom:12px}
  .sc-body>p{font-size:14px;line-height:1.5;margin-bottom:18px}
  .sc-points{gap:9px 16px;margin-bottom:20px}
  .sc-points li{font-size:12.5px}
  .sc-link{font-size:14px}

  /* The mosaic becomes a swipeable strip; the lead tile stops spanning. */
  .collage{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;margin:0 calc(-1*var(--nm-gutter));padding:2px var(--nm-gutter);scroll-padding-left:var(--nm-gutter);gap:14px}
  .collage::-webkit-scrollbar{display:none}
  .collage figure{flex:0 0 78%;scroll-snap-align:start;aspect-ratio:4/3;grid-column:auto;grid-row:auto}

  .articles .art-head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:14px}
  .art-head-r{width:100%;justify-content:flex-end;flex-direction:row-reverse;gap:18px}
  .art-arrow{width:42px;height:42px}
  .art-arrow svg{width:17px;height:17px}
  .art-card{flex-basis:82%}
  .art-title{font-size:19px}
  .art-grid{grid-template-columns:1fr;gap:34px}
  .entry-media{aspect-ratio:4/3}

  .contact-grid{gap:40px}
  .cinfo a{font-size:16px}
  .specialist{gap:16px;padding:18px}
  .specialist img{width:92px;height:108px}
  .spec-txt strong{font-size:17px}
  .gform_wrapper .gfield.gfield--width-half,
  .gform_wrapper .gfield.gfield--width-third,
  .gform_wrapper .gfield.gfield--width-quarter{grid-column:span 12}

  .cap-stats,.ss-list{grid-template-columns:1fr}
  .steps-3{grid-template-columns:1fr}
  /* The original tightened this junction to 52px on small screens. */
  .dprep{padding-top:34px}
  .section:has(+ .section--attached){padding-bottom:52px}
  .cap-cta{justify-content:flex-start;margin-top:28px}

  /* Card grids and the machine list become swipeable strips. */
  .cap-grid,.dcards{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--nm-gutter));padding:0 var(--nm-gutter);scroll-padding-left:var(--nm-gutter);scrollbar-width:none}
  .cap-grid::-webkit-scrollbar,.dcards::-webkit-scrollbar{display:none}
  .cap-grid>*,.dcards>*{flex:0 0 80%;scroll-snap-align:start}

  .machine-grid{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;margin:0 calc(-1*var(--nm-gutter));padding:2px var(--nm-gutter) 6px;scroll-padding-left:var(--nm-gutter);gap:14px}
  .machine-grid::-webkit-scrollbar{display:none}
  .machine-grid>.machine{flex:0 0 80%;scroll-snap-align:start}
}

@media(max-width:400px){
  :root{--nm-t-h1:1.82rem}
  .f-grid{grid-template-columns:1fr;gap:26px}
  .grid5{gap:26px 18px}
}