/* ============================================================
   WDK FOOTER — dark restyle over Porto's existing footer DOM.
   Enqueued SITEWIDE by inc/wdk-footer.php at WDK_VER, after
   wdk-shop.css / wdk-chrome.css (dependency chain).

   Direction (owner feedback 2026-08-17): the live footer is a
   jade gradient — move away from it. This one is near-black warm
   charcoal with white text, a thin jade top edge + faint jade
   glow, jade section labels, the orange contact pills, and a
   darker copyright strip. Instantly not-the-live-site.

   DOM (discovery/wdk-home-live.html — restyled in place, never
   overridden):
     .footer-wrapper > #footer.footer.footer-1
       .footer-main > .container > .row
         .col-lg-6 (all real widgets)      .col-lg-6 (#block-23, empty)
           #klaviyo_emailsignup_widget-3   newsletter (title/p/form)
           #block-20/21/30                 empty jetpack shells → hidden
           #block-26 / #block-27 / #block-28  tel / wa.me / mailto links
             (wdk-chrome.js rebuilds these into a.wdk-cbtn pills —
              this file owns ALL .wdk-cbtn styling now)
           #text-9                         service area
           #block-35                       social links
           #block-38                       Privacy | Terms
       .footer-bottom > .container         copyright
   Layout: bootstrap cols flattened with display:contents, widgets
   re-columned on one grid by id → named areas.

   Specificity: `body` prefix + !important on the surfaces that
   Porto's skin CSS / "Simple Custom CSS" also paint, per the
   chrome layer's convention. Tokens are --wdkf-* scoped to the
   footer so this sheet stands alone (Archivo Black's @font-face
   ships in wdk-shop.css).
   ============================================================ */

.footer-wrapper{
  /* MINT DISPATCH (owner chose it from the lighter-footer artifact,
     2026-08-18). The footer stops being the page's second dark slab: a mint
     field, the three contact actions promoted into a deep-jade rail across
     the top edge, and orange spent only on the newsletter button.
     Contrast, since jade is easy to get wrong: white on #3EB785 is 2.5:1 and
     unusable, so the rail is #177A52 (white on it = 5.3:1) and body type is
     jade-ink on mint (>12:1). */
  --wdkf-bg:#F1F9F5;               /* mint — main field                     */
  --wdkf-bg-deep:#E4F2EA;          /* copyright strip                       */
  --wdkf-rail:#177A52;             /* the dispatch rail                     */
  --wdkf-rail-txt:#FFFFFF;
  --wdkf-rail-sub:#E6F6EE;
  --wdkf-line:rgba(12,59,40,.14);
  --wdkf-txt:#26433A;
  --wdkf-dim:#5B7A6D;
  --wdkf-ink:#0C3B28;
  --wdkf-jade:#177A52;
  --wdkf-orange:#FF9800;
  --wdkf-orange-hover:#FFA51D;
  --wdkf-on-orange:#1A1204;        /* ink text on orange fills              */
  --wdkf-display:'Archivo Black',Impact,'Arial Black',sans-serif;
  --wdkf-ui:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---- surfaces ------------------------------------------------------- */
body .footer-wrapper{background:var(--wdkf-bg)!important;border-top:0}
body #footer{background:transparent!important;color:var(--wdkf-txt);font-family:var(--wdkf-ui)}
body #footer .footer-main{padding:0 0 52px;-webkit-font-smoothing:antialiased;position:relative}
/* Porto puts 64px of padding on the .container inside .footer-main, which is
   what pushed the actions 64px below the painted band. Zeroed here so row 1
   starts exactly where the rail does; the footer's breathing room now comes
   from the second row's own margin. */
body #footer .footer-main > .container{padding-top:0}
/* The rail is painted on .footer-main itself — a hard-stop gradient at the
   rail's height. Earlier attempts positioned a 100vw pseudo-element off the
   .row, but the row is neither viewport-width nor viewport-centred here, so
   the band landed ~78px to the right. .footer-main spans the wrapper, so a
   gradient on it is full-bleed by construction. */
body #footer .footer-main{
  background:linear-gradient(180deg,var(--wdkf-rail) 0 var(--wdkf-rail-h,104px),transparent var(--wdkf-rail-h,104px))!important;
  --wdkf-rail-h:104px}
