/* ==========================================================================
   GLOBAL TEXT SCALE
   100% = the original size. 200% = double, as requested.
   To fine-tune the whole site's text, change ONLY this one value
   (e.g. 150% for halfway between the original and double).
   ========================================================================== */
html{font-size:90%}

/* ==========================================================================
   Hanif SpiralSpektra v2
   Written to sit ON TOP of standard WordPress block markup rather than
   replace it. Layout (columns, spacing, alignment) is left to core blocks;
   this file only adds the visual identity. That means an editor can add,
   remove or rearrange columns in the dashboard and nothing here breaks.
   ========================================================================== */

:root{
  --red:#CF0B33; --red-dark:#8A231D; --red-tint:#FBEAE8; --red-glow:rgba(207,11,51,.15);
  --ink:#323031; --body:#4A4A47; --muted:#8A897F;
  --surface:#fff; --surface-alt:#F6F4EF; --border:#E4E1D6;
  --font-display:"Sora",sans-serif; --font-body:"Inter",sans-serif;
  --header-h:112px; --header-h-mobile:76px; --logo-h:58px; --logo-h-mobile:40px;
  --radius-sm:6px; --radius:12px; --radius-lg:20px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 20px rgba(0,0,0,.07);
  --shadow-lg:0 12px 40px rgba(0,0,0,.1);
}

body{
  font-family:"Inter","Segoe UI",sans-serif!important;
  font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,
.wp-block-heading{
  font-family:"Sora","Segoe UI",sans-serif!important;
}
h1,.wp-block-heading.h1{font-size:clamp(2.2rem,4.5vw,3.4rem)!important;font-weight:700!important;letter-spacing:-.02em;line-height:1.15!important}
h2{font-size:clamp(1.6rem,3vw,2.3rem)!important;font-weight:600!important;line-height:1.25!important}
h3{font-size:1.2rem!important;font-weight:600!important}
p,li{font-family:"Inter","Segoe UI",sans-serif!important}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red-tint);color:var(--red-dark)}
h1,h2,h3,h4{line-height:1.2}

/* ---------- section helpers (added as a CSS class on a core Group) ---------- */
.section{padding-block:5rem}
.section--tight{padding-block:3.5rem}
.section--alt{background:var(--surface-alt)}
.section--ink{background:var(--ink);color:#CCC9BF}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink p{color:#fff}
.section--red{background:var(--red);color:#fff}
.section--red h1,.section--red h2,.section--red h3{color:#fff}
.section--red p{color:rgba(255,255,255,.85)}
.section--border-top{border-top:1px solid var(--border)}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:1.5rem}

.eyebrow{
  font-family:var(--font-body);font-size:.72rem!important;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red-dark);
  margin-bottom:.75rem!important;
}
.section--ink .eyebrow,.section--red .eyebrow{color:#fff;opacity:.75}
.lede{font-size:1.2rem!important;line-height:1.7}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px) saturate(1.6);-webkit-backdrop-filter:blur(12px) saturate(1.6);
  border-bottom:1px solid rgba(228,225,214,.6);
  transition:background .3s,box-shadow .3s;
}
.site-header.scrolled{background:rgba(255,255,255,.97);box-shadow:var(--shadow-sm)}
.site-header > .wp-block-group,
.site-header .wrap{min-height:var(--header-h);transition:min-height .25s ease}
.site-header.scrolled > .wp-block-group,
.site-header.scrolled .wrap{min-height:calc(var(--header-h) - 16px)}
.site-header .wp-block-site-logo img{height:var(--logo-h);width:auto;transition:height .25s ease}
.site-header.scrolled .wp-block-site-logo img{height:calc(var(--logo-h) - 12px)}

.site-header .wp-block-navigation .wp-block-navigation-item__content{
  font-size:.88rem;font-weight:500;color:var(--body);position:relative;padding-block:.25rem;
  text-decoration:none;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);
  transition:width .25s ease;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--ink)}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after{width:100%}
