/* FLW360 — editorial layer.
   Loaded last on every page. Gives the site one consistent, studio-made voice:
   numbered left-aligned section heads, the 360° ring from the logo as the
   recurring motif, square geometry, restrained motion. */

:root{--ring:rgba(85,251,155,.55);--rule:rgba(69,90,100,.18)}
body{counter-reset:sec;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--green);color:var(--slate-xdk)}

/* ── Hero: the 360° ring replaces dot grids and glows ───────────────────── */
.hero::before{
  background:none!important;
  inset:auto;top:50%;right:-14vw;left:auto;width:min(78vw,860px);aspect-ratio:1;height:auto;
  transform:translateY(-50%);border-radius:50%;
  border:1px solid var(--ring);
}
.hero::after{
  background:none!important;
  top:50%;right:-14vw;width:min(78vw,860px);height:auto;aspect-ratio:1;
  transform:translateY(-50%) rotate(-38deg);border-radius:50%;
  border:3px solid transparent;border-top-color:var(--green);
}
.hero-label{
  border:none!important;background:none!important;padding:0!important;border-radius:0!important;
  color:var(--slate)!important;font-size:.72rem;letter-spacing:.18em;gap:14px;
}
.hero-label::before{content:'';width:36px;height:1px;background:var(--slate)}
.hero h1{letter-spacing:.01em}
.hero h1 .accent{background:none!important;padding:0!important;color:var(--slate)!important;
  text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:.09em;text-underline-offset:.12em}

/* ── Section heads: numbered, left-aligned, two-column ──────────────────── */
.sec-header{
  text-align:left!important;max-width:none!important;margin:0 0 3.5rem!important;
  display:grid;grid-template-columns:minmax(160px,1fr) 3fr;column-gap:3rem;align-items:start;
  padding-top:1.4rem;border-top:1px solid var(--rule);
}
.sec-header .label{grid-column:1;grid-row:1 / span 3;margin:0!important;color:var(--slate)!important;
  font-size:.7rem;letter-spacing:.16em;line-height:1.6}
.sec-header .label::before{
  counter-increment:sec;content:counter(sec,decimal-leading-zero);
  display:block;font-family:var(--font-display);font-weight:300;font-size:2.6rem;letter-spacing:0;
  line-height:1;color:var(--slate);margin-bottom:.5rem;
}
.sec-header h2,.sec-header p{grid-column:2}
.sec-header h2{margin-bottom:.9rem!important}
.sec-header p{max-width:62ch}
.sec-header[style],.sec-header > *[style]{text-align:left!important}
@media(max-width:760px){
  .sec-header{grid-template-columns:1fr}
  .sec-header .label{grid-row:auto;margin-bottom:1rem!important}
  .sec-header h2,.sec-header p{grid-column:1}
}

/* Plain labels elsewhere: quiet, with a rule instead of colour */
.label{display:inline-flex;align-items:center;gap:12px}
.why-left .label::before,.about-right .label::before,.freebie .label::before,.list-light .label::before,
.book-sec .label::before,.pubs-cta .label::before,.notify .label::before,.about-cta .label::before{
  content:'';width:28px;height:1px;background:currentColor;opacity:.7}

/* ── Geometry: square corners, hairlines, no floating cards ─────────────── */
.price-card,.exp-card,.pub,.art,.feature,.w-card,.ifc-card,.theme,.fb-score,.fb-quotes blockquote,
.contact-card,.form-card,.nl-card,.nl-feat,.ifc-fb,.h-stat,.btn-green,.btn-ghost,.price-cta,.btn-submit,.nav-cta{border-radius:0!important}
a.art:hover,a.feature:hover,.w-card:hover,a.pub:hover{transform:none!important;box-shadow:none!important}
a.art:hover .art-img img,a.feature:hover .art-img img,.w-card:hover .w-img img{transform:scale(1.02)!important}
.btn-green:hover,.price-cta:hover,.btn-submit:hover{transform:none!important}
.btn-green,.price-cta,.btn-submit{position:relative;transition:background .2s,color .2s}
.btn-green:hover,.price-cta:hover{background:var(--slate-xdk);color:var(--green);opacity:1}