/* 50%/translateX, not calc(50% - 50vw): the percentage resolves against the
   ROW's width, so inside a padded container the calc form lands off-centre —
   which is what left a gap on one side and an overhang on the other. */

body #footer .footer-main .row > *{position:relative;z-index:1}

/* ---- one grid over the flattened bootstrap columns ------------------ */
body #footer .footer-main .row{display:grid;margin:0;position:relative; /* the rail's ::before anchors HERE, not on .footer-main, or the band floats above row 1 */
  --wdkf-rail-h:104px;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr) minmax(0,.9fr) auto;
  /* The socials column is gone (owner, 2026-08-17); the policies block takes
     the last column outright and stays pinned to the bottom of it. A leftover
     'soc' area would collapse to zero width but still cost a 52px column gap
     on the right, so it is removed from the template, not just emptied. */
  /* Row 1 IS the rail — the three actions sit in it side by side; the
     newsletter, service area and policies fall below it. */
  grid-template-areas:
    "call chat mail mail"
    "news area area pol";
  column-gap:52px;row-gap:12px;align-content:start}
body #footer .footer-main .row > .col-lg-6,
body #footer .footer-main .row > [class*="col-"]{display:contents}
#footer #klaviyo_emailsignup_widget-3{grid-area:news}
/* The three actions ARE the rail's contents: row 1 is exactly the band's
   height, so the painted band lines up with them without any negative-margin
   trickery (which lost to #footer .widget{margin:0} anyway). The rest of the
   footer gets its breathing room from the second row instead. */
#footer #block-26,#footer #block-27,#footer #block-28{
  height:var(--wdkf-rail-h);display:flex;align-items:center;justify-self:stretch;margin:0}
#footer #klaviyo_emailsignup_widget-3,
#footer #text-9,
#footer #block-38{margin-top:44px}
#footer #block-26{grid-area:call;justify-content:flex-start}
#footer #block-27{grid-area:chat;justify-content:center}
#footer #block-28{grid-area:mail;justify-content:flex-end}
#footer #text-9{grid-area:area}
#footer #block-35{grid-area:soc}
#footer #block-38{grid-area:pol;align-self:end}
/* empty jetpack/list shells */
#footer #block-20,#footer #block-21,#footer #block-23,#footer #block-30{display:none}

#footer .widget{margin:0;padding:0;border:0}

/* ---- section labels: small jade caps (the newsletter lead keeps the
        display face — one loud element, everything else quiet) --------- */
#footer .widget-title{font:800 11px/1 var(--wdkf-ui);letter-spacing:.22em;text-transform:uppercase;
  color:var(--wdkf-jade);background:none;border:0;margin:0 0 16px;padding:0}
#footer #klaviyo_emailsignup_widget-3 p{color:var(--wdkf-dim)}
#footer #klaviyo_emailsignup_widget-3 .widget-title{font-family:var(--wdkf-display);font-weight:400;
  font-size:21px;letter-spacing:0;color:var(--wdkf-ink);margin-bottom:8px}

/* ---- newsletter ------------------------------------------------------ */
#footer #klaviyo_emailsignup_widget-3 p{color:var(--wdkf-txt);font-size:13.5px;line-height:1.6;margin:0 0 16px}
#footer .klaviyo_field_group{display:flex;max-width:420px;background:#fff;
  border:1px solid rgba(12,59,40,.18);border-radius:12px;overflow:hidden;
  transition:border-color .15s ease}
#footer .klaviyo_field_group:focus-within{border-color:var(--wdkf-jade)}
#footer .klaviyo_field_group label{display:none}
#footer .klaviyo_field_group input[type=text]{flex:1;min-width:0;background:transparent;border:0;
  color:var(--wdkf-ink);font:400 14px/1.4 var(--wdkf-ui);padding:13px 16px;outline:none;box-shadow:none}
#footer .klaviyo_field_group input[type=text]::placeholder{color:#7d968b}
#footer .klaviyo_submit_button{background:var(--wdkf-orange);color:var(--wdkf-on-orange);border:0;
  font:800 13px/1 var(--wdkf-ui);letter-spacing:.02em;padding:0 20px;cursor:pointer;
  transition:background .15s ease}
