/* ==========================================================================
   Apalis — self-contained rebuild
   Typography and spacing are fully fluid: every size is a continuous
   function of the viewport (clamp/min/max), with no stepped breakpoints.
   The only remaining media query is the 8-column -> 24-column grid
   rearrangement, which is a genuine change of layout, not a change of scale.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:Aptos;font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/aptos-400.woff2) format("woff2")}
@font-face{font-family:Aptos;font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/aptos-700.woff2) format("woff2")}
@font-face{font-family:Aptos;font-style:italic;font-weight:400;font-display:swap;
  src:url(../assets/fonts/aptos-400-italic.woff2) format("woff2")}
@font-face{font-family:Aptos;font-style:italic;font-weight:700;font-display:swap;
  src:url(../assets/fonts/aptos-700-italic.woff2) format("woff2")}

/* ---------- design tokens ---------- */
:root{
  /* palette (from the live site's theme variables) */
  --white-hsl:0,0%,100%;
  --black-hsl:221,36%,25%;          /* #293757 */
  --accent-hsl:210,31%,49%;         /* #567da4 */
  --darkAccent-hsl:218,29%,43%;     /* #4e658d */
  --lightAccent-hsl:240,10.53%,92.55%;
  --white:hsl(var(--white-hsl));
  --black:hsl(var(--black-hsl));
  --accent:hsl(var(--accent-hsl));
  --darkAccent:hsl(var(--darkAccent-hsl));
  --lightAccent:hsl(var(--lightAccent-hsl));
  --bg-light:#f5f5f7;
  --bg-black:#060606;

  /* --- fluid type engine ---------------------------------------------
     The original theme sized text as  (V - 1) * k + base  where k stepped
     between a viewport-height term (phones) and a viewport-width term
     (desktop), and `base` jumped 16px -> 18px at 992px. Both steps are
     replaced here by continuous functions, so text scales smoothly at
     every width while landing on the original values at desktop sizes. */
  --k:clamp(calc(0.012 * min(100vh, 900px)), 1.2vw, 24px);
  --base:clamp(16px, calc(14.86px + 0.317vw), 18px);

  --fs-h1:calc(3    * var(--k) + var(--base));
  --fs-h2:calc(1.8  * var(--k) + var(--base));
  --fs-h3:calc(1.2  * var(--k) + var(--base));
  --fs-h4:calc(0.6  * var(--k) + var(--base));
  --fs-lg:calc(0.3  * var(--k) + var(--base));
  --fs-md:var(--base);
  --fs-sm:calc(-0.1 * var(--k) + var(--base));
  --fs-xs:calc(-0.3 * var(--k) + var(--base));

  /* line-heights follow the original  1em * (1 + (1 - V)/25)  curve */
  --lh-h1:.88; --lh-h2:.928; --lh-h3:.952; --lh-h4:.976; --lh-body:1.1;
  --ls-heading:-.02em;

  /* layout */
  --max-w:2000px;
  --gutter:6vw;                 /* phones */
  --cols:8;
  --header-h:72.36px; /* refreshed from the real element by js/site.js */
  --fg:var(--black);
}
@media (min-width:768px){
  :root{--gutter:4vw;--cols:24}
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--fg);
  font-family:Aptos,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--fs-md);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,hr{margin:0}
ul{margin:0;padding:0;list-style:none}

/* ---------- typography ---------- */
.rte{color:var(--fg)}
.rte h1,.rte h2,.rte h3,.rte h4{font-weight:400;letter-spacing:var(--ls-heading)}
.rte h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
.rte h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.rte h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.rte h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}
.rte p{font-size:var(--fs-md);line-height:var(--lh-body)}
.rte p.apa-large{font-size:var(--fs-lg)}
.rte p.apa-small{font-size:var(--fs-sm)}
/* rich-text rhythm: 1rem between blocks, 2rem around headings (margins collapse) */
.rte>*{margin-block:var(--base)}
.rte>h1,.rte>h2,.rte>h3,.rte>h4{margin-block:calc(var(--base) * 2)}
.rte>*:first-child{margin-top:0}
.rte>*:last-child{margin-bottom:0}
.rte strong{font-weight:700}
.rte a{text-decoration:underline;text-underline-offset:.15em}
.rte em{font-style:italic}

/* the full colour vocabulary the RTE can emit — gen.js renames Squarespace's
   sqsrte-* classes wholesale, so keep the set complete even where a page
   currently uses only part of it */
.apa-text-color--white{color:hsl(var(--white-hsl))}
.apa-text-color--accent{color:hsl(var(--accent-hsl))}
.apa-text-color--darkAccent{color:hsl(var(--darkAccent-hsl))}
.apa-text-color--lightAccent{color:hsl(var(--lightAccent-hsl))}

/* text fitted to its block — js/site.js sets the font-size (see scaledText) */
.apa-scaled-text-container,.apa-scaled-text{display:block}