/* Cards: a single top hairline accent instead of thick coloured borders */
.ifc-card,.theme{border-top:1px solid var(--rule)!important;box-shadow:inset 0 2px 0 var(--green)}
.fb-quotes blockquote{border-left:none!important;border-top:1px solid var(--rule)!important;background:none!important;
  padding:1.4rem 0 0!important;font-size:1.35rem}
.fb-quotes blockquote::before{content:'“';display:block;font-family:var(--font-display);font-size:3rem;line-height:.6;color:var(--green);margin-bottom:.4rem}
.fb-score{background:none!important;border-left:none!important;border-right:none!important}

/* Expertise / IFC numbers in the display face instead of emoji */
.exp-card .ico{font-family:var(--font-display);font-weight:300;font-size:1.1rem!important;letter-spacing:.08em;color:var(--slate)}

/* Publication tags: flat, squared */
.art-img .tag,.book-cover .bc-tag,.featured-badge{border-radius:0!important}

/* ── Links: one consistent underline style ──────────────────────────────── */
a.ln{text-decoration-thickness:1px!important}

/* ── Footer: big wordmark ───────────────────────────────────────────────── */
.f-brand .n{font-size:3.2rem!important;letter-spacing:.02em!important}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){.reveal,.reveal.hidden{transition:none!important;opacity:1!important;transform:none!important}}

/* One button detail instead of arrow glyphs: a short drawn line */
.btn-green::after,.price-cta::after,.btn-submit::after,.nl-form button::after,.notify button::after{
  content:'';display:inline-block;width:18px;height:1px;background:currentColor;margin-left:12px;vertical-align:middle;transition:width .25s}
.btn-green:hover::after,.price-cta:hover::after,.btn-submit:hover::after,.nl-form button:hover::after,.notify button:hover::after{width:30px}
.go{display:inline-flex;align-items:center;gap:10px}
.go::after{content:'';width:16px;height:1px;background:currentColor;transition:width .25s}
a:hover .go::after{width:28px}

/* List markers: small squares in brand green, not arrows */
.svc-list li::before{content:''!important;width:6px;height:6px;background:var(--green);margin-top:.5rem!important}
.ifc-card li::before{content:''!important;width:6px;height:6px;background:var(--green);top:.6rem!important}

/* Ring sits clear of the text column; small screens get a compact corner arc */
.hero::before,.hero::after{right:-30vw;width:min(70vw,820px);opacity:.9}
@media(min-width:1100px){.hero::before,.hero::after{right:-12vw;width:min(56vw,820px)}}
@media(max-width:900px){
  .hero::before,.hero::after{top:64px;right:-55vw;width:90vw;transform:translateY(-35%)}
  .hero::after{transform:translateY(-35%) rotate(-38deg)}
}
.hero-inner{position:relative;z-index:1}

/* Quotes: text already carries quotation marks; keep only the hairline */
.fb-quotes blockquote::before{content:none!important}
.fb-quotes blockquote{border:none!important;border-top:1px solid var(--rule)!important}

/* Stats sit on top of the ring as solid tiles */
.hero-stats{position:relative;z-index:2}
.h-stat{background:var(--offwhite)}
@media(min-width:901px){.hero-stats{gap:0}.h-stat{border-left:1px solid var(--rule)!important;box-shadow:inset 2px 0 0 var(--green)}}
@media(max-width:900px){.hero::before,.hero::after{right:-78vw;width:100vw}}

/* ── Photography ─────────────────────────────────────────────────────────── */
figure{margin:0}
figcaption{font-size:.74rem;color:var(--muted);line-height:1.5;margin-top:.7rem;padding-left:.8rem;border-left:1px solid var(--green)}
figcaption span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-top:.2rem}

/* Home: Why section, text + photo */
.why-grid{display:grid!important;grid-template-columns:1fr 1.05fr;gap:4rem;max-width:none!important;align-items:center}
.why-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;gap:2.5rem}.why-photo img{aspect-ratio:3/2}}