#footer .klaviyo_submit_button:hover{background:var(--wdkf-orange-hover)}
#footer .klaviyo_submit_button:focus-visible{outline:2px solid var(--wdkf-ink);outline-offset:-3px}
#footer .klaviyo_messages{margin-top:10px;font-size:13px}
#footer .klaviyo_messages .success_message{color:var(--wdkf-jade)}
#footer .klaviyo_messages .error_message{color:#FF8A80}

/* ---- contact pills (a.wdk-cbtn — DOM built by wdk-chrome.js from the
        #block-26/27/28 tel/wa.me/mailto links; CSS owned HERE) ---------- */
.footer-wrapper a.wdk-cbtn,
#footer a.wdk-cbtn{display:inline-flex;align-items:center;gap:10px;
  /* White pill on the jade rail: orange on #177A52 is ~1.2:1 and would
     vanish, and white-on-jade type is 5.3:1 only for the rail's own labels. */
  background:#fff;color:var(--wdkf-ink)!important;
  font:800 13px/1 var(--wdkf-ui);letter-spacing:.02em;text-transform:lowercase;
  padding:13px 22px;border-radius:999px;min-width:190px;text-decoration:none!important;
  transition:background .15s ease,transform .15s ease}
/* Icon pinned left, label centred in the space that remains (owner,
   2026-08-17). The icon is taken out of the flex flow with position:absolute
   so the label centres on the BUTTON, not on the leftover room beside the
   icon — otherwise every label sits a few px right of true centre and the
   three pills disagree with each other. */
.footer-wrapper a.wdk-cbtn,
#footer a.wdk-cbtn{position:relative;justify-content:center;gap:0;
  padding-inline:46px}
.footer-wrapper a.wdk-cbtn svg,
#footer a.wdk-cbtn svg{position:absolute;left:16px;top:50%;transform:translateY(-50%)}
.footer-wrapper a.wdk-cbtn span,
#footer a.wdk-cbtn span{display:block;text-align:center}
.footer-wrapper a.wdk-cbtn:hover,
#footer a.wdk-cbtn:hover{background:#EAF6F0;color:var(--wdkf-ink)!important;
  transform:translateY(-1px)}
.footer-wrapper a.wdk-cbtn:focus-visible,
#footer a.wdk-cbtn:focus-visible{outline:2.5px solid #fff;outline-offset:3px}
.footer-wrapper a.wdk-cbtn svg,
#footer a.wdk-cbtn svg{width:18px;height:18px;flex:0 0 18px}

/* no-JS fallback: the original PNG buttons, kept tidy (the rebuild replaces
   them on load; if it never runs these still read as three buttons). */
#footer .widget_media_image figure{margin:0}
#footer .widget_media_image img{width:160px!important;height:auto!important;display:block;border-radius:10px}
#footer .widget_media_image a{display:inline-block;border-radius:10px}
#footer .widget_media_image a:focus-visible{outline:2px solid var(--wdkf-jade);outline-offset:3px}

/* ---- service area ---------------------------------------------------- */
#footer #text-9 .textwidget p{color:var(--wdkf-txt);font-size:14px;line-height:2.2;margin:0}
#footer #block-38 a{color:var(--wdkf-ink)!important}
#footer #block-38 a:hover{color:var(--wdkf-jade)!important}

/* ---- socials: REMOVED (owner, 2026-08-17) ----------------------------
   Hidden rather than deleted from the widget: the block stays in wp-admin so
   turning them back on is a CSS edit, not a rebuild. The grid area collapses
   with it (see the 'soc' row above) so nothing leaves a hole. */
#footer #block-35,
.footer-wrapper #block-35,
#footer .wp-block-social-links,
.footer-wrapper .wp-block-social-links{display:none!important}

/* ---- socials (inert while hidden above): hairline circles ------------ */
#footer .wp-block-social-links{display:flex;gap:10px;padding:0;margin:0}
#footer li.wp-social-link{background:transparent!important;margin:0;padding:0;border:0}
#footer .wp-block-social-link-anchor{display:flex;width:40px;height:40px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.18);
  align-items:center;justify-content:center;
  transition:border-color .15s ease,background .15s ease}
