/* ============================================================
   PIAU KEE — ABOUT US (isolated styles)
   Loads AFTER style.css. Only touches About-US-specific classes
   and About-scoped nav overrides (body.about). The Home page is
   never affected. §0 / §19 / §38.3
   ============================================================ */

.about{
  /* cream world tokens (§32) */
  --j-bg:#edece7;
  --j-bg-top:#f5f4f0;
  --j-ink:#2b2a27;
  --j-sub:#6d6b63;
  --j-faint:#c9c6bd;
  --j-line:#d7d4cb;
  --j-accent:#2f6f66;
  /* ocean world tokens */
  --ow-1:#0a4f74;
  --ow-2:#073a5a;
  --ow-3:#04243b;
  --ow-deep:#021626;
  background:#04243b;
}

/* keep page from side-scrolling despite fixed/clip layers */
.about{overflow-x:clip}

/* =========================================================
   NAV OVERRIDES (§38) — reuse Home .nav markup + styles,
   retune the sticky states for the two "worlds".
   ========================================================= */
/* Top state over the hero is the Home default (white text, translucent divider) — unchanged. */
/* Sticky over the OCEAN: identical compact layout but NO dark background box (§38.2). */
.about .nav.is-scrolled{background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}
/* From OUR JOURNEY onward (cream world): restore Home's own sticky background so white nav stays readable. */
.about .nav.is-scrolled.on-cream{
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
}
.about .nav__menu a.is-current{color:#fff}
.about .nav__menu a.is-current::after{width:100%}

/* home-style text-reveal split units (titles→chars, paragraphs→words) */
.tr-word{display:inline-block}
.tr-char{display:inline-block;will-change:transform,opacity}
.tr-split{overflow:visible}

/* reveal primitives (About-local, GSAP-driven) */
.aur{will-change:transform,opacity}
.about:not(.motion-ready) .aur{opacity:0}
@media(prefers-reduced-motion:reduce){.about:not(.motion-ready) .aur{opacity:1}}

/* shared About type */
.au-eyebrow{display:inline-block;font-size:23px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--j-accent);margin-bottom:16px}
.au-eyebrow.light{color:var(--gold-2)}
.au-h2{font-size:clamp(2rem,6vw,3.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.2em;color:#051026}
.au-h2.light{color:#fff}
.au-lead{font-size:18px;font-weight:400;line-height:1.5em;color:rgba(255,255,255,.92)}

/* placeholders (clearly labelled, swappable — §17/§37) */
.ph-logo,.ph-img,.ph-portrait{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,rgba(255,255,255,.1) 12px 24px);
  border:1px dashed rgba(255,255,255,.4);color:rgba(255,255,255,.7);
  font-size:.78rem;letter-spacing:.06em;border-radius:14px;
}
.cream .ph-img,.cream .ph-portrait{
  background:repeating-linear-gradient(135deg,rgba(43,42,39,.05) 0 12px,rgba(43,42,39,.09) 12px 24px);
  border-color:var(--j-faint);color:var(--j-sub);
}

/* =========================================================
   OCEAN WORLD — fixed backdrop (§26)
   ========================================================= */
.ow{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--ow-3)}
.ow__videowrap{position:absolute;inset:0;overflow:hidden}
/* no scale transform on the video — it renders at native cover size for max sharpness on every
   device (a scaled layer would rasterise then upscale = extra blur). Depth comes from a crop-pan. */
.ow__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%}
/* depth glows that zoom at different rates (§26.3 layered parallax feel over the video) */
.ow__glow{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;pointer-events:none;will-change:transform,opacity}
.ow__glow--far{width:120vmax;height:120vmax;background:radial-gradient(circle,rgba(120,205,235,.16),rgba(120,205,235,0) 62%)}
.ow__glow--mid{width:70vmax;height:70vmax;background:radial-gradient(circle,rgba(150,225,240,.14),rgba(150,225,240,0) 60%)}
.ow__bubbles{position:absolute;inset:0;overflow:hidden}
.ow__bubbles i{position:absolute;bottom:-6vh;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.85),rgba(255,255,255,.12) 60%,rgba(255,255,255,0) 72%);box-shadow:0 0 6px rgba(200,240,255,.35);opacity:.5;animation:ow-rise linear infinite}
@keyframes ow-rise{0%{transform:translateY(0) translateX(0)}100%{transform:translateY(-118vh) translateX(var(--dx,0))}}
/* flat black base overlay over the video (user: 40% to start), sits above bubbles/glows, below the fish */
.ow__overlay{position:absolute;inset:0;background:#000;opacity:.4;pointer-events:none}
/* depth tint that strengthens with scroll (set by JS) — stacks on top of the 40% base */
.ow__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,22,38,0) 0%,rgba(2,20,34,.35) 55%,rgba(1,14,26,.7) 100%);opacity:var(--tint,.25)}
.ow__fishlayer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* hide the whole ocean world once we've left it (set by JS at the boom) */
.ow{transition:opacity .45s ease}

