/* ---- Newsletter band ------------------------------------------------------
   The band is a real element inside the Site Footer component and its resting
   look is real Webflow classes (.nl-band and friends), created with the markup
   so it stays editable in the Designer. What could not go there is here:
   pseudo-classes, the state classes the script toggles, the stacking
   breakpoint, and the descendant selectors below - none of which the element
   builder's CSS parameter accepts.

   This lives in a file rather than in the site footer code field because that
   field is capped at 50,000 characters and was at 49,114 with this block and
   its script inside it. Both now load as assets, the way the global bundle and
   the iso-accent sheet already do.

   Font families are restated throughout because the element builder reported
   Manrope and Inter as unavailable when it created those classes: the site
   loads both from Google Fonts, but they are not registered as Webflow site
   fonts, so the declarations were dropped from the styles it wrote.

   The reveal animates max-height rather than height. The consent row has no
   fixed size to tween from and the band has no height of its own - it is
   whatever its content is - so growing the row grows the band with it in one
   movement. 120px is a ceiling, not a size: it only has to clear the tallest
   case. */

/* The band takes the same box as the footer's nav grid - max-width 1288, 36px
   of side padding, content-box, auto margins - so its content lines up with
   the columns beneath it. */
.nl-band{max-width:1288px;margin-left:auto;margin-right:auto;border-top:0;border-bottom:0}

/* ---- The two rules the band sits between ---------------------------------
   Each runs to the window edge and is painted out across the frame, so it
   reads as a line through the margins that stops where the content begins,
   rather than as a box drawn round the band.

   The rule above is the footer's own border-top and already spans full width.
   The one below is drawn by ::before: the band is only as wide as the frame -
   measured, 40 to 1400 at a 1440 window - so a border on it could never reach
   the edge, and a 100vw strip centred on the band carries it out both ways.
   The body clips horizontal overflow, so the extra width costs no scrollbar.

   ::after then paints over both across the band's own width. One element with
   two 1px borders rather than two strips, and that is what makes the alignment
   exact: `top:-1px` with `bottom:0` sizes it to the band plus the pixel above,
   so its top border lands on the footer's border and its bottom border lands
   on ::before's, whatever the subpixel rounding does to either. ::after is
   written second and both are positioned, so it paints on top; the footer's
   border belongs to an ancestor, which paints before any of this.

   The fill is stated rather than inherited because these are borders, and
   border-color:inherit would take the band's border colour, not its ground.
   #131315 IS the band's ground, measured off the rendered page, and opaque -
   which is what lets it hide the line underneath. If .nl-band's background is
   changed in the Designer, this has to follow it.

   Painting out rather than not drawing, because the two lines are not the same
   colour over the two grounds. Both are rgba(245,244,242,.105), but the lower
   one composites over the band's #131315 inside the frame and the footer's
   #060607 outside: measured, (42,42,44) against (31,31,32). That mismatch is
   what made the line look like it belonged to the band. */