/* ---------- sections ---------- */
.sec{position:relative;isolation:isolate;color:var(--fg);--sec-pad:0px;padding-block:var(--sec-pad)}
.sec.theme--white{--fg:var(--black);--theme-bg:#fff}
.sec.theme--light-bold{--fg:var(--black);--theme-bg:var(--bg-light)}
.sec.theme--dark-bold{--fg:#fff;--theme-bg:var(--darkAccent)}
.sec.theme--black-bold{--fg:#fff;--theme-bg:var(--bg-black)}
.sec[class*=theme--]{background:var(--theme-bg)}

/* section height presets, emitted verbatim from each section's heightCls;
   `custom` adds none. Only medium is in use today — small/large are kept so a
   re-extraction picks them up rather than silently losing the padding. */
.sec[data-height=medium]{--sec-pad:6.6vmax;min-height:66vh}

/* the fixed header overlays the first section */
main>.sec:first-child{padding-top:calc(var(--header-h) + var(--sec-pad))}

.sec__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.sec__bg>*{width:100%;height:100%;object-fit:cover;object-position:var(--bg-focal,50% 50%)}
.sec__video{position:absolute;inset:0;object-fit:cover}
/* published overlay — the section theme's own background laid over the media
   at the section's authored opacity, to settle the copy on top of it */
.sec__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--theme-bg,var(--bg-black));opacity:var(--sec-overlay,0)}

/* parallax background — --pfx is the section's authored intensity.
   The slack comes from a small scale rather than a taller box: changing the
   box height would change how object-fit:cover frames the photo and re-crop
   the subject, whereas scaling keeps the published framing and just zooms it
   a little — kept small so the framing barely shifts. js/site.js swings it
   half the slack each way about centre. */
.sec--parallax .sec__bg>*{
  transform-origin:center center;
  will-change:transform}

/* ---------- fluid engine grid ---------- */
.fe{
  position:relative;z-index:1;
  display:grid;
  /* --gap, --rows-m, --rows-d and --row-scale come from layout.css per section */
  --grid-gutter:calc(var(--gutter) - var(--gap,11px));
  --cell-max:calc((var(--max-w) - (var(--gap,11px) * (var(--cols) - 1))) / var(--cols));
  grid-template-columns:
    minmax(var(--grid-gutter),1fr)
    repeat(var(--cols),minmax(0,var(--cell-max)))
    minmax(var(--grid-gutter),1fr);
  grid-template-rows:repeat(var(--rows-m),minmax(24px,auto));
  column-gap:var(--gap,11px);row-gap:var(--gap,11px);
  overflow-x:clip;
}
@media (min-width:768px){
  .fe{
    --container-width:min(var(--max-w),calc(100vw - var(--gutter) * 2));
    grid-template-rows:repeat(var(--rows-d),minmax(calc(var(--container-width) * var(--row-scale,.0215)),auto));
  }
}

/* ---------- blocks ---------- */
.blk{display:flex;flex-direction:column;justify-content:center;min-width:0}
.blk>*{width:100%}
.blk--image,.blk--shape{height:100%}

/* images — fill the grid area without letting intrinsic height inflate the row.
   --img-radius and --img-overlay are set per block in layout.css.
   Note: .img is absolutely positioned, so its containing block is the block's
   *padding* box — padding on .blk--image does not inset it. Nudge the figure
   with top/right/bottom/left instead, and clear height:100% at the same time
   or the offset is ignored (see the deviations at the end). */
.blk--image{position:relative}
.img{position:absolute;inset:0;margin:0;border-radius:var(--img-radius,0);overflow:hidden}
/* A contained image with rounded corners must be sized to the picture itself,
   otherwise the rounded box sits outside the letterboxed artwork and no
   rounding is visible. Matches how the published site sizes these. */
.blk--framed .img{
  aspect-ratio:var(--img-ratio);
  width:auto;height:auto;max-width:100%;max-height:100%;margin:auto}
.img,.img a{display:block;width:100%;height:100%}
/* --px-extra / --py-extra (set per block, see deviations) grow the image so it
   has room to slide without exposing an edge; 0 leaves it flush */
.img img{
  width:calc(100% + var(--px-extra,0px));
  height:calc(100% + var(--py-extra,0px));
  max-width:none;object-fit:var(--fit,cover);object-position:var(--focal,50% 50%)}
.img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--img-overlay,transparent);
  opacity:var(--img-overlay-opacity,0)}