/* =========================================================
   OCEAN SECTIONS — transparent, centred, above the backdrop
   ========================================================= */
.ow-sec{position:relative;z-index:2;color:#fff;text-align:center}

/* 1. HERO */
.au-hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:140px 0 120px}
.au-hero__inner{width:min(var(--maxw),92vw)}
.au-hero__eyebrow{font-size:23px;font-weight:400;letter-spacing:.02em;text-transform:none;color:#fff;margin-bottom:20px}
.au-hero__title{font-size:clamp(2.6rem,13vw,5.625rem);font-weight:600;letter-spacing:-.03em;line-height:1.2em;color:#fff;text-shadow:0 10px 50px rgba(0,10,20,.4)}
.au-hero__cta{margin-top:40px}
.au-hero__scroll{position:absolute;bottom:34px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.au-hero__scroll span{width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));animation:au-scrolldot 2.2s ease-in-out infinite}
@keyframes au-scrolldot{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* 2. THE PIAU KEE SPIRIT */
.au-spirit{padding:18vh 0 7vh;display:flex;justify-content:center}
.au-spirit__inner{width:min(860px,92vw);text-align:center}
.au-spirit .au-lead{margin:20px 50px 20px;max-width:none;font-size:18px;font-weight:400;line-height:1.5em;color:#fff;padding-top:15px}
.au-spirit__body{margin:0;max-width:none}
.au-spirit__body p{color:#fff;font-size:18px;font-weight:400;line-height:1.5em;margin:0 50px 20px;padding-top:15px}
.au-spirit__pledge{margin:0 50px 20px;max-width:none;font-size:18px;line-height:1.5em;font-weight:400;color:#fff;padding-top:15px}

/* 3. OUR BRANDS — small bottom gap: brands content sits close to the boom; the fish's final
   descent is short (user wanted it closer, not a long empty swim) */
.au-brands{padding:calc(16vh - 40px) 0 3vh;display:flex;justify-content:center}
.au-brands__inner{width:min(1040px,92vw)}
.au-brands__grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:60px}
/* Seafood Hamper — centered below the two top brand boxes, same card width as one top box */
.brandcard--wide{grid-column:1 / -1;width:100%;max-width:calc((100% - 34px) / 2);margin-inline:auto}
.brandcard{background:rgba(6,34,56,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:46px 40px;text-align:center}
/* two brand logos side by side, transparent on the glass card */
.brandcard__logos{height:120px;margin:0 auto 30px;display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,40px)}
.brandcard__logos img{max-height:100%;max-width:44%;width:auto;object-fit:contain;border-radius:25px}
.brandcard h3{font-size:25px;font-weight:600;line-height:1.2em;color:#fff;margin-bottom:16px}
.brandcard p{color:#fff;font-size:18px;font-weight:400;line-height:1.5em;text-align:left;padding-top:15px}

/* ===== MISSION, VISION & OBJECTIVES (ocean section above Our Brands) ===== */
.au-mvo{padding:calc(4vh + 40px) 0 13vh;display:flex;justify-content:center}
.au-mvo__inner{width:min(1120px,92vw);text-align:center}
/* Objective — 3 columns, NO wrapping box; each column left-aligned: icon, divider, title, paragraph */
.au-obj{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,54px);margin-top:54px;text-align:left}
.obj-col{display:flex;flex-direction:column;align-items:flex-start}
.obj-col__icon{width:72px;height:72px;object-fit:contain;display:block}
.obj-col__rule{display:block;width:100%;height:2px;background:#d3bf5d;opacity:.9;margin:22px 0}
.obj-col__title{font-size:25px;font-weight:600;line-height:1.2em;color:#fff;margin-bottom:12px}
.obj-col__text{color:#fff;font-size:18px;font-weight:400;line-height:1.5em;margin:0}
/* Mission & Vision — 2 equal boxes side by side, below the Objective */
.au-mv{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:54px;text-align:left}
.mvo-card{background:rgba(6,34,56,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:42px 34px;display:flex;flex-direction:column}
.mvo-card__label{font-size:25px;font-weight:600;line-height:1.2em;color:#fff;margin-bottom:18px}
/* divider spans the full width of the box */
.mvo-card__rule{display:block;width:100%;height:2px;background:#d3bf5d;margin-bottom:22px;opacity:.9}
.mvo-card>p{color:#fff;font-size:18px;line-height:1.6;font-weight:400;margin:0}
@media(max-width:860px){.au-obj,.au-mv{grid-template-columns:1fr;gap:28px}}

/* =========================================================
   4. BOOM + OUR JOURNEY DIAL (§28 / §29)
   ========================================================= */
.au-journey{position:relative;z-index:3}
.au-journey__pin{position:relative;height:100svh;overflow:hidden}
/* clean 90px gap after the timeline finishes (last year), before Group Overview */
.au-journey__finish{position:relative;z-index:3;height:90px;background:#f5f5f7}
/* transparent: the boom circle expands directly over the fixed ocean video (no blue section) */
.au-journey__deep{position:absolute;inset:0;background:transparent}
.au-journey__world{position:absolute;inset:0;background:#f5f5f7;
  /* revealed by the growing circle anchored at the bottom-left corner (dropped from 90% to 100% so the arc stays rounded far longer as it grows, instead of flattening early at the box top) */
  -webkit-clip-path:circle(var(--rev,0%) at 7% 100%);clip-path:circle(var(--rev,0%) at 7% 100%)}
/* During the overlap reveal about.js makes this world position:fixed (toggles .is-fixed) and nulls
   #journeyPin's GSAP transform so fixed resolves to the VIEWPORT — the browser composites it every frame
   with zero lag, so the growing circle spills OVER Our Brands (au-journey z-3 > .ow-sec z-2) with no pin
   edge to clip it flat and no JS per-frame repositioning to jitter. Restored to absolute at the pin. */
.au-journey__world.is-fixed{position:fixed}
/* heading sits mid-left (clear of the fixed nav), level with the active year; max-width keeps it left of the dial's active year (dial rightX = 30vw on desktop) */
.au-journey__head{position:absolute;top:50%;transform:translateY(-50%);left:clamp(22px,5vw,70px);max-width:calc(30vw - clamp(22px,5vw,70px) - 64px);z-index:4}
.au-journey__head .au-eyebrow{color:var(--j-accent);letter-spacing:.14em;margin-bottom:6px;order:2}
.au-journey__head{display:flex;flex-direction:column}
.au-journey__title{font-size:clamp(2rem,6vw,3.75rem);font-weight:600;color:#051026;letter-spacing:-.02em;order:1;line-height:1.2em}

.dial{position:absolute;inset:0;z-index:3}
.dial__arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial__years{position:absolute;inset:0}
.dyear{position:absolute;left:0;top:0;transform-origin:left center;white-space:nowrap;will-change:transform,opacity}
.dyear__num{font-weight:700;letter-spacing:-.01em;color:#051026;line-height:1;transition:color .2s linear}
.dyear.is-active .dyear__num{color:#051026}
.dyear__dot{position:absolute;left:-26px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--j-faint);transform:translate(-50%,-50%)}
.dyear.is-active .dyear__dot{background:#d3bf5d}
/* description block to the RIGHT of the active year (3 o'clock) */
.dial__desc{position:absolute;left:32%;top:calc(50% + 30px);width:min(46vw,540px);z-index:5;text-align:center}
.dnote{position:absolute;left:0;top:0;width:100%;will-change:opacity}
/* small serif year label above the description (matches the reference) */
.dnote__year{display:none}
.dnote p{color:#051026;font-size:18px;font-weight:400;line-height:1.5em}
.dnote p+p{margin-top:10px}
/* real photo below each year's description — natural ratio (never cropped), shrinks to fit short viewports */
.dnote__img{width:100%;margin:20px auto 0;display:flex;justify-content:center}
/* long entries (2005 / 2006 — several paragraphs): tighter copy + smaller photo so the whole entry fits on screen */
.dnote--long p{font-size:18px;font-weight:400;line-height:1.5em}
.dnote--long p+p{margin-top:8px}
.dnote--long .dnote__img{width:100%;margin-top:16px}
/* whole photo always visible: scale proportionally inside the available height (contain), centred; the frame hugs the photo */
.dnote__img img{width:auto;max-width:100%;height:auto;max-height:var(--pk-dnote-imgmax,46vh);object-fit:contain;display:block;border-radius:14px;border:1px solid var(--j-line);background:rgba(43,42,39,.05)}

/* =========================================================
   CREAM WORLD sections (§32)
   ========================================================= */
.cream{position:relative;z-index:3;background:radial-gradient(130% 120% at 50% 0%,var(--j-bg-top),var(--j-bg) 70%);color:var(--j-ink)}
.auc{will-change:transform,opacity}
.about:not(.motion-ready) .auc{opacity:0}
@media(prefers-reduced-motion:reduce){.about:not(.motion-ready) .auc{opacity:1}}

/* 5. GROUP OVERVIEW */
.au-group{padding:90px 0;background-color:#fff;background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),url(../assets/img/Seafood-Background-041F38-2-web.webp);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:scroll,fixed}  /* 55% white overlay over the picture */
.au-group__inner{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.au-group__head{position:sticky;top:120px}
.au-group__sub{color:#051026;font-size:18px;font-weight:400;line-height:1.5em;margin-top:14px;max-width:300px;padding-top:15px}
.au-group__nav{display:flex;gap:14px;margin-top:34px}
.gnav{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1.5px solid #183962;background:transparent;color:#183962;font-size:1.4rem;line-height:1;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.gnav:hover{background:#183962;border-color:#183962;color:#fff}
.gnav:disabled{opacity:.35;cursor:default}
/* arrows now flank the carousel */
.au-group__carousel{display:flex;align-items:center;gap:16px;min-width:0}
.au-group__viewport{flex:1;min-width:0;overflow:hidden}
/* the TRACK is the scroll container (arrows call scrollBy on it; also drag/trackpad). Scrollbar hidden. */
.au-group__track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:2px}
.au-group__track::-webkit-scrollbar{display:none}
.gcard{flex:0 0 calc((100% - 52px)/2.5);scroll-snap-align:start}
.gcard__img{aspect-ratio:3/4;width:100%;border-radius:16px;margin-bottom:18px;overflow:hidden;background:rgba(43,42,39,.06)}
.gcard__img img{width:100%;height:100%;object-fit:cover;display:block}
.gcard h3{font-size:25px;font-weight:600;line-height:1.2em;margin-bottom:6px;color:#051026}
.gcard p{color:#051026;font-size:18px;font-weight:400;line-height:1.5em}

/* 6. FOUNDERS & LEADERSHIP */
.au-team{padding:90px 0;background:#f5f5f7}
.au-team__head{text-align:center;margin-bottom:60px}
.au-team__head .au-eyebrow{color:var(--j-accent)}
.au-team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
/* bio now lives INSIDE the blue card (portrait removed); panel is a flex column, name/position pinned to the bottom */
.pcard__panel{position:relative;border-radius:16px 54px 16px 16px;overflow:hidden;background:#063356 url('../assets/img/about/leadership-bg.png') center/cover no-repeat;display:flex;flex-direction:column;min-height:480px;height:100%}
.pcard__bio{position:relative;z-index:2;flex:1;padding:44px 28px 10px;margin:0;color:#fff;font-size:18px;font-weight:400;line-height:1.5em;text-align:left}
.pcard__id{position:relative;z-index:2;margin-top:auto;width:100%;padding:18px 28px 26px;background:linear-gradient(0deg,rgba(2,18,34,.82),rgba(2,18,34,0))}
.pcard__id h3{color:#fff;font-size:25px;font-weight:600;line-height:1.2em}
.pcard__id p{color:#fff;font-size:.9rem;letter-spacing:.04em}

/* 7. CONTACT / CTA */
.au-cta{padding:0}
.au-cta__pin{height:100svh;display:flex;align-items:center;justify-content:center}
.au-cta__stage{width:min(1320px,95vw)}
.au-cta__card{position:relative;overflow:hidden;background:#0b3a7e;border-radius:30px;min-height:min(62vh,460px);display:flex;align-items:center;will-change:clip-path,transform}
/* clip-path (a true circle dot that grows into the card) + transform are set per-frame by JS.
   Default = full card so no-JS / reduced-motion still shows it. */
.au-cta__content{position:relative;z-index:2;padding:clamp(40px,6vw,92px);max-width:640px;opacity:var(--contentOp,0)}
.au-cta__title{font-size:clamp(2rem,6vw,3.75rem);font-weight:600;line-height:1.2em;color:#fff;letter-spacing:-.02em;margin-bottom:20px}
/* desktop/laptop: keep "Lets Get In Touch." on one line; centre the content (soundwave removed, so no empty right gap) */
@media(min-width:900px){.au-cta__content{max-width:760px;margin-inline:auto;text-align:center}.au-cta__title{white-space:nowrap}.au-cta__copy{margin-inline:auto}}
.au-cta__copy{color:#fff;font-size:18px;font-weight:400;line-height:1.5em;margin-bottom:38px;max-width:460px;padding-top:15px;padding-bottom:15px}
.au-cta__btn{display:inline-flex;align-items:center;gap:0;background:#050c1c;color:#fff;border-radius:100px;padding:6px 6px 6px 30px;font-weight:600;font-size:1rem;transition:transform .3s var(--ease)}
.au-cta__btn span{padding-right:22px}
.au-cta__btn:hover{transform:translateY(-2px)}
.au-cta__knob{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b9bcc4 70%);transition:transform .35s var(--ease)}
.au-cta__btn:hover .au-cta__knob{transform:translateX(6px)}

/* =========================================================
   RESPONSIVE (§22 / §25 — same design, tuned per device)
   ========================================================= */
@media(max-width:1024px){
  .au-group{background-attachment:scroll}
  .au-group__inner{grid-template-columns:1fr;gap:34px}
  .au-group__head{position:static}
  .au-group__sub{max-width:none}
  .gcard{flex-basis:calc((100% - 52px)/2.5)}
  .dial__desc{left:34%;width:min(56vw,460px)}
}
/* below 1100px the dial moves left — heading goes back to the top, clear of the nav */
@media(max-width:1099px){
  .au-journey__head{top:clamp(96px,14vh,130px);transform:none;max-width:none}
}
@media(max-width:860px){
  .au-brands__grid{grid-template-columns:1fr;gap:22px}
  .brandcard--wide{max-width:none}
  .brandcard p{text-align:center}
  .au-team__grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;gap:46px}
  .dial__desc{left:38%;width:min(56vw,420px)}
}
@media(max-width:620px){
  .pcard__panel{min-height:0}
  .au-hero__title{font-size:clamp(3rem,18vw,5rem)}
  .au-spirit__body p{font-size:18px}
  .gcard{flex-basis:78%}
  .dnote__year{font-size:1.25rem;margin-bottom:6px}
  .dnote p,.dnote--long p{font-size:18px;line-height:1.5em}
  .dnote p+p{margin-top:8px}
  .dnote__img,.dnote--long .dnote__img{width:100%;margin-top:14px}
  .au-journey__head{top:80px}
  .au-journey__title{font-size:2rem}
  .au-cta__copy{font-size:18px}
}
/* shorter viewports (laptops): compact the dial copy so the longest entry (2006) + its image
   clear the heading and never overflow while still vertically centred */
@media(min-width:621px) and (max-height:900px){
  .dnote__year{font-size:1.35rem;margin-bottom:8px}
  .dnote__img,.dnote--long .dnote__img{width:100%;margin-top:16px}
}
@media(min-width:621px) and (max-height:820px){
  .dnote__year{font-size:1.3rem;margin-bottom:6px}
  .dnote p{font-size:18px;line-height:1.5em}
  .dnote--long p{font-size:18px;line-height:1.5em}
  .dnote--long p+p{margin-top:6px}
  .dnote__img,.dnote--long .dnote__img{width:100%;margin-top:10px}
}
/* short landscape: keep pinned stages inside the viewport (font held at 16px min) */
@media(max-height:620px){
  .au-journey__head{top:70px}
  .dnote p,.dnote--long p{font-size:18px;line-height:1.5em}
  .dnote__img,.dnote--long .dnote__img{width:100%;margin-top:10px}
}

/* PK 1.0.77 - About hero Contact Us red hover */
.au-hero__cta .btn--outline-light:hover{background:#D21F25;border-color:#D21F25;color:#fff}

/* PK 1.0.78 - pin milestone image: reserve tallest text height */
.dnote__text{min-height:var(--pk-dnote-textmin,0)}
.dnote--long .dnote__img{margin-top:20px}  /* match .dnote so pinned image Y is identical */
/* phones: Corporate Milestone — title centred, timeline bar across the top, notes centred below (js/about.js phone branch) */
@media(max-width:600px){
  .au-journey__head{left:0;right:0;align-items:center;text-align:center}
  .dyear__dot{left:50%;top:calc(50% + 34px)}
}
/* phones: Group Overview background one image, covering the section (no repeat); a 55% white overlay sits on top */
@media(max-width:600px){
  .au-group{position:relative;isolation:isolate;overflow:hidden;background:#fff}
  .au-group::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../assets/img/Seafood-Background-041F38-2-web.webp) center/cover no-repeat;pointer-events:none}
  .au-group::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.55);pointer-events:none}
}
/* phones: The PIAU KEE Spirit paragraphs sit 20px from the screen edges (was 50px margins inside a 92vw column) */
@media(max-width:600px){
  .au-spirit__inner{width:100%}
  .au-spirit .au-lead,.au-spirit__body p,.au-spirit__pledge{margin-left:20px;margin-right:20px}
}
/* phones: Our Brands boxes (PK Froz / Green Master / Seafood Hamper) — 20px left/right padding inside each box (was 40px) */
@media(max-width:600px){
  .brandcard{padding-left:20px;padding-right:20px}
}