/*
Theme Name: WindyCity Security
Theme URI: https://windycitysecurity.com/
Author: WindyCity Security
Author URI: https://windycitysecurity.com/
Description: Marketing theme for WindyCity Security - security fog systems, security window film, cameras, remote monitoring, access control and bio locks. Navy and cyan brand, full-bleed content bands, no sidebar. Pages are installed from the theme; see inc/page-manifest.php.
Version: 1.9.2
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: windycity-security
Tags: business, one-column, custom-menu, custom-logo, custom-colors, block-styles, wide-blocks, full-width-template
*/

/* ==========================================================================
   1. Brand tokens and content-band styles
   These style the page content that comes from the WindyCity import.
   ========================================================================== */

:root{
  --wc-navy:#122435;
  --wc-cyan:#41B6E6;
  --wc-cyan-deep:#1F8DBC;
  --wc-slate:#93B4C8;
  --wc-paper:#F3F6F9;
  --wc-surface:#FFFFFF;
  --wc-ink:#101F2C;
  --wc-ink-2:#41586C;
  --wc-line:#D2DEE7;
  --wc-amber:#B47509;
  --wc-amber-bg:#FDF4E3;
  --wc-shadow:0 1px 2px rgba(16,31,44,.06),0 8px 24px -12px rgba(16,31,44,.18);
  --wc-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wc-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --wc-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wc-measure:66ch;
  --wc-pad:clamp(1.25rem,5vw,3rem);
}