#footer .wp-block-social-link-anchor svg{fill:#fff;width:19px;height:19px;opacity:.9}
#footer .wp-block-social-link-anchor:hover{border-color:var(--wdkf-jade);background:rgba(62,183,133,.14)}
#footer .wp-block-social-link-anchor:focus-visible{outline:2px solid var(--wdkf-jade);outline-offset:2px}

/* ---- policies -------------------------------------------------------- */
#footer #block-38 p{margin:0;color:var(--wdkf-dim);font-size:13px;line-height:1.6}
#footer #block-38 a{color:#fff;font-weight:700;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
#footer #block-38 a:hover{color:#fff;text-decoration-color:var(--wdkf-jade)}

/* ---- copyright strip ------------------------------------------------- */
body #footer .footer-bottom{background:var(--wdkf-bg-deep)!important;
  border-top:1px solid var(--wdkf-line);padding:16px 0}
#footer .footer-bottom .footer-copyright{color:var(--wdkf-dim);
  font:600 12px/1.5 var(--wdkf-ui);letter-spacing:.04em}

/* ---- responsive ------------------------------------------------------ */
/* Tablet: newsletter full-width on top, pills | area, socials | policies. */
@media (max-width:991px){
  body #footer .footer-main{padding:48px 0 40px}
  /* The rail survives the reflow: the three actions stay together at the top
     in a band of their own height, and everything else falls below them.
     The height is declared on .footer-main because that is where the painting
     gradient lives — custom properties inherit DOWN, so setting it on .row
     (as this first did) left the band at its desktop 104px. */
  body #footer .footer-main{--wdkf-rail-h:248px} /* 40px lead-in + 3 x 68px */
  body #footer .footer-main .row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "call call"
      "chat chat"
      "mail mail"
      "news news"
      "area pol";
    column-gap:32px;row-gap:0}
  #footer #block-26,#footer #block-27,#footer #block-28{
    height:68px;justify-content:center;justify-self:stretch}
  #footer #klaviyo_emailsignup_widget-3{margin-top:36px}
  #footer #text-9,#footer #block-38{margin-top:28px}
  #footer #klaviyo_emailsignup_widget-3{margin-bottom:14px}
  #footer #block-35{align-self:center;margin-top:10px}
  #footer #block-38{align-self:center;justify-self:end;text-align:right;margin-top:10px}
}
/* Phone: one column, original stack order preserved. */
@media (max-width:575px){
  body #footer .footer-main{padding:40px 0 34px}
  body #footer .footer-main{--wdkf-rail-h:232px} /* 40px lead-in + 3 x 64px */
  body #footer .footer-main .row{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"call" "chat" "mail" "news" "area" "pol"}
  #footer #block-26,#footer #block-27,#footer #block-28{height:64px}
  #footer #text-9{margin-top:16px}
  #footer #block-35{margin-top:14px}
  #footer #block-38{justify-self:start;text-align:left;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .footer-wrapper a.wdk-cbtn,#footer a.wdk-cbtn{transition:none}
  .footer-wrapper a.wdk-cbtn:hover,#footer a.wdk-cbtn:hover{transform:none}
}


/* ============================================================
   THE PRINTED FOOTER — "Mint dispatch", lifted VERBATIM from
   the approved design artifact (scheme fs2) rather than
   re-interpreted: the first pass approximated the design and
   did not match it. inc/wdk-footer.php prints the markup with
   the same class names, Porto's own footer is hidden below,
   and the live Klaviyo form is MOVED into .fr-form so the real
   signup keeps working.

   Two additions to the lifted stylesheet, both at the end:
   the moved Klaviyo node is made to look like the artifact's
   own field/button, and Porto's footer is hidden.
   ============================================================ */
/* ======================= shared shell ======================= */
.wdkf{--display:'Archivo Black',Impact,'Arial Black',sans-serif;
  --ui:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color-scheme:light;font-family:var(--ui);line-height:1.55;text-align:left;
  -webkit-font-smoothing:antialiased}