/* shapes */
.shape{width:100%;height:100%;background:var(--shape-fill,#fff);border-radius:var(--shape-radius,0)}

/* rules */
.blk--line hr{border:0;height:1px;background:currentColor;opacity:.5;width:100%}

/* ---------- buttons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;
  font-size:var(--base);line-height:1.2;text-transform:uppercase;
  text-align:center;text-decoration:none;border-radius:300px;
  padding:.75em 1.9em;border:0 solid transparent;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.btn--large{padding-inline:2em}
/* button alignment, emitted from the block's own align value */
.blk--btn-center{align-items:center}
.blk--btn-center>.btn{width:auto}
.blk--button.is-stretched>.btn{width:100%;height:100%;padding-block:0}

/* Each theme names one filled pair; primary wears it at rest and secondary
   adopts it on hover. Both colours are always stated together, so neither can
   resolve to the other and swallow the button. */
.theme--white,.theme--light-bold{--btn-fill:var(--accent);--btn-ink:#fff}
.theme--dark-bold{--btn-fill:#fff;--btn-ink:var(--darkAccent)}
.theme--black-bold{--btn-fill:#fff;--btn-ink:var(--black)}

.btn--primary{background:var(--btn-fill);color:var(--btn-ink);font-weight:700}
.btn--primary:hover{opacity:.85}
.btn--secondary{background:transparent;color:currentColor;border:2px solid currentColor;font-weight:400}
.btn--secondary:hover,.btn--secondary:focus-visible{
  background:var(--btn-fill);border-color:var(--btn-fill);color:var(--btn-ink)}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;background:var(--darkAccent);color:#fff}
.hdr__inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  max-width:var(--max-w);margin-inline:auto;
  /* the published header is padded in pure viewport units, so it is already
     continuous: 1.7vw/4vw on desktop, 2.5vw/6vw once the burger appears */
  padding:1.7vw 4vw;
}
.hdr__logo{display:block;flex:0 0 auto}
.hdr__logo img{height:23px;width:auto;max-width:100%}
.hdr__nav{display:flex;align-items:center}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,38.4px)}
.nav a{font-size:var(--base);line-height:1.3;white-space:nowrap;opacity:.92;
  text-decoration:underline 1px transparent;text-underline-offset:.35em;
  transition:opacity .2s ease,text-decoration-color .2s ease}
.nav a:hover,.nav a:focus-visible{opacity:1;text-decoration-color:currentColor}
.nav .is-active a{opacity:1;text-decoration-color:currentColor}

.hdr__burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  padding:0;background:none;border:0;cursor:pointer}
.hdr__burger span{display:block;height:1px;width:24px;background:#fff;
  transition:transform .3s ease,opacity .2s ease}
.hdr__burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.hdr__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:899px){
  .hdr__inner{padding:2.5vw 6vw}
  .hdr__burger{display:flex;height:37px;width:37px}
  /* full-height drawer: the panel fills the viewport below the header, with
     the links centred in it both ways, as published */
  .nav{
    position:fixed;inset:var(--header-h) 0 0;
    flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(18px,2.9vh,28px);
    background:var(--darkAccent);padding:6vw;
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
  }
  .nav.is-open{
    opacity:1;visibility:visible;transform:none;
    transition:opacity .28s ease,transform .28s ease,visibility 0s}
  .nav .nav__item{width:100%;text-align:center}
  /* ~36.5px on a phone, matching the published menu, on the same fluid curve
     as the rest of the type */
  .nav a{
    display:block;padding:0;text-align:center;
    /* the desktop bar keeps links on one line; in the drawer they must wrap */
    white-space:normal;text-wrap:balance;
    font-size:calc(1.9 * var(--k) + var(--base));line-height:1.05;
    text-underline-offset:.18em}
}

/* ---------- contact form ----------
   Matches the published form: 48px pill fields filled with lightAccent at
   80%, 23.184px (large) text at desktop, 20px between items. */
.cform{--field-bg:hsla(var(--lightAccent-hsl),.8);--field-border:transparent;width:100%}
.form-item{margin:0 0 20px}
.form-item--group{border:0;padding:0;min-width:0}

.form-title{display:block;font-size:var(--fs-lg);line-height:1.1;padding-bottom:4px}
.form-item--group>.form-title{margin-bottom:20px}
.form-req{font-size:inherit;opacity:.75;margin-left:.35em}
.form-help{font-size:var(--base);line-height:1.1;opacity:.7;margin:0 0 4px}

.form-cols{display:flex;gap:10px;flex-wrap:wrap}
.form-col{flex:1 1 180px;min-width:0}
.form-sublabel{display:block;font-size:12px;line-height:1.15;min-height:21px;padding-bottom:4px}
.form-col .form-req{font-size:12px;display:inline}

.cform input,.cform textarea{
  display:block;width:100%;font:inherit;font-size:var(--fs-lg);line-height:1.1;color:inherit;
  background:var(--field-bg);border:1px solid var(--field-border);
  border-radius:23.068px;padding:10px 20px;height:48px;
  transition:box-shadow .15s ease,border-color .15s ease}