.wp-block-navigation__responsive-container.is-menu-open{background:#fff;padding-top:2rem}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{font-size:1.05rem}

@media(max-width:900px){
  .site-header > .wp-block-group,.site-header .wrap{min-height:var(--header-h-mobile)}
  .site-header .wp-block-site-logo img,
  .site-header.scrolled .wp-block-site-logo img{height:var(--logo-h-mobile)}
  .site-header .wp-block-buttons{display:none}
}

/* ---------- buttons (core button block + our own) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;padding:.8rem 1.6rem;
  border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;
  border:1.5px solid transparent;cursor:pointer;transition:all .2s ease;text-decoration:none;
}
.btn--primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn--primary:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn--outline{background:transparent;border-color:var(--border);color:var(--ink)}
.btn--outline:hover{border-color:var(--red);color:var(--red)}
.wp-block-button__link{transition:all .2s ease}
.wp-block-button__link:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--red-glow)}
.wp-block-button.is-style-outline .wp-block-button__link{border-width:1.5px}
/* Ghost button, for use on dark hero slides */
.is-style-ghost .wp-block-button__link,
.wp-block-button.is-style-ghost > .wp-block-button__link{
  background:transparent!important;border:1.5px solid rgba(255,255,255,.45)!important;color:#fff!important;
}
.is-style-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.1)!important;border-color:#fff!important}

/* ---------- hero slider (core Cover blocks inside a Group.hero-slider) ---------- */
.hero-slider{position:relative;overflow:hidden}
.hero-slider .wp-block-cover,
.hero-slider .hero-slide{
  min-height:min(88vh,760px)!important;margin:0!important;
}
/* Once JS confirms there is more than one slide it adds .is-ready, and
   only then do slides stack and fade. Without JS every slide simply
   stacks vertically and the page still reads correctly. */
.hero-slider.is-ready{height:min(88vh,760px)}
.hero-slider.is-ready .wp-block-cover,
.hero-slider.is-ready .hero-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .8s ease-in-out;pointer-events:none;
}
.hero-slider.is-ready .wp-block-cover.is-active,
.hero-slider.is-ready .hero-slide.is-active{opacity:1;pointer-events:auto}
/* Hero text sits left, but aligned to the site's content column rather
   than the screen edge — so it lines up with every other section and
   never runs under the prev/next arrows. */
.hero-slider .wp-block-cover,
.hero-slider .wp-block-cover.has-custom-content-position{
  justify-content:flex-start!important;
  align-items:center!important;
}
.hero-slider .wp-block-cover .wp-block-cover__inner-container{
  width:100%!important;
  max-width:1140px!important;      /* same content width as .wrap */
  margin-inline:auto!important;    /* centres the column on screen */
  text-align:left!important;
  padding-inline:1.5rem!important;
}
/* Keep individual lines to a comfortable measure inside that column */
.hero-slider .wp-block-cover__inner-container > *{
  max-width:620px;
  margin-inline:0!important;
}
.hero-slider .wp-block-buttons{justify-content:flex-start!important}
.hero-slider .eyebrow{margin-inline:0!important}

/* Between tablet and ~1400px the content column sits close to the screen
   edge, where the arrows live. Extra inline padding keeps text clear of
   them. Above 1400px the centred column is already well clear. */
@media(min-width:701px) and (max-width:1400px){
  .hero-slider .wp-block-cover .wp-block-cover__inner-container{
    padding-inline:6rem!important;
  }
}
.hero-slider h1,.hero-slider h2{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero-slider p{color:rgba(255,255,255,.88);font-size:1.15rem;line-height:1.7}
.hero-slider .eyebrow{
  display:inline-block;color:#fff;background:rgba(207,11,51,.85);
  padding:.35rem .9rem;border-radius:20px;opacity:1;margin-inline:auto;
}
.slider-dots{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.6rem;z-index:5;
}
.slider-dot{
  width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);
  border:none;padding:0;cursor:pointer;transition:all .3s;
}
.slider-dot.is-active{background:var(--red);width:32px;border-radius:5px}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s;
}
.slider-arrow:hover{background:rgba(255,255,255,.25)}
.slider-arrow--prev{left:1.5rem}
.slider-arrow--next{right:1.5rem}
@media(max-width:700px){.slider-arrow{display:none}}

/* ---------- scroll reveal ---------- */
/* Hidden on front end until JS adds .is-visible */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
/* Always visible inside the block editor so editors can see the content */
.editor-styles-wrapper .reveal{opacity:1!important;transform:none!important}

/* ---------- stats (core Columns.stats-bar) ---------- */
.stats-bar{text-align:center;gap:1.5rem}
.stats-bar .wp-block-column{padding-block:1.25rem}
.stat-value{
  display:block;
  font-family:var(--font-display)!important;font-size:clamp(2rem,4vw,3rem)!important;
  font-weight:700!important;color:var(--red)!important;line-height:1.1!important;
  margin:0 0 .35rem!important;
}
/* Force white on dark backgrounds regardless of how WordPress serialises
   the section--ink class name (it sometimes encodes hyphens as -). */