.wdkf a{text-decoration:none;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}
.wdkf ul{list-style:none;margin:0;padding:0}
.wdkf p{margin:0}
.wdkf input,.wdkf button{font-family:inherit}
/* THE SITE MEASURE, not a footer measure (owner, 2026-08-21: "footer should be
   the same width as the header").

   The header bar (.wdk-hb-in, wdk-chrome.css:117) and every boxed page
   container (wdk-chrome.css, the .page-wrapper > * > .container rule) have
   been 1610px + 40px gutters since 2026-08-17. The footer was still on a rail
   of its own — 1340px + clamp(16px,3vw,44px) — so at a 1920px viewport its
   content ran 290..1630 against the header's 155..1765: 135px inside the
   header on each side, on the one part of the page that sits directly under
   everything else.

   The two steps below are copied from that container rule, NOT from the jade
   header's own ramp. The active header variant squeezes .wdk-hb-in to 16px
   gutters between 1025px and 1180px to keep the nav on one line
   (wdk-hdr-jade.css:322) — that is a header problem, and a footer that
   inherited it would jump narrower than the page content it sits under.
   Above 1180px, where the mismatch was actually visible, the two are now
   identical to the pixel.

   The full-bleed dispatch rail (.fr-rail) is deliberately NOT boxed: it is
   edge-to-edge exactly like the header's own green bar. Only the CONTENT rail
   moved. */
.wdkf-wrap{width:100%;max-width:1610px;margin:0 auto;padding:0 40px}
@media (max-width:1024.5px){.wdkf-wrap{padding:0 24px}}
@media (max-width:600px){.wdkf-wrap{padding:0 16px}}
.wdkf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ======================= DISPATCH RAIL (structure) =======================
   Full-bleed rail of the three contact actions across the top edge, then a
   quieter baseline below: signup | departments | service area, and a
   copyright strip. The last-call / payment notes live UNDER the service
   area, never in the signup column — see the note by .fr-notes.
   ======================================================================== */
.fr{background:var(--field);color:var(--txt)}

/* --- the rail: three equal actions, 2px seams of the field colour --- */
.fr-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--seam)}
.fr-act{display:flex;align-items:center;justify-content:center;gap:14px;min-height:92px;
  padding:18px clamp(12px,2vw,28px);background:var(--rail-bg);color:var(--rail-fg);
  box-shadow:inset 0 3px 0 transparent;
  transition:transform .16s ease,box-shadow .16s ease}
/* Hover = the tile LIFTS. No darker ground, no white top bar (that bar
   read as the block shrinking from the top), owner 2026-08-19. */
.fr-act:hover{background:var(--rail-bg);box-shadow:0 14px 26px -16px rgba(4,26,17,.65);
  transform:translateY(-3px)}
.fr-act:focus-visible{outline:3px solid var(--rail-ring);outline-offset:-5px}
.fr-ico{flex:0 0 auto;width:44px;height:44px;border-radius:13px;background:var(--ico-bg);
  display:grid;place-items:center}
.fr-ico svg{width:22px;height:22px;display:block}
.fr-t{min-width:0}
.fr-t b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(15px,1.45vw,19px);
  line-height:1;text-transform:uppercase;letter-spacing:0}
.fr-t i{display:block;margin-top:7px;font:700 10.5px/1 var(--ui);letter-spacing:.13em;
  text-transform:uppercase;font-style:normal;color:var(--rail-sub)}

/* --- the baseline --- */
.fr-body{padding:46px 0 42px}
.fr-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1.05fr);
  column-gap:clamp(28px,4vw,64px);row-gap:36px;align-items:start}
/* Never below 24px: the orange "$15!" accent in scheme 1 is 3.2:1, which is
   valid for LARGE text only (>=24px), so the heading must never shrink under
   it — not even on a 320px phone. */
.fr-h{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,27px);line-height:1.1;
  text-transform:uppercase;color:var(--txt);margin:0 0 8px}
.fr-h em{font-style:normal;color:var(--accent)}
.fr-p{color:var(--muted);font-size:13.5px;margin:0 0 18px;max-width:44ch}
.fr-form{display:flex;gap:10px;flex-wrap:wrap;max-width:470px}
.fr-form input{flex:1 1 210px;min-width:0;background:var(--in-bg);border:1px solid var(--in-bd);
  border-radius:12px;padding:13px 15px;font:400 14px/1.4 var(--ui);color:var(--txt);outline:none}
.fr-form input:focus{border-color:var(--in-focus);box-shadow:0 0 0 3px var(--in-glow)}
.fr-form input::placeholder{color:var(--in-ph)}
.fr-form button{flex:0 0 auto;border:0;cursor:pointer;background:var(--btn-bg);color:var(--btn-fg);
  border-radius:12px;padding:0 22px;height:46px;font:800 13px/1 var(--ui);letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px var(--btn-edge)}