.cform textarea{height:100px;min-height:100px;resize:vertical;padding-top:12px}
.cform input::placeholder,.cform textarea::placeholder{color:currentColor;opacity:.45}
.cform input:focus-visible,.cform textarea:focus-visible{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 2px hsla(var(--accent-hsl),.45)}
.cform [aria-invalid=true]{border-color:#f84345;box-shadow:0 0 0 2px hsla(0,93%,62%,.3)}
.form-actions{margin-top:4px}
.form-actions .btn{width:auto;display:inline-flex;padding:16.2px 34.2px;cursor:pointer}
.form-status{margin-top:12px;font-size:var(--base);min-height:1.2em}
.form-status:empty{display:none;margin:0;min-height:0}
.form-status[data-state=error]{color:#c02a2c}

/* sending overlay */
.send-overlay{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(12,18,32,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.send-overlay.is-open{opacity:1;pointer-events:auto}
.send-overlay__card{
  background:#fff;color:var(--black);border-radius:16px;
  padding:clamp(24px,3vw,36px) clamp(28px,4vw,48px);
  max-width:min(92vw,460px);text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.send-overlay__msg{font-size:var(--fs-lg);line-height:1.25}
.send-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid hsla(var(--accent-hsl),.25);border-top-color:var(--accent);
  animation:send-spin .9s linear infinite}
@keyframes send-spin{to{transform:rotate(360deg)}}
.send-overlay__close{
  appearance:none;border:0;cursor:pointer;border-radius:300px;
  background:var(--accent);color:#fff;font-weight:700;text-transform:uppercase;
  font-size:var(--base);padding:.7em 1.9em}

/* ---------- page transition ----------
   A short fade from --page-fade-color on arrival, and back to it on the way
   out. Switch the colour to #fff here if black ever reads as a flash. */
:root{--page-fade-color:#000;--page-fade-in:.26s;--page-fade-out:.2s}
.page-fade{
  position:fixed;inset:0;z-index:99998;pointer-events:none;
  background:var(--page-fade-color);
  opacity:1;animation:page-fade-in var(--page-fade-in) ease-out forwards;
  transition:opacity var(--page-fade-out) ease-in}
@keyframes page-fade-in{to{opacity:0}}
html.is-leaving .page-fade{animation:none;opacity:1}

/* ---------- first-load splash ---------- */
#apalis-splash-screen{
  position:fixed;inset:0;z-index:99999;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:#fff;transition:opacity .5s ease-out}
#apalis-splash-screen.fade-out{opacity:0}
#apalis-splash-logo{
  /* was 25% desktop / 50% below 768px — now one continuous curve */
  width:clamp(200px,25vw,400px);height:auto;margin-bottom:clamp(24px,2.8vw,40px)}
#apalis-loader-container{
  width:clamp(200px,25vw,400px);height:4px;border-radius:2px;
  background:#e0e0e0;overflow:hidden}
#apalis-loader-bar{
  width:0;height:100%;border-radius:2px;background:#5b7c99;
  transition:width 2s ease-out}
body.splash-active,body.nav-open{overflow:hidden}

/* ---------- motion ---------- */
/* Icons pop in as they enter the viewport (spring, ~0.9s), matching the
   site's "appear" motion preset. */
.m-appear{
  opacity:0;
  transform:translateY(100%) scale(.2);
  will-change:transform,opacity}
.m-appear.is-in{
  opacity:var(--m-base-op,1);
  transform:translateY(0) scale(var(--m-base-scale,1));
  transition:opacity .45s ease-out,
             transform .9s linear(0,.362 6.3%,.856 13.2%,1.043,1.157 20.9%,1.185,1.196 25.2%,1.19,1.166 30.4%,1.077 36.5%,1.017 41.9%,.994,.986 48.1%,.995 56.1%,1.004 68.5%,1.002)}
/* horizontal drift tied to scroll progress through the section */
.m-drift{will-change:transform}

/* one place for every motion opt-out */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .m-appear{opacity:1;transform:none}
  .sec__video{display:none}
  .sec--parallax .sec__bg>*{height:100%;transform:none!important}
  .page-fade{display:none}
}

/* ==========================================================================
   Grain marketing FAQ  (grain-marketing-faq.html + grain-marketing-faq/*.html)
   A hub listing six subjects and their topics, plus one page per topic. Content
   pages rather than reproduced Squarespace layouts, so they use a plain centred
   column instead of the fluid-engine grid — built from the same tokens, so
   type, colour and rhythm match the rest of the site.
   ========================================================================== */

/* one vertical rhythm for every band on these pages: the subject sections,
   the subject index, and the space around the Ask bar */
:root{--faq-band:clamp(36px, 4.5vw, 68px)}
.faq-wrap{width:min(1180px, 100% - 2 * var(--gutter));margin-inline:auto}

/* ---- hero ----
   Same construction as the other pages' heroes: a photo behind the section,
   the section theme's own colour laid over it at --sec-overlay, and the
   parallax drift js/site.js drives from --pfx. */
.faq-hero{
  --sec-overlay:0.3;
  --bg-focal:52% 50%;
  display:flex;align-items:flex-end;
  /* matched to the Technology hero, which is the closest analogue: text over a
     photo. Its fluid-engine rows measure 42.3vw + 155px across 1024-1800, and
     level off near 580px once the mobile layout takes over. */
  min-height:clamp(580px, calc(42.3vw + 155px), 1060px);
  padding-block:clamp(48px, 7vw, 104px) clamp(34px, 4.5vw, 64px)}
/* width:100% here would beat the base .faq-wrap rule and run the copy to the
   viewport edge, out of line with every other column on the page */
.faq-hero .faq-wrap{position:relative;z-index:1;
  width:min(1180px, 100% - 2 * var(--gutter))}
.faq-hero__kicker{
  margin:0 0 .6em;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45)}
.faq-hero__title{
  margin:0;max-width:16ch;color:#fff;
  font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-heading);
  text-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 14px rgba(0,0,0,.35)}
.faq-hero__lede{
  margin:.9em 0 0;max-width:58ch;color:#fff;
  font-size:var(--fs-lg);line-height:1.45;
  text-shadow:0 1px 2px rgba(0,0,0,.45), 0 2px 12px rgba(0,0,0,.3)}

/* ---- sticky search ----
   A direct child of <main> rather than of a section, so it stays put for the
   whole length of the page instead of only its own section. */
/* "Back to top" aims here rather than at the bar itself: the bar is sticky, so
   its rect is its pinned position and scrolling to it would move nothing */
.faq-anchor{display:block;height:0;scroll-margin-top:var(--header-h)}