/* About: field notes — an asymmetric, magazine-style grid */
.fieldnotes{background:var(--white)}
.fn-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:auto auto;gap:1.6rem}
.fn-grid img{width:100%;height:100%;object-fit:cover;display:block}
.fn-a{grid-row:1 / span 2}
.fn-a img{aspect-ratio:auto;height:calc(100% - 3.2rem)}
.fn-b img,.fn-c img,.fn-d img{aspect-ratio:3/2}
.fn-d{grid-column:2 / span 2}
.fn-d img{aspect-ratio:21/9}
.fn-credit{font-size:.74rem;color:var(--muted);margin-top:2rem}
@media(max-width:900px){.fn-grid{grid-template-columns:1fr 1fr}.fn-a{grid-row:auto;grid-column:1 / span 2}.fn-a img{height:auto;aspect-ratio:4/3}.fn-d{grid-column:1 / span 2}}
@media(max-width:600px){.fn-grid{grid-template-columns:1fr}.fn-a,.fn-d{grid-column:1}.fn-d img{aspect-ratio:3/2}}

/* Wide photo inside narrow text sections */
.photo-wide{margin:2rem 0 2.4rem}
.photo-wide img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

/* Fixes: natural image heights in the field-notes grid; readable labels on light */
.fn-grid{align-items:start}
.fn-b img,.fn-c img,.fn-d img{height:auto!important}
.fn-a{align-self:stretch;display:flex;flex-direction:column}
.fn-a img{flex:1;min-height:0;height:auto!important}
.why-left .label,.about-right .label,.list-light .label,.book-sec .label,.fieldnotes .label{color:var(--slate)!important}

/* ── Long-form pages (ISO 20001, FSSC 22000, sectors) ───────────────────── */
.lf-hero{min-height:auto;padding-top:64px}
.lf-hero .hero-inner{grid-template-columns:1.25fr .75fr;padding-top:5rem;padding-bottom:4.5rem}
.lf-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem)}
.lf-hero .hero-sub{max-width:58ch}
.lf-facts{list-style:none;border-top:1px solid var(--rule);background:var(--offwhite);position:relative;z-index:2}
.lf-facts li{padding:1rem 0;border-bottom:1px solid var(--rule);font-size:.86rem;color:var(--text);display:grid;grid-template-columns:110px 1fr;gap:1rem}
.lf-facts li b{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:500;padding-top:.2rem}
.lf-sec{background:var(--white);padding:5.5rem 0}
.lf-sec.alt{background:var(--offwhite)}
.lf-body{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;column-gap:3rem}
.lf-body > *{grid-column:2}
.lf-body h3{font-size:1.7rem;color:var(--slate-xdk);margin:2.2rem 0 .7rem}
.lf-body p,.lf-body li{font-size:.98rem;line-height:1.85;color:var(--text);max-width:66ch}
.lf-body p+p{margin-top:1rem}
.lf-body ul,.lf-body ol{margin:1rem 0 0 1.1rem}
.lf-body li{margin-bottom:.5rem}
.lf-body li::marker{color:var(--slate)}
.lf-body strong{color:var(--slate-xdk);font-weight:500}
.lf-steps{list-style:none!important;margin:1.5rem 0 0!important;counter-reset:step;border-top:1px solid var(--rule)}
.lf-steps li{counter-increment:step;display:grid;grid-template-columns:70px 1fr;gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--rule);margin:0!important;max-width:none!important}
.lf-steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-display);font-weight:300;font-size:2rem;line-height:1;color:var(--slate)}
.lf-note{margin-top:2rem;padding:1.2rem 1.4rem;border-left:2px solid var(--green);background:var(--offwhite);font-size:.86rem!important}
.lf-sec.alt .lf-note{background:var(--white)}
.lf-photo{grid-column:1 / -1!important;margin:3rem 0 0}
.lf-photo img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
.lf-cta{background:var(--slate-xdk);padding:5rem 0;text-align:left}
.lf-cta .container{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:end}
.lf-cta h2{color:var(--white);font-size:clamp(2rem,4vw,3.2rem)}
.lf-cta p{color:rgba(255,255,255,.8);line-height:1.8;margin:1rem 0 0}
.lf-cta .btn-row{justify-content:flex-end}
.lf-related{display:flex;gap:2rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.8rem}
.lf-related a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
/* Sector blocks */
.sector{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start;padding:3.5rem 0;border-top:1px solid var(--rule)}
.sector:nth-child(even) figure{order:2}
.sector img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.sector .num{font-family:var(--font-display);font-weight:300;font-size:2.4rem;color:var(--slate);line-height:1}
.sector h2{color:var(--slate);font-size:clamp(1.9rem,3.4vw,2.7rem);margin:.4rem 0 1rem}
.sector p,.sector li{font-size:.95rem;line-height:1.8;color:var(--text)}
.sector h3{font-size:1.15rem;color:var(--slate-xdk);margin:1.4rem 0 .5rem;letter-spacing:.02em}
.sector ul{margin-left:1.1rem}
.sector li{margin-bottom:.35rem}
.sector .no-photo{aspect-ratio:4/3;background:var(--slate);position:relative;overflow:hidden}
.sector .no-photo::after{content:'';position:absolute;top:-20%;right:-25%;width:90%;aspect-ratio:1;border-radius:50%;border:1px solid var(--ring)}
@media(max-width:900px){
  .lf-hero .hero-inner,.lf-cta .container,.sector{grid-template-columns:1fr}
  .lf-body{grid-template-columns:1fr}.lf-body > *{grid-column:1}
  .sector:nth-child(even) figure{order:0}.lf-cta .btn-row{justify-content:flex-start}
}