.nl-band::before{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100vw;border-bottom:1px solid rgba(245,244,242,.105);pointer-events:none}
.nl-band::after{content:"";position:absolute;left:0;right:0;top:-1px;bottom:0;border-top:1px solid #131315;border-bottom:1px solid #131315;pointer-events:none}

/* The standfirst takes the footer's own copy size - 13px on 20.8, in the same
   #6A6862 as the line under the wordmark. The consent sentence follows it. */
.nl-band-sub{font-size:13px;line-height:20.8px;color:#6A6862}
.nl-consent-text{font-size:13px;line-height:20.8px;max-width:430px}
/* The privacy link keeps its underline. The footer's generated rule
   `footer a:not([class*="button"])` strips it at (0,1,2), which a plain class
   cannot reach; naming the tag as well ties that weight, and a tie goes to
   document order - this sheet loads from the body, after the page's CSS. */
footer a.nl-consent-link{text-decoration:underline;text-underline-offset:2px}
.nl-band-title,.nl-done-title{font-family:Manrope,Inter,system-ui,sans-serif}
.nl-band-sub,.nl-input,.nl-submit,.nl-consent-text,.nl-error,.nl-done-sub{font-family:Inter,system-ui,sans-serif}
/* The button is the site's hero button to the pixel: 12px/24px padding on a
   15px/18 semibold label, which lands it at 44px tall. The field comes down
   from 52 to the same 44 so the pair reads as one control. */
.nl-submit{height:auto;padding:12px 24px;font-size:15px;line-height:18px;font-weight:600;border:1px solid transparent;border-radius:999px}
.nl-input{height:44px;font-size:15px}
.nl-input::placeholder{color:#6A6862}
.nl-input:focus{outline:none;border-color:rgba(245,244,242,.34)}
/* Orange ground, black label - the distortion over it is the site's own,
   wired by the script. */
.nl-submit:hover,
.nl-submit:focus-visible{background-color:#FF6238;color:#060607}
.nl-band.is-open .nl-consent{max-height:120px;opacity:1;margin-top:14px}
.nl-band.has-error .nl-error{max-height:40px;opacity:1;margin-top:8px}
.nl-band.has-error .nl-input{border-color:#FF6238}
.nl-consent-link:hover{color:#F5F4F2}

/* Webflow does not keep a checkbox as the plain input it was authored as: it
   rebuilds it into `label.w-checkbox > input.w-checkbox-input + span.w-form-label`
   and moves the authored class onto that new label. So the class never reaches
   the input, and the generated span - which takes the field's own name as its
   text - printed "newsletter-consent" straight across the consent sentence.
   The span goes, the wrapper becomes a plain flex cell, and the skin is applied
   to the input by type rather than by class, because the class is no longer on
   it. Same for the Form element: the authored class lands on Webflow's .w-form
   wrapper, so the <form> inside is unstyled. */
.nl-consent .w-form-label{display:none}
.nl-consent .w-checkbox{display:flex;align-items:center;margin:0;padding:0;flex:0 0 auto}
/* The whole sentence is the target, not only the 18px box - the script is what
   makes that true; the pointer is what says so before the click. */
.nl-consent{cursor:pointer}
.nl-consent .nl-consent-link{cursor:pointer}
/* The consent box is neutral at rest and inverts when ticked: the white fill
   the site's buttons take on hover, with a dark check on it. Deliberately not
   the green mark - that one belongs to the confirmation, and spending it here
   would say "done" about a box that only means the sentence has been read.

   As a flex item inside Webflow's generated wrapper the box came out 16 wide
   against 18 tall - measured - and a square mark was then cropped left and
   right to fill it. `flex` and min-width hold the square. */
.nl-consent input[type="checkbox"]{box-sizing:border-box;flex:0 0 18px;width:18px;min-width:18px;height:18px;margin:0;float:none;-webkit-appearance:none;appearance:none;border:1px solid rgba(245,244,242,.24);border-radius:3px;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:11px 11px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.nl-consent:hover input[type="checkbox"]{border-color:rgba(245,244,242,.45)}
.nl-consent input[type="checkbox"]:checked{background-color:#F5F4F2;border-color:#F5F4F2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3 4.8 8.7 9.6 3.5' fill='none' stroke='%23060607' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.nl-consent input[type="checkbox"]:checked::after{content:none}
/* Unticked and asked to send: the box takes the site's error colour, the same
   one the address field takes. */
.nl-band.has-error-consent .nl-consent input[type="checkbox"]{border-color:#FF6238}
.nl-band-form > form{margin:0}

/* ---- The confirmation ----------------------------------------------------
   It lives inside Webflow's own success panel rather than beside it, so this
   is what Webflow shows when the form comes back accepted - nothing has to be
   swapped in. Webflow's default sentence in the panel is hidden rather than
   deleted: it is the element Webflow writes to, and removing it would have it
   put back on the next save.

   The mark is drawn here rather than loaded. The supplied tickbox-green.png is
   cropped at its own edges - all four corners of the file are the border
   colour rgb(51,104,31), so the rounded rect runs off the canvas and renders
   with its corners cut at any size. Nothing in CSS can un-crop it. The box is
   the asset's own three colours - a #33681F edge, a #4EB13B ground at 5%, a
   #8FC97F check - as a real rounded square with the check as an inline SVG, so
   it is crisp at any size and needs no request. Swap it back for the file if a
   version with margins is ever exported. */
.nl-done-mark{box-sizing:border-box;flex:0 0 30px;width:30px;min-width:30px;height:30px;border:1px solid #33681F;border-radius:7px;background-color:rgba(78,177,59,.05);background-repeat:no-repeat;background-position:center;background-size:18px 18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.2 4.8 8.8 9.8 3.3' fill='none' stroke='%238FC97F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");font-size:0;color:transparent}
.nl-band-form .w-form-done{display:none;background-color:transparent;padding:0;text-align:left}
.nl-band-form .w-form-done > div:not(.nl-done){display:none}
.nl-band-form .w-form-fail{background-color:transparent;padding:0;text-align:left;font-family:Inter,system-ui,sans-serif;font-size:13px;line-height:20.8px;color:#FF6238}
/* Webflow shows the panel by setting display on it, so this only has to make
   the shown state a block. .is-sent is kept as the hook for a failed-to-load
   webflow.js, where the script falls back to showing the panel itself. */
.nl-band.is-sent .nl-band-form > form{display:none}
.nl-band.is-sent .nl-band-form .w-form-done{display:block}

/* Stacked below 860px - the width at which the field plus its button no longer
   sit beside the copy without the headline breaking to three lines. */
@media (max-width:860px){
 .nl-band{padding:28px 20px}
 .nl-band-inner{flex-direction:column;align-items:stretch;row-gap:20px;column-gap:0}
 .nl-band-form{width:100%}
 .nl-band-row{flex-direction:column;align-items:stretch;row-gap:10px}
 .nl-input,.nl-submit{width:100%}
 .nl-band-row .glitch-host{width:100%}
 .nl-consent-text{max-width:none}
}