.faq-searchbar{
  position:sticky;top:var(--header-h);z-index:40;
  /* the gap is margin, not padding: it matches the other sections' bands in
     normal flow, but does not travel with the bar once it sticks under the
     nav, which padding would */
  margin-block:var(--faq-band);
  background:color-mix(in srgb, #fff 92%, transparent);
  backdrop-filter:blur(8px);
  /* no rules: with even gaps above and below, a border floated in the middle
     of the white space. The translucent background and blur are what separate
     the bar from the page once it sticks. */
  padding-block:12px}
.faq-search{margin:0}
.faq-search__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
/* "Ask", "Jump to a Subject" and every subject title share one style, one step
   below the h3 ramp the subject titles used to sit on */
.faq-search__title,
.faq-index__title,
.faq-group__title,
.faq-article__answerTitle{
  margin:0;
  font-size:calc(1 * var(--k) + var(--base));
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-heading)}
.faq-search__status{
  margin:0;font-size:var(--fs-xs);color:var(--accent);font-weight:700;white-space:nowrap}
.faq-search__field{position:relative;display:flex;align-items:center}
.faq-search__icon{
  position:absolute;left:16px;width:20px;height:20px;pointer-events:none;
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.faq-search__input{
  width:100%;padding:14px 44px;
  font:inherit;font-size:var(--fs-lg);color:var(--black);background:#fff;
  border:2px solid color-mix(in srgb, var(--black) 14%, transparent);
  border-radius:999px;-webkit-appearance:none;appearance:none}
.faq-search__input::-webkit-search-decoration,
.faq-search__input::-webkit-search-cancel-button{-webkit-appearance:none}
.faq-search__input::placeholder{color:color-mix(in srgb, var(--black) 42%, white)}
.faq-search__input:focus-visible{outline:none;border-color:var(--accent)}
.faq-search__clear{
  position:absolute;right:10px;width:32px;height:32px;
  display:grid;place-items:center;
  font-size:22px;line-height:1;color:var(--black);
  background:none;border:0;border-radius:50%;cursor:pointer}
.faq-search__clear:hover{background:color-mix(in srgb, var(--black) 8%, transparent)}
/* [hidden] loses to the display above, so restate it */
.faq-search__clear[hidden]{display:none}

/* ---- search results ---- */
.faq-results{
  margin:14px 0 4px;padding:0;list-style:none;
  max-height:min(56vh, 520px);overflow:auto;
  display:grid;gap:6px}
.faq-result__link{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 14px;border-radius:12px;text-decoration:none;
  background:#fff;color:var(--black);
  border:1px solid color-mix(in srgb, var(--black) 10%, transparent)}
.faq-result__link:hover{border-color:var(--accent)}
.faq-result__q{font-size:var(--fs-sm);line-height:1.35}
.faq-result__q mark{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  color:inherit;border-radius:3px;padding:0 1px}
.faq-result__topic{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent)}
.faq-empty{margin:14px 0 4px;padding:16px 18px;border-radius:12px;
  background:var(--bg-light);font-size:var(--fs-md)}
/* while a search is open, the page below it is noise */
.is-faq-searching .faq-index,
.is-faq-searching .faq-body{display:none}

/* ---- subject index ---- */
/* no band padding of its own: the Ask bar's bottom margin sets the space
   above the panel and the first subject's top padding sets the space below,
   so both match the hero-to-Ask gap instead of doubling it */
.faq-index{padding-block:0}
/* the subject index sits in its own rounded panel rather than a full-bleed
   band, so the grey is a shape on the page instead of a stripe across it */
.faq-index__box{
  background:var(--bg-light);
  border-radius:20px;
  padding:clamp(24px, 3vw, 44px)}
.faq-index__title{margin-bottom:1em}
.faq-index__list{
  display:grid;gap:12px;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.faq-index__item a{
  display:flex;flex-direction:column;gap:4px;height:100%;
  padding:16px 18px;border-radius:14px;
  background:#fff;color:var(--black);text-decoration:none;
  border:1px solid color-mix(in srgb, var(--black) 10%, transparent);
  transition:border-color .18s ease, transform .18s ease}
.faq-index__item a:hover{border-color:var(--accent);transform:translateY(-2px)}
.faq-index__name{font-size:var(--fs-md);font-weight:700;line-height:1.25}
.faq-index__meta{font-size:var(--fs-xs);color:color-mix(in srgb, var(--black) 58%, white)}

/* ---- subjects and their topic buttons ---- */
/* each subject is its own full-bleed band, alternating white and the light
   grey the subject index sits on */
.faq-group{
  padding-block:var(--faq-band);
  scroll-margin-top:calc(var(--header-h) + var(--faq-offset, 110px) + 20px)}

/* no measure cap — the blurb runs the full content column */
.faq-group__blurb{
  margin:.5em 0 1.4em;
  font-size:var(--fs-md);line-height:1.5;color:color-mix(in srgb, var(--black) 70%, white)}
.faq-btns{
  display:grid;gap:12px;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr))}
.faq-btn{
  display:flex;flex-direction:column;gap:6px;height:100%;
  padding:18px 20px;border-radius:16px;text-decoration:none;
  background:#fff;color:var(--black);
  border:1px solid color-mix(in srgb, var(--black) 12%, transparent);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.faq-btn:hover{
  border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 6px 18px color-mix(in srgb, var(--black) 10%, transparent)}
.faq-btn__title{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent)}
.faq-btn__q{font-size:var(--fs-md);font-weight:700;line-height:1.3}
.faq-btn__meta{
  margin-top:auto;padding-top:6px;
  font-size:var(--fs-xs);color:color-mix(in srgb, var(--black) 58%, white)}