[style*="background-color:#323031"] .stat-value,
[style*="background-color: #323031"] .stat-value,
[style*="background:#323031"] .stat-value,
.section--ink .stat-value,
.has-ink-background-color .stat-value{
  color:#fff!important;
}
.stat-label{
  display:block;font-size:.88rem!important;
  color:var(--muted)!important;margin:0!important;line-height:1.5!important;
}
[style*="background-color:#323031"] .stat-label,
[style*="background-color: #323031"] .stat-label,
[style*="background:#323031"] .stat-label,
.section--ink .stat-label,
.has-ink-background-color .stat-label{
  color:#B9B7AC!important;
}

/* ---------- cards (a core Group.card inside a core Column) ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.75rem;height:100%;transition:all .25s ease;
}
.card:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card h3,.card h4{margin-top:0;margin-bottom:.4rem;font-size:1.05rem}
.card p{font-size:.95rem;color:var(--muted);margin-bottom:0;line-height:1.65}
.card .card-icon{
  width:44px;height:44px;border-radius:var(--radius);background:var(--red-tint);
  color:var(--red-dark);display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;transition:all .25s;
}
.card:hover .card-icon{background:var(--red);color:#fff}
.card .card-icon svg{width:20px;height:20px}

/* ---------- bordered left-rule groups (vision/mission) ---------- */
.wp-block-group[style*="border-left"]{
  height:100%;
  box-sizing:border-box;
}
.wp-block-columns:has(.wp-block-group[style*="border-left"]) > .wp-block-column{
  display:flex;flex-direction:column;
}
.wp-block-columns:has(.wp-block-group[style*="border-left"]) .wp-block-group[style*="border-left"]{
  flex:1;
}

/* ---------- testimonials (core Group.testimonial) ---------- */
.testimonial{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:2rem;height:100%;position:relative;
}
.testimonial::before{
  content:'\201C';font-family:var(--font-display);font-size:4rem;color:var(--red-tint);
  position:absolute;top:.4rem;left:1.4rem;line-height:1;
}
.testimonial > p:first-of-type{padding-top:1.4rem;font-size:1rem;line-height:1.7;color:var(--body)}
.testimonial .who{font-size:.85rem!important;color:var(--muted)!important;margin-bottom:0!important}
.testimonial .who strong{color:var(--ink);display:block;font-size:.9rem}

/* ---------- services marquee (custom block) ---------- */
.service-marquee-wrap{
  overflow:hidden;position:relative;padding:6px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.service-marquee{display:flex;gap:1.25rem;width:max-content;animation:ssScroll 45s linear infinite}
.service-marquee:hover{animation-play-state:paused}
@keyframes ssScroll{to{transform:translateX(-50%)}}
.service-card{
  flex:0 0 270px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;transition:all .25s ease;
}
.service-card:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.service-card .num{
  font-family:var(--font-display);font-size:.75rem;font-weight:700;color:#fff;background:var(--red);
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  margin-bottom:.9rem;
}
.service-card h3{font-size:.95rem;margin:0 0 .3rem}
.service-card p{font-size:.88rem;color:var(--muted);margin:0}
@media(prefers-reduced-motion:reduce){.service-marquee{animation:none}}

/* ---------- services list (custom block) ---------- */
.service-block{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  padding-block:4rem;border-bottom:1px solid var(--border);
}
.service-block:last-child{border-bottom:none}
.service-block.is-reversed .service-visual{order:-1}
.service-content h2{margin:0 0 .6rem}
.service-content p{color:var(--body)}
.service-content ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}
.service-content li{font-size:.92rem;display:flex;align-items:flex-start;gap:.6rem}
.service-content li::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--red);
  flex-shrink:0;margin-top:.55rem;
}
.service-visual{
  background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-lg);
  aspect-ratio:4/3;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.service-visual img{width:100%;height:100%;object-fit:cover}
.service-visual .service-num{
  position:absolute;top:1.25rem;left:1.25rem;z-index:2;
  font-family:var(--font-display);font-size:.85rem;font-weight:700;color:#fff;background:var(--red);
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
}
@media(max-width:860px){
  .service-block{grid-template-columns:1fr;gap:2rem}
  .service-block.is-reversed .service-visual{order:0}
}