.fr-form button:hover{background:var(--btn-hi)}
.fr-form button:focus-visible{outline:3px solid var(--in-focus);outline-offset:2px}

.fr-lbl{font:800 10.5px/1.5 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--label);
  margin:0 0 14px}
.fr-dept{columns:2;column-gap:20px;max-width:330px}
.fr-dept li{break-inside:avoid}
.fr-dept a{display:block;padding:4px 0;color:var(--link);font-size:13.5px;font-weight:600}
.fr-dept a:hover{color:var(--link-hi)}
.fr-area li{display:flex;align-items:center;gap:10px;padding:5px 0;color:var(--link);font-size:14px}
.fr-area li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);flex:0 0 auto}

/* The last-call and payment notes used to sit directly under the signup
   form, where the mid-width reflow (2-col grid, signup spanning both) pulled
   them up against the email field. They now live in the service-area column
   behind their own rule: "where we go, when we stop, how you pay" reads as
   one group and can never collide with the input. */
/* padding-top 22 → 34px (owner, 2026-08-18): "Last call" sat too close under
   the rule once the real service-area list set its own line-height. */
.fr-notes{margin-top:26px;padding-top:34px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:10px}
.fr-notes li{display:flex;align-items:center;gap:9px;font:700 12px/1.45 var(--ui);letter-spacing:.01em;
  color:var(--note)}
.fr-notes li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--note-dot);
  flex:0 0 auto}