.faq-btn__meta::after{content:" \2192";color:var(--accent);font-weight:700}

/* back to top, closing each subject */
.faq-totop{display:flex;justify-content:flex-end;margin:18px 0 0}
.faq-totop__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  color:var(--black);background:var(--bg-light);
  border:1px solid color-mix(in srgb, var(--black) 12%, transparent);
  transition:border-color .18s ease, background .18s ease}
.faq-totop__link:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
.faq-totop__link svg{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- a topic's own page ---- */
/* the banner: built like the hub hero — photo, theme overlay, the same
   parallax — at half its height, since it introduces one answer rather than
   opening the section */
.faq-ahero{
  --sec-overlay:0.3;
  /* the two machines sit below the middle of the frame, and the parallax zoom
     shifts the visible window up again at the top of the page, so the crop is
     biased well down to keep both of them in view */
  --bg-focal:50% 65%;
  /* The title sits in the middle of the band you can actually see. The fixed
     header covers the top of the section, and the shared main>.sec:first-child
     rule already pads for exactly that height; a matching zero at the bottom
     makes the content box line up with the visible area, so centring in it
     centres on screen. Padding here would push the title high by half its
     own value. */
  display:flex;align-items:center;
  min-height:clamp(380px, calc(28vw + 140px), 680px);
  padding-bottom:0}
.faq-ahero .faq-wrap{position:relative;z-index:1;
  width:min(860px, 100% - 2 * var(--gutter))}
.faq-ahero__kicker{
  margin:0 0 .5em;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45)}
.faq-ahero__q{
  margin:0;color:#fff;
  font-size:var(--fs-h3);line-height:1.15;letter-spacing:var(--ls-heading);
  text-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 14px rgba(0,0,0,.35)}

.faq-article{padding-block:clamp(32px, 4vw, 60px) clamp(40px, 5vw, 80px)}
.faq-article .faq-wrap{max-width:860px}
/* the way back, beside the answer's heading — same pill as "Back to top" */
.faq-back__link{
  flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px 9px 14px;border-radius:999px;
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  color:var(--black);background:var(--bg-light);
  border:1px solid color-mix(in srgb, var(--black) 12%, transparent);
  transition:border-color .18s ease, background .18s ease, color .18s ease}
.faq-back__link:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
.faq-back__link svg{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* the answer's heading and the way back, on one line */
.faq-article__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:.7em}
.faq-article__a{margin-top:0}
.faq-article__a p{margin:0 0 .8em;font-size:var(--fs-lg);line-height:1.55}
.faq-article__a p:last-child{margin-bottom:0}

/* worked examples in an answer, e.g. "December Corn: $4.00" */
.faq-figure__label{margin:0 0 .4em;font-weight:700;font-size:var(--fs-md)}
.faq-figure{
  margin:0 0 .9em;padding:14px 18px;
  border-left:3px solid var(--accent);
  background:var(--bg-light);border-radius:0 10px 10px 0}
.faq-figure__row{display:flex;gap:10px;font-size:var(--fs-md);line-height:1.7}
.faq-figure dt{font-weight:700;min-width:11em}
.faq-figure dd{margin:0;font-variant-numeric:tabular-nums}

.faq-article__cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  margin-top:2em;padding:20px 24px;border-radius:16px;background:var(--bg-light)}
.faq-article__ctaText{margin:0;flex:1 1 18ch;font-size:var(--fs-md);line-height:1.4}
.faq-article__cta .btn{flex:0 0 auto}

.faq-article__siblings{margin-top:2.4em}
.faq-article__siblingsTitle{
  margin:0 0 .8em;font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:color-mix(in srgb, var(--black) 58%, white)}