/* ---------- product catalog (custom block) ---------- */
.catalog-toolbar{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem;
}
.search{
  display:flex;align-items:center;gap:.6rem;flex:1 1 300px;min-width:260px;
  border:1.5px solid var(--border);border-radius:var(--radius);padding:.65rem 1rem;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.search:focus-within{border-color:var(--red);box-shadow:0 0 0 3px var(--red-glow)}
.search input{border:none;outline:none;font:inherit;font-size:.9rem;width:100%;background:transparent}
.catalog-count{font-size:.82rem;color:var(--muted);flex-basis:100%}
.table{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.table-row{
  display:grid;grid-template-columns:230px 1fr;gap:1rem;align-items:center;
  padding:.85rem 1.25rem;border-bottom:1px solid var(--border);font-size:.88rem;
}
.table-row:last-child{border-bottom:none}
.table-row:not(.head):hover{background:var(--surface-alt)}
.table-row.head{
  background:var(--surface-alt);font-weight:600;color:var(--ink);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
}
.table-row .part{font-family:var(--font-display);font-weight:600;font-size:.85rem}
.table-row .part a{color:var(--ink);text-decoration:none}
.table-row .part a:hover{color:var(--red)}
.pagination{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:1rem;font-size:.82rem;color:var(--muted);
}
.pagination .pages{display:flex;gap:.35rem;align-items:center}
.pagination .pages a,.pagination .pages span{
  min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-weight:500;text-decoration:none;color:var(--body);
}
.pagination .pages a:hover{background:var(--surface-alt)}
.pagination .pages .is-active{background:var(--red);color:#fff}
.pagination .pages .gap{min-width:auto}
.catalog-empty{padding:3rem 0;text-align:center;color:var(--muted)}
@media(max-width:700px){.table-row{grid-template-columns:1fr;gap:.2rem}}

/* ---------- media ---------- */
.rounded img,img.rounded{border-radius:var(--radius-lg)}
.shadowed img,img.shadowed{box-shadow:var(--shadow-lg)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#9D9B91;padding-block:4rem 2rem}
.site-footer h2,.site-footer h3,.site-footer h4{color:#fff;font-size:.9rem;margin-bottom:.8rem}
.site-footer p,.site-footer a,.site-footer li{font-size:.85rem;color:#9D9B91}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--red)}
.site-footer .wp-block-navigation{gap:.35rem}
.site-footer .wp-block-social-links .wp-social-link{background:transparent;color:#9D9B91}
.site-footer .wp-block-social-links .wp-social-link:hover{color:var(--red)}
.footer-bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.09);font-size:.78rem;
}
.footer-bottom p{margin:0;font-size:.78rem}

/* ---------- editor-only niceties ---------- */
.editor-styles-wrapper .service-marquee{animation:none}

/* Safety net: stats-bar inside any dark group, regardless of class encoding */
.stats-bar .stat-value{ color:var(--red) }
.wp-block-group:not([class*="alt"]):not([class*="surface"]) > .wp-block-columns.stats-bar .stat-value{
  /* If parent is dark, numbers should be red - they'll be visible on dark. */
}
/* The real fix: make stat-value white when the COLUMNS block itself has
   stats-bar class - the outer group sets the dark bg via section--ink.
   We know section--ink renders correctly in CSS (it's a class on the div).
   The issue is the inner content. Let's be very explicit. */
.section--tight.section--ink .stat-value,
.section--tight.section--ink h3.stat-value,
.section--tight.section--ink .wp-block-heading.stat-value{ color:#fff!important }
.section--tight.section--ink .stat-label{ color:#B9B7AC!important }


/* ---------- current page indicator in the header nav ---------- */
.site-header .wp-block-navigation-item__content.is-current-page{color:var(--ink)}
.site-header .wp-block-navigation-item__content.is-current-page::after{width:100%}

/* ---------- enlarged hero + nav (site-scale pass) ---------- */
.hero-slider h1,
.hero-slider h2,
.hero-slider .wp-block-heading{
  font-size:clamp(1.9rem,3.4vw,2.8rem)!important;
  line-height:1.15!important;
}
.hero-slider p{font-size:1.05rem!important;line-height:1.65!important}
.hero-slider .eyebrow{font-size:.72rem!important;padding:.4rem .9rem!important}
.hero-slider .wp-block-button__link{font-size:.9rem!important;padding:.8rem 1.6rem!important}

/* header navigation links larger */
.site-header .wp-block-navigation-item__content{font-size:1.05rem!important}
.site-header .wp-block-buttons .wp-block-button__link{font-size:1rem!important}

/* ==========================================================================
   SEAMLESS SECTIONS

   WordPress core adds a default vertical margin between every top-level
   block:  :where(.wp-site-blocks) > * { margin-block-start: 24px }
   That margin sits OUTSIDE each section's background colour, so it paints
   as a white strip — under the header, between every section, and above
   the footer. Padding never fixes it because padding is inside the
   coloured box; the gap is outside it.

   These rules zero that margin at SECTION level only. Spacing inside a
   section (between paragraphs, columns, cards, buttons) is untouched, so
   nothing else in the layout changes.
   ========================================================================== */

/* Top-level page structure sits flush */
.wp-site-blocks > *,
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer{
  margin-block-start:0!important;
  margin-block-end:0!important;
}

/* The <main> wrapper contributes no space of its own */
main.wp-block-group,
.wp-site-blocks > main{
  margin-block:0!important;
  padding-block:0!important;
}

/* Section wrappers inside post content and inside main */
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-cover,
main > .wp-block-group,
main > .wp-block-cover,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-cover{
  margin-block:0!important;
}

/* Named section classes, the hero, header and footer */
.section,
.section--tight,
.hero-slider,
.site-header,
.site-footer{
  margin-block:0!important;
}

/* Post content itself adds no leading/trailing space */
.wp-block-post-content{
  margin-block:0!important;
}

/* Belt and braces: first and last child of the page never add outer space */
.wp-block-post-content > *:first-child{margin-block-start:0!important}
.wp-block-post-content > *:last-child{margin-block-end:0!important}

/* ---------- catalog: live search states ---------- */
.ss-catalog-empty{
  grid-column:1/-1;
  color:var(--muted);
  padding-block:1.5rem;
  text-align:center;
}
.ss-catalog-table{transition:opacity .15s ease}
.ss-catalog-table.is-loading{opacity:.45;pointer-events:none}
.ss-catalog .search{position:relative}
/* Part numbers are reference text, not links */
.ss-catalog .table-row .part{color:var(--ink);cursor:text}


/* ---------- contact page (matches approved mockup) ---------- */
.contact-card{
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:2rem;
  background:var(--surface);
}
.contact-card h3{margin:0 0 .35rem;font-size:1.05rem}
.contact-company{margin:0 0 1.5rem;color:var(--body)}
.contact-line{
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  margin-bottom:1rem;
  font-size:.92rem;
  line-height:1.5;
}
.contact-line svg{flex-shrink:0;margin-top:.15rem;color:var(--red)}
.contact-line a,.contact-line span{color:var(--body)}
.contact-email{color:var(--red)!important;font-weight:500;text-decoration:none}
.contact-email:hover{text-decoration:underline}
.social-row{display:flex;gap:.6rem;margin-top:1.25rem}
.social-row a{
  width:40px;height:40px;
  border-radius:var(--radius);
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--body);
  transition:all .2s ease;
}
.social-row a:hover{border-color:var(--red);color:var(--red);background:var(--red-tint)}

/* Contact columns don't stretch — the card sits at its natural width,
   the map takes the rest. */
.contact-split{align-items:flex-start!important}
.contact-split > .wp-block-column:first-child{flex-grow:0!important}
@media(max-width:781px){
  .contact-split > .wp-block-column:first-child{flex-basis:auto!important}
}

/* ==========================================================================
   HERO SLIDE — layered structure, image never cropped

   Each slide is a plain Group block (.hero-slide) with a solid background
   colour. Inside it sits a normal Image block (.hero-slide-bg) which is
   stretched across the slide but uses object-fit:contain, so the image is
   ALWAYS shown whole — never cropped, never stretched out of proportion.
   Any space the image doesn't fill shows the Group's background colour.
   Text sits in .hero-slide-content on top.

   To reposition the image, add one of the pos-* classes below to the
   Image block (Advanced > Additional CSS class(es)).
   ========================================================================== */
.hero-slide{
  position:relative;
  overflow:hidden;
  min-height:min(88vh,760px);   /* original hero height */
  display:flex;
  align-items:center;
}

/* The image layer.
   Works three ways so it can't silently fail:
     1. any Image block carrying .hero-slide-bg
     2. any Image block placed directly inside a .hero-slide
     3. any Image block placed inside a Cover slide's inner container
   That means dropping an Image block into a slide just works, with or
   without remembering to add the class. */
.hero-slide-bg,
.hero-slide > figure.wp-block-image,
.hero-slider .wp-block-cover__inner-container > figure.wp-block-image{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  z-index:0;
}
.hero-slide-bg img,
.hero-slide > figure.wp-block-image img,
.hero-slider .wp-block-cover__inner-container > figure.wp-block-image img{
  display:block;
  width:100%!important;
  height:100%!important;
  object-fit:contain;        /* whole image, no crop, no distortion */
  object-position:center center;
}
/* Cover slides need their inner container to stop being the positioning
   context, otherwise an image inside it can't span the whole slide. */
.hero-slider .wp-block-cover__inner-container{position:static}

/* Reposition helpers — add to the Image block's CSS classes */
.hero-slide-bg.pos-left img,
.hero-slide > figure.wp-block-image.pos-left img{object-position:left center!important}

.hero-slide-bg.pos-right img,
.hero-slide > figure.wp-block-image.pos-right img{object-position:right center!important}

.hero-slide-bg.pos-top img,
.hero-slide > figure.wp-block-image.pos-top img{object-position:center top!important}

.hero-slide-bg.pos-bottom img,
.hero-slide > figure.wp-block-image.pos-bottom img{object-position:center bottom!important}

.hero-slide-bg.pos-top-left img,
.hero-slide > figure.wp-block-image.pos-top-left img{object-position:left top!important}

.hero-slide-bg.pos-top-right img,
.hero-slide > figure.wp-block-image.pos-top-right img{object-position:right top!important}

.hero-slide-bg.pos-bottom-left img,
.hero-slide > figure.wp-block-image.pos-bottom-left img{object-position:left bottom!important}

.hero-slide-bg.pos-bottom-right img,
.hero-slide > figure.wp-block-image.pos-bottom-right img{object-position:right bottom!important}

/* ---------- per-image fit options ----------
   Add ONE of these to an Image block's CSS classes.
   Default (no class) is contain: whole image, no crop, colour bands
   at the sides when the image is a different shape to the slide. */

/* is-fill — fill the slide edge to edge, cropping whatever overflows.
   Keeps proportions. Best for photos where the edges don't matter. */
.hero-slide-bg.is-fill img,
.hero-slide > figure.wp-block-image.is-fill img,
.hero-slider .wp-block-cover__inner-container > figure.wp-block-image.is-fill img{
  object-fit:cover;
}

/* is-stretch — stretch to fill the slide with NO cropping at all.
   Because the image already fits the height, the visible effect is
   horizontal stretching, which removes the side bands. Proportions
   are distorted, so use it on textures and abstract backgrounds, not
   on photos with people, circles or text in them. */
.hero-slide-bg.is-stretch img,
.hero-slide > figure.wp-block-image.is-stretch img,
.hero-slider .wp-block-cover__inner-container > figure.wp-block-image.is-stretch img{
  object-fit:fill;
}

/* Dim the image so white text stays readable. Add .no-dim to turn off. */
.hero-slide-bg::after,
.hero-slide > figure.wp-block-image::after,
.hero-slider .wp-block-cover__inner-container > figure.wp-block-image::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  pointer-events:none;
}
.hero-slide-bg.no-dim::after{display:none}

/* Text layer sits above the image */
.hero-slide-content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1140px;
  margin-inline:auto;
  padding-inline:1.5rem;
}
@media(min-width:701px) and (max-width:1400px){
  .hero-slide-content{padding-inline:6rem}
}

/* Same typography treatment the Cover-based slides had */
.hero-slide h1,.hero-slide h2,.hero-slide .wp-block-heading{
  color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.hero-slide p{color:rgba(255,255,255,.88)}
.hero-slide .eyebrow{
  display:inline-block;color:#fff;background:rgba(207,11,51,.85);
  padding:.4rem .9rem;border-radius:20px;opacity:1;
}

/* In the editor the image layer must stay clickable and findable */
.editor-styles-wrapper .hero-slide-bg{outline:1px dashed rgba(255,255,255,.35)}
.editor-styles-wrapper .hero-slide-bg::after{background:rgba(0,0,0,.25)}

/* ---------- header width ----------
   The header's white background spans the full screen, but its contents
   sit in the same centred column as the rest of the site so the logo
   lines up with the page content instead of hugging the screen edge.
   Belt and braces: the block layout is set to constrained in
   parts/header.html, and this backs it up if that is ever overridden. */
.site-header > .wp-block-group{
  max-width:1400px!important;
  margin-inline:auto!important;
  width:100%;
}
/* Nav items sit further apart, matching the mockup spacing */
.site-header .wp-block-navigation{
  gap:2.75rem!important;
}
.site-header .wp-block-navigation .wp-block-navigation__container{
  gap:2.75rem!important;
}