/* Let aspect-ratio win over the width/height attributes on photos */
.sector img,.lf-photo img,.photo-wide img,.why-photo img,.fn-grid img{height:auto}

/* Buttons keep their line detail on the same row, even when the label wraps */
.btn-green,.price-cta{display:inline-flex!important;align-items:center;justify-content:center;text-align:center}
.btn-green::after,.price-cta::after,.go::after{flex-shrink:0}

/* ── No dash-like lines next to buttons, links and labels ───────────────── */
.btn-green::after,.price-cta::after,.btn-submit::after,.nl-form button::after,.notify button::after,.go::after{content:none!important;display:none!important}
.hero-label::before,.label::before{content:none!important;display:none!important}
.sec-header .label::before{content:counter(sec,decimal-leading-zero)!important;display:block!important}

/* ── Tighter spacing: no large empty areas ──────────────────────────────── */
section{padding:4.5rem 0}
.hero{min-height:auto!important}
.hero-inner{padding-top:3.5rem!important;padding-bottom:3.5rem!important}
.lf-hero .hero-inner,.about-hero .hero-inner,.pubs-hero .hero-inner,.book-hero .hero-inner{padding-top:3.5rem!important;padding-bottom:3rem!important}
.scroll-cue{display:none!important}
.sec-header{margin-bottom:2.5rem!important}
.lf-sec,.pubs-sec,.book-sec{padding:4rem 0!important}
.lf-cta,.pubs-cta,.notify,.about-cta{padding:3.5rem 0!important}
.sector{padding:2.5rem 0!important}
footer{padding:3.5rem 0 2rem!important}
.footer-bottom{margin-top:2.5rem!important}
.hungry-strip{padding:2rem 0!important}
.pricing-footnote,.value-strip{margin-top:2rem!important}
@media(max-width:600px){section{padding:3.2rem 0}.hero-inner{padding-top:2.5rem!important;padding-bottom:2.5rem!important}}

/* ── Looping brand videos ───────────────────────────────────────────────── */
.loop-video{margin:0}
.loop-video video{width:100%;aspect-ratio:1/1;display:block;object-fit:cover;background:#eeeeec}
.freebie-left .loop-video{max-width:420px;margin-top:1.8rem}
.lf-hero .loop-video{position:relative;z-index:2;max-width:440px;justify-self:end;width:100%}