.faq-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.faq-pill{
  display:inline-block;padding:7px 14px;border-radius:999px;
  font-size:var(--fs-sm);text-decoration:none;color:var(--black);
  background:#fff;border:1px solid color-mix(in srgb, var(--black) 14%, transparent)}
.faq-pill:hover{border-color:var(--accent);color:var(--accent)}
.faq-article__back{margin:1.2em 0 0;font-size:var(--fs-sm)}
.faq-article__back a{color:var(--accent);font-weight:700;text-decoration:none}
.faq-article__back a:hover{text-decoration:underline}

@media (max-width:720px){
  .faq-figure dt{min-width:9em}
  .faq-searchbar{padding-block:10px}
  .faq-article__cta{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .faq-index__item a:hover,.faq-btn:hover{transform:none}
}

/* ==========================================================================
   Intentional deviations from the published site
   These are requested changes, not fidelity fixes. Each notes what the
   original did, so they are easy to find and revert.
   ========================================================================== */

/* Hero video is bright and busy in places, so the overlaid copy carries a
   soft shadow for legibility. The published site has no shadow here. */
.sec--video .rte h1,
.sec--video .rte h3,
.sec--video .rte p{
  text-shadow:0 1px 2px rgba(0,0,0,.34), 0 2px 12px rgba(0,0,0,.28)}


/* Photos that drift as you scroll past. The published site has no effect on
   these blocks; --px-extra / --py-extra are the slack the image is grown by
   and the distance it travels (js/site.js reads both). */
.blk--image[data-img="BARN-DOOR2-JUNE-2026.jpg"],
.blk--image[data-img="BROKER-INTRO-JUNE-2026-V2.jpg"]{--px-extra:22%}

/* CPM "What changes" cards: tighten the gap between each card's two lines to
   half the normal heading rhythm, and give the copy more room inside the
   panel. The cards are the h4 blocks; the section's own h3 heading is left
   alone. */
[data-section="what-changes-when-you-manage-the-position"] .blk--text:has(h4){
  padding:10px 22px}
[data-section="what-changes-when-you-manage-the-position"] .rte>h4{
  margin-bottom:var(--base)}

/* Footer legal notice and copyright sit a step below the normal small size —
   the published site renders them at --fs-sm. */
.theme--dark-bold .rte p.apa-small{font-size:var(--fs-xs)}

/* Footer links: the published site underlines them at rest. Underline on
   hover/focus only, matching the header nav's behaviour. */
.theme--dark-bold .rte a{
  text-decoration:underline 1px transparent;text-underline-offset:.2em;
  transition:text-decoration-color .2s ease}
.theme--dark-bold .rte a:hover,.theme--dark-bold .rte a:focus-visible{
  text-decoration-color:currentColor}

/* Technology hero sits a little lower than published, showing more of the
   subject's head. --bg-focal is the CMS focal point (published: 45.2048%
   31.202%); a smaller Y reveals more of the top of the photo. !important is
   needed because layout.css sets the generated value on an id selector. */
[data-section="we-build-our-technology"]{--bg-focal:45.2048% 20% !important}

/* Technology "behind the relationship" section: the published layout leaves
   57px between the heading band and the image but nothing below it, so the
   photo runs straight into the band beneath. Match the two. */
[data-section="the-technology-behind-the-relationship"] .blk--image[data-img="BROKER-TECH-V2.jpg"] .img{
  bottom:57px;height:auto}

/* Contact locations: one table replaces the 24 individually positioned blocks
   the published page used, so every row is built the same way. The panel is
   ~276px wide — far too narrow for side-by-side columns at this type size —
   so the cells stack: name, then the phone indented beneath it, which is the
   arrangement East Peoria already had. */
#apa-locations{grid-area:49/3/77/10;z-index:6;justify-content:flex-start}
@media (min-width:768px){#apa-locations{grid-area:8/15/35/20}}
/* below 1000px the shading covers the whole photo, so the table follows it
   instead of wrapping inside a panel that has room to spare */
@media (min-width:768px) and (max-width:999px){#apa-locations{grid-area:8/15/35/25}}

/* the panel sits on a dark photo, so the table carries the white the
   original per-span colours provided */
.locations{width:100%;border-collapse:collapse;table-layout:fixed;color:#fff}
.locations tr,.locations th,.locations td{display:block;text-align:left}
/* One shared indent for both cells, expressed against --fs-lg so it resolves
   to the same pixel value in each (an `em` would differ, since the cells are
   set at different sizes). The bullet hangs outside it, so the city name and
   the phone line share a left edge. */
.locations{--loc-indent:calc(var(--fs-lg) * 0.75)}
.locations th{
  position:relative;
  font-size:var(--fs-lg);font-weight:400;line-height:1.15;
  padding:0 0 4px var(--loc-indent)}
.locations th::before{content:"•";position:absolute;left:0;top:0}
.locations td{padding:0 0 var(--base) var(--loc-indent)}
.locations tr:last-child td{padding-bottom:0}
.locations td a{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:var(--fs-md);line-height:1.2;
  text-decoration:underline 1px transparent;text-underline-offset:.2em;
  transition:text-decoration-color .2s ease}
.locations td a:hover,.locations td a:focus-visible{text-decoration-color:currentColor}
.locations__icon{width:1.1em;height:1.1em;flex:0 0 auto;object-fit:contain}
.locations__address{
  display:block;margin-top:.35em;
  font-size:var(--fs-md);line-height:1.35;opacity:.92}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Contact: the photo behind the locations panel drifts vertically. */
.blk--image[data-img="LAUREN-2026.png"]{--py-extra:20%}

/* Technology app-store call to action: the icon, caption and both badges were
   four separately positioned blocks that drifted apart and collided as the
   viewport changed. They are composed into one centred stack (see APPSTORE in
   gen.js) with artwork at a fixed size, so the group stays together and the
   same size at every width. */
#apa-appcta{
  grid-area:43/3/52/9;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.4vw,16px);text-align:center}
@media (min-width:768px){#apa-appcta{grid-area:23/11/29/17}}
.appcta__icon{width:56px;height:56px;object-fit:contain}
.appcta__caption{font-size:var(--fs-lg);line-height:1.15;margin:0}
.appcta__badges{display:flex;flex-direction:column;align-items:center;gap:10px}
.appcta__badge{display:block;line-height:0}
.appcta__badge img{width:110px;height:auto;object-fit:contain}
.appcta__badge:hover{opacity:.85}

/* Technology CTA button: the stretched variant has no vertical padding, so a
   wrapped label sits flush against the pill. Give it a floor. */
[data-section="the-technology-behind-the-relationship"] .blk--button .btn{
  padding-block:5px;max-width:520px;margin-inline:auto}

/* Footer Contact column: paired with a wider grid area (see GRID_FIX in
   gen.js). The type runs at the published large size wherever the column can
   hold "info@apalis.com" on one line, and ramps down to the normal size as the
   column narrows toward the mobile breakpoint. */
@media (min-width:768px){
  #apa-b49 .rte p{
    font-size:clamp(var(--fs-md), calc(2.48px + 2.025vw), var(--fs-lg))}
}

/* Footer "What's your / Position?": published as two blocks that share a grid
   row, which is what gives the tight, staggered stack — the stagger comes from
   the two blocks having different widths, and so different centres.
   "What's your" only gets 4 of 24 columns, so it wrapped to two lines and ran
   into "Position?". Keeping it on one line fixes that without widening the
   block, which would line the two centres up and flatten the stagger. The
   inline white-space from the CMS content needs overriding, hence !important.
   The remaining nudge covers the band where the line heights alone still
   meet. */
#apa-b46 .rte h3{white-space:nowrap !important}
@media (min-width:768px) and (max-width:1199px){
  #apa-b45{padding-top:10px}
}

/* Footer button: like the Technology one, the stretched variant has no
   vertical padding, so its wrapped label sits flush against the pill. */
.theme--dark-bold .blk--button .btn{padding-block:5px}

/* Contact: breathing room between the hero photo and the grey
   "Putting control back into your hands" bar that opens the next section. */
[data-section="contact-us"]{padding-top:25px}

/* Contact "Call us" button: comfortable minimum width, clear of the copy
   above it. Below ~1150px its grid column is narrower than 280px, so the
   button is anchored to the column's left edge — centred, it would overflow
   both sides and run off the viewport. The space it grows into is empty. */
/* Contact intro copy + "Call us" button, composed into one block (see CALLCTA
   in gen.js) so the button follows the paragraph in normal flow and the gap
   between them is exactly 20px at every width, rather than whatever the grid
   rows happen to measure. The button is sized by its own content, not by a
   grid cell — the published cell is narrower than 280px between ~768px and
   ~1150px, which clipped the number. */
#apa-callcta{grid-area:9/2/17/10;z-index:5;justify-content:flex-start}
@media (min-width:768px){#apa-callcta{grid-area:8/2/14/13}}
.callcta__btn{
  display:block;
  /* block-level so it takes its own line and the margin below applies, but
     sized to its label rather than stretching the full column width */
  width:max-content;
  max-width:100%;
  height:auto;
  min-width:280px;
  white-space:nowrap;
  text-align:center;
  padding:15px 34.2px;
  margin-top:20px}
/* On mobile the grey bar ends exactly where this block's first row begins, so
   the intro copy sits flush against it. Desktop already has clear rows between
   the two. */
@media (max-width:767px){#apa-callcta{padding-top:20px}}

/* Home, the two icon rows under "new information changes the outlook".
   Published as separate blocks — icon in one grid area, label in another — the
   label was laid out flush with the left edge of its column whenever the word
   was wider than that column, so it sat off-centre from its icon by half the
   overflow. That offset grew and shrank with the viewport, which is what made
   the row look unsettled while resizing. Icon and label are now one block, so
   they are centred on each other by construction at every width.
   The stack is centred in the block's grid band, which keeps it where the
   published 3-row icon / 2-row label split put it. */
.blk--iconlbl{
  /* Every icon is exactly two grid columns wide, computed the way the grid
     itself computes a column. Sizing them from their own block instead let two
     differences through as mismatched icons: b19 spans three columns on mobile,
     and the two rows sit in bands of different heights. */
  --icon:calc(2 * min(var(--cell-max),
                      (100vw - 2 * var(--gutter) - var(--gap,11px) * (var(--cols) - 1))
                      / var(--cols))
              + var(--gap,11px));
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  row-gap:var(--gap,11px);
  justify-items:center;
  text-align:center}
.blk--iconlbl>*{width:auto}
.blk--iconlbl>.iconlbl__icon{
  width:var(--icon);
  aspect-ratio:1;
  object-fit:contain}
.iconlbl__label{
  margin:0;
  /* one step below .apa-small on the same fluid ramp */
  font-size:calc(-0.2 * var(--k) + var(--base));
  line-height:1.1;
  /* the labels carry their own line breaks; never re-wrap them */
  white-space:nowrap}

/* from 1000px the shading returns to the published narrow band, which is too
   tight for "Edwards (Kickapoo), IL" at the large size; step the names down
   until the column is wide enough again */
@media (min-width:1000px) and (max-width:1279px){
  .locations th{font-size:clamp(16.5px, calc(11.12px + 0.538vw), var(--fs-md))}
}

/* Privacy policy: a plain reading column rather than a grid layout. The
   published site had no such page (the policy was a PDF on files.apalis.com). */
.sec--doc{--sec-pad:clamp(40px, 6vw, 96px)}
.doc{max-width:760px;margin-inline:auto;padding-inline:var(--gutter)}
.doc h1{font-size:var(--fs-h2);line-height:var(--lh-h2)}
.doc h2{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:700}
.doc>h2{margin-block:calc(var(--base) * 2) calc(var(--base) * .5)}
.doc ul{list-style:disc;padding-left:1.4em}
.doc li{font-size:var(--fs-md);line-height:var(--lh-body);margin-block:.4em}
.doc code{font-size:.9em}