/* ---- bands ------------------------------------------------------------- */
.wc-band{
  padding:clamp(3rem,7vw,5.5rem) var(--wc-pad);
  background:var(--wc-paper);
  color:var(--wc-ink);
  font-family:var(--wc-body);
  border-top:1px solid var(--wc-line);
}
.wc-band > *{max-width:1140px;margin-inline:auto}
.wc-band-dark{background:var(--wc-navy);color:#EAF2F8;border-top:0}
/* Heroes are an introduction, not a landing screen - keep them tight so the
   first real section is visible without scrolling. The headline is scaled down
   with the padding so the band reads compact rather than cramped. */
.wc-band-hero{background:var(--wc-navy);color:#EAF2F8;border-top:0;padding-block:clamp(1.15rem,2.2vw,1.9rem)}
/* Doubled class so this outranks ".wc-band h1", which is declared later in the
   file and would otherwise win on source order at equal specificity. */
.wc-band.wc-band-hero h1{font-size:clamp(1.75rem,3.9vw,2.5rem);margin-bottom:.55rem}
.wc-band-hero .wc-eyebrow{margin-bottom:.4rem !important}
.wc-band-hero .wc-lede{font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.5;margin-bottom:0}
.wc-band-hero .wp-block-buttons{margin-top:1rem}

.wc-band h1,.wc-band h2,.wc-band h3,.wc-band h4{
  font-family:var(--wc-display);font-weight:700;line-height:1.12;
  letter-spacing:-.018em;text-wrap:balance;
}
.wc-band h1{font-size:clamp(2.2rem,5.4vw,3.5rem);margin:0 0 .6rem}
.wc-band h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .6rem}
.wc-band h3{font-size:1.16rem;margin:0 0 .35rem}
.wc-band p{margin:0 0 1rem;line-height:1.62;max-width:var(--wc-measure)}
.wc-band-dark h1,.wc-band-dark h2,.wc-band-dark h3,.wc-band-hero h1{color:#fff}

.wc-eyebrow{
  font-family:var(--wc-mono);font-size:.7rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;color:var(--wc-cyan-deep);margin:0 0 .7rem !important;
}
/* Needs the .wc-band prefix to outrank ".wc-band p", which otherwise caps the
   eyebrow at the 66ch prose measure and wraps it onto a second line. */
.wc-band .wc-eyebrow{max-width:none}
.wc-band-dark .wc-eyebrow,.wc-band-hero .wc-eyebrow{color:var(--wc-cyan)}
.wc-lede{font-size:clamp(1.05rem,1.9vw,1.22rem);color:var(--wc-slate);max-width:56ch}
.wc-muted{color:var(--wc-ink-2)}
.wc-band-dark .wc-muted{color:var(--wc-slate)}
.wc-fine{font-size:.86rem;color:var(--wc-ink-2)}
.wc-band-dark .wc-fine{color:var(--wc-slate)}

/* ---- buttons ----------------------------------------------------------- */
/* WordPress core supplies most of this, but declaring it here means the
   section still lays out correctly if block-library CSS is dequeued. */
.wc-band .wp-block-buttons{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 0}
.wc-band .wp-block-button{margin:0}
.wc-band .wp-block-button__link{
  display:inline-block;text-decoration:none;
  font-family:var(--wc-display);font-weight:600;font-size:.94rem;
  border-radius:3px;padding:.72rem 1.25rem;
  background:var(--wc-cyan);color:#08141E;border:1px solid var(--wc-cyan);
}
.wc-band .wp-block-button__link:hover{background:#63C6F0;border-color:#63C6F0;color:#08141E}
.wc-band .is-style-outline .wp-block-button__link{
  background:transparent;border-color:var(--wc-slate);color:inherit;
}
.wc-band .is-style-outline .wp-block-button__link:hover{border-color:var(--wc-cyan);color:var(--wc-cyan)}

/* ---- rule list --------------------------------------------------------- */
.wc-rulelist{list-style:none;margin:0;padding:0;border-top:1px solid var(--wc-line)}
.wc-rulelist li{
  border-bottom:1px solid var(--wc-line);padding:1.15rem 0;margin:0;
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
}
.wc-rulelist .k{
  font-family:var(--wc-mono);font-size:.75rem;color:var(--wc-cyan-deep);
  letter-spacing:.06em;white-space:nowrap;
}
.wc-band-dark .wc-rulelist,.wc-band-dark .wc-rulelist li{border-color:rgba(147,180,200,.24)}
.wc-band-dark .wc-rulelist .k{color:var(--wc-cyan)}

/* ---- checklist --------------------------------------------------------- */
.wc-checks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.wc-checks li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;margin:0}
.wc-checks .mk{color:var(--wc-cyan-deep);font-family:var(--wc-mono);font-size:.9rem;line-height:1.7}
.wc-band-dark .wc-checks .mk{color:var(--wc-cyan)}

/* ---- cards ------------------------------------------------------------- */
.wc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1.1rem}
.wc-card{
  background:var(--wc-surface);border:1px solid var(--wc-line);border-radius:4px;
  padding:1.5rem 1.4rem;box-shadow:var(--wc-shadow);
}
.wc-card h3{margin:0 0 .5rem}
.wc-card p{margin:0;color:var(--wc-ink-2);font-size:.95rem}
.wc-card a{color:var(--wc-cyan-deep);font-family:var(--wc-mono);font-size:.75rem;
  letter-spacing:.06em;text-decoration:none;display:inline-block;margin-top:.8rem}
.wc-card a:hover{text-decoration:underline}
.wc-band-dark .wc-card{background:rgba(255,255,255,.04);border-color:rgba(147,180,200,.24)}
.wc-band-dark .wc-card p{color:var(--wc-slate)}

/* ---- stats ------------------------------------------------------------- */
.wc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--wc-line);border:1px solid var(--wc-line)}
.wc-stats > div{background:var(--wc-paper);padding:1.3rem 1.15rem}
.wc-stats .n{font-family:var(--wc-display);font-weight:700;font-size:1.75rem;
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wc-stats .l{font-size:.85rem;color:var(--wc-ink-2);margin-top:.35rem}
/* stat tiles carry their own light ground, so on a navy band they must also
   carry their own text colors - otherwise the band's white text lands on them */
.wc-band-dark .wc-stats{background:rgba(147,180,200,.24);border-color:rgba(147,180,200,.24)}
.wc-band-dark .wc-stats > div{background:transparent}
.wc-band-dark .wc-stats .n{color:#fff}
.wc-band-dark .wc-stats .l{color:var(--wc-slate)}

/* ---- status card (statute facts) --------------------------------------- */
.wc-status{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;border:1px solid var(--wc-line);border-radius:4px;overflow:hidden;
  background:var(--wc-line);box-shadow:var(--wc-shadow);margin:0}
.wc-status > div{background:var(--wc-surface);padding:1.1rem 1.2rem}
.wc-status dt{font-family:var(--wc-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--wc-ink-2);margin-bottom:.35rem}
.wc-status dd{margin:0;font-family:var(--wc-display);font-weight:600;font-size:1.02rem;
  font-variant-numeric:tabular-nums;color:var(--wc-ink)}

/* ---- callouts ---------------------------------------------------------- */
.wc-callout{border-left:3px solid var(--wc-cyan);padding:.15rem 0 .15rem 1.15rem}
.wc-callout p{margin:0}
.wc-warn{
  border-left:3px solid var(--wc-amber);background:var(--wc-amber-bg);
  padding:1.1rem 1.2rem;border-radius:0 4px 4px 0;color:var(--wc-ink);
}
.wc-warn .tag{font-family:var(--wc-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--wc-amber);font-weight:500;margin:0 0 .5rem}
.wc-warn p:last-child{margin:0;max-width:none}

/* ---- timeline ---------------------------------------------------------- */
.wc-timeline{list-style:none;margin:.35rem 0 0;padding:0;border-left:2px solid var(--wc-line)}
.wc-timeline li{position:relative;padding:0 0 1.6rem 1.6rem;margin:0}
.wc-timeline li:last-child{padding-bottom:0}
.wc-timeline li::before{content:"";position:absolute;left:-7px;top:.5rem;width:12px;height:12px;
  border-radius:50%;background:var(--wc-paper);border:2px solid var(--wc-slate)}
.wc-timeline li.now::before{background:var(--wc-cyan);border-color:var(--wc-cyan)}
.wc-timeline .date{font-family:var(--wc-mono);font-size:.76rem;letter-spacing:.05em;
  color:var(--wc-cyan-deep);font-variant-numeric:tabular-nums;display:block}
.wc-timeline h4{font-family:var(--wc-display);font-size:1.02rem;font-weight:600;margin:.15rem 0 .2rem}
.wc-timeline p{margin:0;color:var(--wc-ink-2);font-size:.95rem}

/* ---- sequence strip (fog) ---------------------------------------------- */
.wc-seq{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:1px;background:rgba(147,180,200,.24);border:1px solid rgba(147,180,200,.24)}
.wc-seq > div{background:var(--wc-navy);padding:1.4rem 1.2rem}
.wc-seq .t{font-family:var(--wc-mono);font-size:1.05rem;color:var(--wc-cyan);
  font-variant-numeric:tabular-nums;display:block;margin-bottom:.45rem}
.wc-seq h4{font-family:var(--wc-display);font-size:.98rem;font-weight:600;color:#fff;margin:0 0 .45rem}
.wc-seq p{margin:0;font-size:.9rem;color:var(--wc-slate);line-height:1.5;max-width:none}

/* ---- comparison list (records vs. interrupts) -------------------------- */
.wc-vs{list-style:none;margin:.35rem 0 0;padding:0;border-top:1px solid var(--wc-line)}
.wc-vs > li{
  border-bottom:1px solid var(--wc-line);padding:1.35rem 0;margin:0;
  display:grid;grid-template-columns:1fr;gap:.85rem;
}
@media(min-width:860px){
  .wc-vs > li{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr);
    gap:1.6rem;align-items:start}
}
.wc-vs h4{font-family:var(--wc-display);font-size:1.02rem;font-weight:600;
  color:var(--wc-ink);margin:0;line-height:1.35}
.wc-vs .rec,.wc-vs .stop{font-size:.95rem;line-height:1.55;max-width:none}
.wc-vs .rec{color:var(--wc-ink-2)}
.wc-vs .stop{color:var(--wc-ink);border-left:2px solid var(--wc-cyan);padding-left:1.1rem}
.wc-vs .lbl{
  display:block;font-family:var(--wc-mono);font-size:.66rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--wc-ink-2);margin-bottom:.35rem;font-weight:500;
}
.wc-vs .stop .lbl{color:var(--wc-cyan-deep)}
.wc-band-dark .wc-vs,.wc-band-dark .wc-vs > li{border-color:rgba(147,180,200,.24)}
.wc-band-dark .wc-vs h4{color:#fff}
.wc-band-dark .wc-vs .rec,.wc-band-dark .wc-vs .lbl{color:var(--wc-slate)}
.wc-band-dark .wc-vs .stop{color:#EAF2F8}
.wc-band-dark .wc-vs .stop .lbl{color:var(--wc-cyan)}

/* ---- tables ------------------------------------------------------------ */
.wc-band .wp-block-table{overflow-x:auto}
.wc-band .wp-block-table table{border-collapse:collapse;width:100%;min-width:460px;font-size:.93rem}
.wc-band .wp-block-table th,.wc-band .wp-block-table td{
  text-align:left;padding:.8rem 1.1rem;border:0;border-bottom:1px solid var(--wc-line);vertical-align:top}
.wc-band .wp-block-table th{font-family:var(--wc-mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.11em;color:var(--wc-ink-2);font-weight:500}
.wc-band .wp-block-table td:last-child{font-family:var(--wc-mono);font-size:.86rem;
  font-variant-numeric:tabular-nums}
.wc-band-dark .wp-block-table th,.wc-band-dark .wp-block-table td{
  border-color:rgba(147,180,200,.24);color:#EAF2F8}
.wc-band-dark .wp-block-table th{color:var(--wc-slate)}

/* ---- figures (inline SVG diagrams) ------------------------------------- */
.wc-figure{
  margin:0;padding:1.6rem 1.4rem;border:1px solid var(--wc-line);border-radius:4px;
  background:var(--wc-surface);overflow-x:auto;
}
.wc-figure svg{display:block;max-width:100%;height:auto;min-width:520px;margin-inline:auto}
/* A figure carrying a photograph rather than a diagram. No min-width - unlike an
   SVG a photo must never force the figure to scroll on a phone. */
.wc-figure > img{display:block;width:100%;height:auto;border-radius:3px}
.wc-figure figcaption{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--wc-line);
  font-size:.88rem;line-height:1.55;color:var(--wc-ink-2);max-width:70ch;
}
.wc-band-dark .wc-figure{background:rgba(255,255,255,.035);border-color:rgba(147,180,200,.24)}
.wc-band-dark .wc-figure figcaption{color:var(--wc-slate);border-top-color:rgba(147,180,200,.24)}

/* ---- two-column split -------------------------------------------------- */
.wc-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
/* the contact form needs more room than the details beside it */
@media(min-width:900px){.wc-two.is-form{grid-template-columns:1.45fr 1fr}}

/* ---- misc -------------------------------------------------------------- */
.wc-band a{color:var(--wc-cyan-deep)}
.wc-band-dark a,.wc-band-hero a{color:var(--wc-cyan)}
.wc-band :focus-visible{outline:2px solid var(--wc-cyan);outline-offset:2px}


/* ==========================================================================
   2. Theme chrome - masthead, nav, footer, alignment
   ========================================================================== */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--wc-paper);
  color:var(--wc-ink);
  font-family:var(--wc-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--wc-cyan-deep)}

/* screen-reader text (required for accessibility / theme checks) */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;padding:.7rem 1.1rem;
  background:var(--wc-cyan);color:#08141E;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---- alignment (align-wide support) ---- */
/* Full-bleed bands.

   These used to be width:100vw with margin-left:calc(50% - 50vw), which is the
   standard trick for breaking a band out of a *constrained* wrapper. Nothing
   constrains them here - .wc-main, article and .entry-content are all plain
   full-width blocks - so the trick was not buying anything, and 100vw counts
   the scrollbar. That made every band a scrollbar wider than the viewport and
   put ~8px of horizontal scroll on every page of the site.

   A normal block already fills its parent. Let it. */
.wc-main .alignfull{
  width:auto;max-width:none;
  margin-left:0;margin-right:0;
}
.wc-main .alignwide{max-width:1240px;margin-inline:auto}
.wc-main > .entry-content > *:not(.alignfull):not(.alignwide){
  max-width:1140px;margin-inline:auto;padding-inline:var(--wc-pad);
}

/* ---- masthead ---- */
.wc-mast{position:sticky;top:0;z-index:60;background:var(--wc-navy);color:#fff}
.admin-bar .wc-mast{top:32px}
@media(max-width:782px){.admin-bar .wc-mast{top:46px}}
/* The brand and all eight links have to fit on ONE row at desktop widths - the
   moment the nav wraps, the navy header grows by another 48px before the hero
   even starts. Hence the tight type and padding on .wc-nav a below. */
.wc-mast-in{
  max-width:1320px;margin-inline:auto;padding:.45rem var(--wc-pad);
  display:flex;align-items:center;gap:.75rem;min-height:56px;flex-wrap:wrap;
}
.wc-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 0 auto}
.wc-brand svg{display:block;height:34px;width:auto}
.wc-brand img{display:block;max-height:44px;width:auto}
.wc-brand-txt{
  font-family:var(--wc-display);font-weight:700;font-size:1.06rem;letter-spacing:.02em;
  line-height:1;color:#fff;white-space:nowrap;
}
.wc-brand-txt span{color:var(--wc-slate);font-weight:500}

.wc-nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid rgba(147,180,200,.4);
  color:#fff;border-radius:3px;padding:.45rem .7rem;font:inherit;font-size:.85rem;
  font-weight:600;cursor:pointer;
}
.wc-nav{margin-left:auto}
.wc-nav ul{display:flex;gap:.1rem;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
.wc-nav li{margin:0}
.wc-nav a{
  display:block;font-size:.79rem;font-weight:600;color:var(--wc-slate);
  text-decoration:none;padding:.42rem .34rem;border-bottom:2px solid transparent;white-space:nowrap;
}
.wc-nav a:hover,.wc-nav a:focus{color:#fff}
.wc-nav .current-menu-item > a,
.wc-nav .current_page_item > a,
.wc-nav .current-menu-ancestor > a{color:#fff;border-bottom-color:var(--wc-cyan)}
.wc-nav a:focus-visible{outline:2px solid var(--wc-cyan);outline-offset:2px}
/* one level of dropdown, kept simple */
.wc-nav .sub-menu{display:none;position:absolute;background:var(--wc-navy);
  border:1px solid rgba(147,180,200,.25);padding:.3rem;flex-direction:column;min-width:200px;z-index:70}
.wc-nav li:hover > .sub-menu,.wc-nav li:focus-within > .sub-menu{display:flex}
.wc-nav .menu-item-has-children{position:relative}

.wc-mast-tel{
  font-family:var(--wc-mono);font-size:.74rem;letter-spacing:.06em;color:var(--wc-cyan);
  text-decoration:none;white-space:nowrap;padding-left:.9rem;
  border-left:1px solid rgba(147,180,200,.3);
}
/* The phone only appears when the brand, eight links and the number all fit on
   one row together. Below that it drops out rather than pushing the nav onto a
   second line - it is still in the hero, on Contact, and in the footer. */
@media(max-width:1360px){.wc-mast-tel{display:none}}

/* Between the full-width layout and the hamburger there isn't room for the
   wordmark AND eight links on one row. The shield alone still identifies the
   site, and one row of navy beats two. */
@media(max-width:1160px) and (min-width:901px){
  .wc-brand-txt{display:none}
  .wc-nav a{font-size:.75rem;padding:.42rem .3rem}
}

@media(max-width:900px){
  .wc-nav-toggle{display:block}
  .wc-nav{flex-basis:100%;margin-left:0;display:none}
  .wc-nav.is-open{display:block}
  .wc-nav ul{flex-direction:column;align-items:stretch;gap:0;padding-bottom:.5rem}
  .wc-nav a{padding:.65rem .2rem;border-bottom:1px solid rgba(147,180,200,.15)}
  .wc-nav .current-menu-item > a,.wc-nav .current_page_item > a{border-bottom-color:var(--wc-cyan)}
  .wc-nav .sub-menu{display:flex;position:static;border:0;padding-left:1rem;background:none}
}

/* ---- contact form ------------------------------------------------------ */
/* The masthead is sticky, so jumping to #form after a submit would otherwise
   park the error summary underneath it. */
.wc-form,.wc-form-done{scroll-margin-top:96px}
.wc-form{margin:0;max-width:none}
.wc-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:540px){.wc-form-row{grid-template-columns:1fr}}

.wc-field{margin:0 0 1.05rem;max-width:none}
.wc-field label{
  display:block;font-family:var(--wc-display);font-weight:600;font-size:.86rem;
  letter-spacing:.01em;margin-bottom:.32rem;color:var(--wc-ink);
}
.wc-field .req{color:var(--wc-cyan-deep);margin-left:.1em}
.wc-field .opt{
  font-family:var(--wc-mono);font-weight:400;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--wc-ink-2);margin-left:.45em;
}
.wc-form input[type=text],
.wc-form input[type=email],
.wc-form input[type=tel],
.wc-form textarea{
  display:block;width:100%;box-sizing:border-box;
  font-family:var(--wc-body);font-size:1rem;color:var(--wc-ink);
  background:var(--wc-surface);border:1px solid var(--wc-line);border-radius:3px;
  padding:.62rem .7rem;line-height:1.4;
}
.wc-form textarea{resize:vertical;min-height:5.5rem}
.wc-form input:focus,.wc-form textarea:focus{
  outline:none;border-color:var(--wc-cyan-deep);
  box-shadow:0 0 0 3px rgba(65,182,230,.22);
}
.wc-field.has-error input,.wc-field.has-error textarea{border-color:#B3261E}
.wc-err{display:block;font-size:.82rem;color:#B3261E;margin-top:.3rem}

.wc-form-alert{
  margin:0 0 1.2rem;padding:.75rem .95rem;font-size:.92rem;
  background:var(--wc-amber-bg);border-left:3px solid var(--wc-amber);color:var(--wc-ink);
  max-width:none;
}

/* checkbox group */
.wc-checks-field{
  border:1px solid var(--wc-line);border-radius:3px;background:var(--wc-surface);
  padding:1rem 1.1rem 1.1rem;margin:0 0 1.05rem;
}
.wc-checks-field legend{
  font-family:var(--wc-display);font-weight:700;font-size:1.02rem;color:var(--wc-ink);
  padding:0 .35rem;margin-left:-.35rem;
}
.wc-checks-field .wc-fine{margin:.1rem 0 .7rem}
.wc-check{
  display:flex;align-items:center;gap:.6rem;padding:.42rem 0;cursor:pointer;
  font-size:.97rem;color:var(--wc-ink);
}
.wc-check input{
  width:1.12rem;height:1.12rem;margin:0;flex:0 0 auto;accent-color:var(--wc-cyan-deep);cursor:pointer;
}
.wc-check:hover span{color:var(--wc-cyan-deep)}

/* the honeypot - hidden from people without display:none, which some bots skip */
.wc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wc-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin:1.3rem 0 0;max-width:none}
.wc-submit{
  font-family:var(--wc-display);font-weight:600;font-size:.96rem;
  background:var(--wc-cyan);color:#08141E;border:1px solid var(--wc-cyan);
  border-radius:3px;padding:.75rem 1.5rem;cursor:pointer;
}
.wc-submit:hover{background:#63C6F0;border-color:#63C6F0}
.wc-submit:focus-visible{outline:2px solid var(--wc-cyan-deep);outline-offset:2px}

/* thank-you panel */
.wc-form-done{
  background:var(--wc-surface);border:1px solid var(--wc-line);border-left:3px solid var(--wc-cyan);
  border-radius:3px;padding:1.5rem 1.5rem 1.35rem;box-shadow:var(--wc-shadow);
}
.wc-form-done h3{font-family:var(--wc-display);font-weight:700;font-size:1.3rem;margin:0 0 .5rem}
.wc-form-done p{margin:0 0 .7rem}
.wc-form-done p:last-child{margin:0}

/* on a navy band the fields keep their own light ground, so the labels have to
   carry their own colour rather than inherit the band's white */
.wc-band-dark .wc-form label,
.wc-band-dark .wc-check,
.wc-band-dark .wc-checks-field legend{color:#EAF2F8}
.wc-band-dark .wc-checks-field{background:rgba(255,255,255,.04);border-color:rgba(147,180,200,.24)}

/* ---- footer ---- */
.wc-foot{background:var(--wc-navy);color:var(--wc-slate);padding-block:2.8rem;font-size:.9rem}
.wc-foot-in{max-width:1140px;margin-inline:auto;padding-inline:var(--wc-pad)}
.wc-foot a{color:var(--wc-slate);text-decoration:none}
.wc-foot a:hover,.wc-foot a:focus{color:var(--wc-cyan)}
.wc-foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2rem}
.wc-foot h2{
  font-family:var(--wc-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  color:#fff;font-weight:500;margin:0 0 .7rem;
}
.wc-foot ul{display:grid;gap:.4rem;list-style:none;margin:0;padding:0}
.wc-foot .wc-brand{margin-bottom:.9rem}
.wc-foot p{margin:0;font-size:.86rem}
.wc-legal{
  border-top:1px solid rgba(147,180,200,.2);margin-top:2.2rem;padding-top:1.3rem;
  font-size:.8rem;line-height:1.6;
}

/* ---- generic post / 404 fallback ---- */
.wc-simple{max-width:1140px;margin-inline:auto;padding:clamp(3rem,7vw,5rem) var(--wc-pad)}
.wc-simple h1{font-family:var(--wc-display);font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 1rem}
.wc-simple .wc-entry + .wc-entry{margin-top:3rem;padding-top:3rem;border-top:1px solid var(--wc-line)}
.wc-simple a{color:var(--wc-cyan-deep)}


/* ---- photo pairs and capability icons --------------------------------- */
.wc-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.3rem}
.wc-photos figure{margin:0;max-width:460px}
/* never upscale: these originals are small, so render at native size */
.wc-photos img{display:block;width:auto;max-width:100%;height:auto;border-radius:3px;border:1px solid var(--wc-line)}
/* Pairs whose two sources are very different pixel sizes but near-identical in
   shape. Matching them on WIDTH would upscale the smaller file by a third and
   make it visibly soft; matching on height lands them within a few pixels of
   the same width anyway, and neither gets enlarged. */
.wc-photos.is-even figure{max-width:none;display:flex;flex-direction:column;align-items:center}
.wc-photos.is-even img{max-height:520px;width:auto;max-width:100%}
.wc-photos.is-even figcaption{align-self:stretch}
.wc-photos figcaption{
  margin-top:.6rem;padding:0;border:0;font-size:.86rem;line-height:1.5;color:var(--wc-ink-2);
}
/* Compact variant - for photo pairs that document a scene rather than carry it.
   Keeps them legible without letting them dominate the band. */
.wc-photos.is-compact{grid-template-columns:repeat(auto-fit,minmax(190px,300px));justify-content:start;gap:1.1rem}
.wc-photos.is-compact figure{max-width:300px}
.wc-photos.is-compact figcaption{font-size:.82rem}

/* a caption row is ragged by nature; give following prose room to breathe */
.wc-photos + p{margin-top:1.4rem}
.wc-band-dark .wc-photos img{border-color:rgba(147,180,200,.24)}
.wc-band-dark .wc-photos figcaption{color:var(--wc-slate)}

/* Portrait video (phone-shot clips) - a 9:16 file must not run the width of the
   band, so it gets a narrow column with the context sitting beside it. */
.wc-vids.is-portrait{grid-template-columns:minmax(0,300px)}
@media(min-width:760px){.wc-two.is-video{grid-template-columns:minmax(0,300px) 1fr;gap:2.4rem}}

/* ---- video grid -------------------------------------------------------- */
.wc-vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.4rem}
.wc-vids figure{margin:0}
.wc-vids video{
  display:block;width:100%;height:auto;background:#000;
  border:1px solid var(--wc-line);border-radius:3px;
}
.wc-vids .lbl{
  display:block;font-family:var(--wc-mono);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.13em;color:var(--wc-cyan-deep);margin:.7rem 0 .25rem;
}
.wc-vids figcaption{margin:0;font-size:.88rem;line-height:1.5;color:var(--wc-ink-2)}
.wc-band-dark .wc-vids video{border-color:rgba(147,180,200,.24)}
.wc-band-dark .wc-vids figcaption{color:var(--wc-slate)}
.wc-band-dark .wc-vids .lbl{color:var(--wc-cyan)}

.wc-icon{display:block;width:56px;height:56px;margin-bottom:.9rem}
.wc-icon .hex{fill:none;stroke:var(--wc-slate);stroke-width:4}
.wc-icon .gl{fill:var(--wc-cyan-deep)}
.wc-band-dark .wc-icon .gl{fill:var(--wc-cyan)}