.fr-base{background:var(--base-bg);border-top:1px solid var(--base-line);padding:15px 0}
.fr-baserow{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.fr-legal{display:flex;align-items:center;gap:12px;font-size:13px}
.fr-legal a{color:var(--base-link);font-weight:700;box-shadow:0 1px 0 var(--base-ul)}
.fr-legal a:hover{box-shadow:0 1px 0 var(--base-link)}
.fr-legal span{color:var(--base-sep)}
.fr-cr{color:var(--base-cr);font:600 12px/1.5 var(--ui);letter-spacing:.04em}


.fs2{--field:#F1F9F5;--seam:#F1F9F5;
  --rail-bg:#177A52;--rail-hi:#146846;--rail-fg:#FFFFFF;--rail-sub:#E6F6EE;--rail-ring:#FFFFFF;
  --ico-bg:rgba(255,255,255,.18);
  --txt:#151917;--muted:#47564E;--link:#2A3B33;--link-hi:#177A52;--label:#177A52;--accent:#177A52;
  --dot:#1F8A5F;--hair:#D3E8DC;--note:#2F4A3E;--note-dot:#FF9800;
  --in-bg:#FFFFFF;--in-bd:#C6DDD1;--in-ph:#6C7A73;--in-focus:#1F8A5F;--in-glow:rgba(31,138,95,.2);
  --btn-bg:#FF9800;--btn-hi:#FFA51D;--btn-fg:#1A1204;--btn-edge:rgba(26,18,4,.24);
  --base-bg:#E4F2EA;--base-line:#CFE6DA;--base-link:#146846;--base-ul:rgba(20,104,70,.42);
  --base-sep:#8FB3A2;--base-cr:#2F4A3E}


@media (max-width:1000px){
  .fr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fr-nl{grid-column:1 / -1}
  .fr-form{max-width:none}
}
@media (max-width:640px){
  .fr-rail{grid-template-columns:minmax(0,1fr)}
  .fr-act{justify-content:flex-start;min-height:72px;padding:14px 18px}
  .fr-body{padding:34px 0 30px}
  .fr-grid{grid-template-columns:minmax(0,1fr);row-gap:30px}
  .fr-dept{max-width:none}
  .fr-baserow{justify-content:flex-start}
  .fr-form button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.wdkf a{transition:none}}


/* ---- the moved Klaviyo signup, dressed as the artifact's field ---------
   The design draws a plain input + button; the real widget arrives wrapped
   in Klaviyo's own markup, so its parts are mapped onto the same tokens
   instead of being rebuilt (rebuilding would break Klaviyo's mount). */
.fr-form .klaviyo_field_group{display:flex;gap:10px;flex-wrap:wrap;width:100%}
.fr-form label:not(.wdkf-sr){display:none}
.fr-form input[type=text],.fr-form input[type=email]{flex:1 1 210px;min-width:0;
  background:var(--in-bg);border:1px solid var(--in-bd);border-radius:12px;padding:13px 15px;
  font:400 14px/1.4 var(--ui);color:var(--txt);outline:none}
.fr-form input:focus{border-color:var(--in-focus);box-shadow:0 0 0 3px var(--in-glow)}
.fr-form input::placeholder{color:var(--in-ph)}
.fr-form .klaviyo_submit_button,.fr-form button[type=submit]{flex:0 0 auto;border:0;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);border-radius:12px;padding:0 22px;height:46px;
  font:800 13px/1 var(--ui);letter-spacing:.02em;box-shadow:inset 0 0 0 1px var(--btn-edge)}
.fr-form .klaviyo_submit_button:hover,.fr-form button[type=submit]:hover{background:var(--btn-hi)}
/* the widget's own heading/intro duplicate the ones printed above the slot */
.fr-form .widget-title,.fr-form h2,.fr-form h3,
.fr-form p:not(.klaviyo_messages):not([class*=error]):not([class*=success]){display:none}
.fr-form .klaviyo_messages{flex:1 0 100%;margin-top:8px;font-size:13px}

/* Porto's own footer: kept in the DOM (so anything hooked into it still
   runs, and the Klaviyo node can be taken from it) but out of sight. */
body .footer-wrapper{display:none!important}

/* ---- spacing fixes (owner, 2026-08-18) --------------------------------
   The shell reset `.wdkf p{margin:0}` and `.wdkf ul{margin:0;padding:0}` are
   (0,1,1); the component rules `.fr-lbl` / `.fr-notes` / `.fr-p` are (0,1,0),
   so the reset won and their spacing never applied — which is why the column
   titles sat on top of their lists and "Last call" hugged the rule. Restated
   one level up so they win, with the owner's larger gaps. */
.wdkf .fr-lbl{margin:0 0 22px}
.wdkf .fr-p{margin:0 0 18px}
.wdkf .fr-notes{margin-top:26px;padding-top:34px}
.wdkf .fr-h{margin:0 0 8px}


/* ---- rail hover (owner, 2026-08-19) -----------------------------------
   Rewritten from the 2026-08-18 version, which turned the label orange,
   darkened the tile and drew a white bar along its top edge. Owner: the
   orange type looked ugly, and the top bar read as the block shrinking.
   What is left is one gesture — the tile lifts and its icon tile goes
   orange. The glyph flips to ink on that orange (#1A1204 on #FF9800 is
   ~7.6:1); white would have been 2.2:1 and vanished. Type stays white.
   Stated at .wdkf-level specificity because Porto colours bare `a:hover`
   and would otherwise win. */
.wdkf .fr-act:hover,
.wdkf .fr-act:focus-visible{color:var(--rail-fg)}
.wdkf .fr-act:hover .fr-t b{color:var(--rail-fg)}
.wdkf .fr-act:hover .fr-ico{background:#FF9800}
.wdkf .fr-act:hover .fr-ico svg{color:#1A1204}

@media (prefers-reduced-motion:reduce){
  .fr-act{transition:none}
  .fr-act:hover{transform:none}
}

/* ============================================================
   THE SIGNUP IS ONE LINE AGAIN (found 2026-08-21 while widening
   the rail above).

   The Klaviyo widget is moved into .fr-form as a whole <form>,
   and that form is a flex ITEM carrying the initial flex:0 1
   auto — so it shrink-to-fit at 366px instead of filling the
   470px .fr-form was built for. Inside it the field group then
   had 366px to fit a 210px-min input + 10px gap + 147px button
   = 367px, and the orange button wrapped onto its own line by
   ONE pixel. Every rule around it (input flex:1 1 210px, button
   flex:none) is written for the two sitting side by side.

   Pre-existing — the button has been wrapping since the widget
   was moved. Widening the footer rail only made it obvious:
   the dead space beside the 366px form went from ~100px to
   ~215px at 1920. min-width:0 so the form can still shrink
   below its content width on a phone.
   ============================================================ */
.fr-form > form{flex:1 1 100%;width:100%;min-width:0}