/* /our-portfolio — AISHTMLNEWDESIGN-476
   Page-owned styles. EVERY selector is scoped to #page-our-portfolio or a
   op- prefixed class: this sheet must never style body, a bare
   element, #ais-header or #ais-footer. The document reset
   (html,body{margin:0}) is owned by the shared layout sheet.
   Font is Inter; no body/UI text below 16px. */

/* ===========================================================================
   VISUAL DIRECTION — "CONTACT SHEET"
   A photographer's proof sheet. Ink-dark gutters, warm paper field, every
   project a white frame with a chinagraph-red mark. Nothing here loops or
   self-starts (rule 26); motion is hover/focus only.
   =========================================================================== */

#page-our-portfolio{
  --op-ink:#0e1216;          /* gutter / hero ground */
  --op-ink-2:#1a2028;
  --op-paper:#f3f1ec;        /* warm proof-sheet paper */
  --op-frame:#ffffff;        /* the frame itself */
  --op-mark:#d13b2e;         /* chinagraph red */
  --op-mark-ink:#a72b20;     /* AA-safe red on white */
  --op-text:#141a21;         /* body on light */
  --op-text-2:#39434f;       /* supporting on light — 4.5:1+ on paper */
  --op-onink:#f6f7f8;        /* body on ink */
  --op-onink-2:#c3cbd4;      /* supporting on ink */
  --op-rule:#d9d5cc;         /* hairline on paper */
  --op-wrap:1240px;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--op-text);
  background:var(--op-paper);
}

#page-our-portfolio *,
#page-our-portfolio *::before,
#page-our-portfolio *::after{box-sizing:border-box;}

.op-wrap{max-width:var(--op-wrap);margin-inline:auto;padding-inline:24px;}

.op-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

#page-our-portfolio :focus-visible{
  outline:3px solid var(--op-mark);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Buttons ---------------------------------------------------- */
.op-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 34px;
  font:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:2px;cursor:pointer;
  transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.op-btn--gold{
  background:var(--op-mark);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}
.op-btn--gold:hover{background:#e14435;transform:translateY(-2px);}
.op-btn--gold:active{transform:translateY(0);}

/* ---------- Hero — rule 24: full-bleed, image-free, STATIC gradient ----- */
.op-hero{
  width:100%;
  padding:clamp(72px,9vw,128px) 24px clamp(64px,7vw,104px);
  background:
    linear-gradient(180deg,var(--op-ink) 0%,var(--op-ink-2) 100%);
  color:var(--op-onink);
  border-bottom:6px solid var(--op-mark);
}
.op-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
.op-hero__eyebrow{
  margin:0 0 18px;font-size:16px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--op-mark);
}
.op-hero__h1{
  margin:0 0 22px;
  font-size:clamp(38px,5vw,66px);
  line-height:1.06;font-weight:800;letter-spacing:-.02em;
  color:#fff;text-wrap:balance;
}
.op-hero__lede{
  margin:0 auto 26px;max-width:780px;
  font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:var(--op-onink);
}
.op-hero__disciplines{
  margin:0 auto 34px;max-width:700px;
  font-size:16px;font-weight:600;line-height:1.9;
  color:var(--op-onink-2);
}

/* ---------- Breadcrumb -------------------------------------------------- */
.op-crumb{background:var(--op-frame);border-bottom:1px solid var(--op-rule);}
.op-crumb__list{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  list-style:none;margin:0;padding:16px 0;font-size:16px;color:var(--op-text-2);
}
.op-crumb__list li+li::before{content:"/";margin-right:8px;color:var(--op-rule);}
.op-crumb__list a{color:var(--op-mark-ink);font-weight:600;}
.op-crumb__list a:hover{text-decoration:underline !important;}
.op-crumb__list li[aria-current]{font-weight:600;color:var(--op-text);}

/* ---------- Work grid --------------------------------------------------- */
.op-work{padding:clamp(48px,6vw,80px) 0 clamp(64px,8vw,104px);}

.op-filters{
  display:flex;flex-wrap:wrap;gap:10px;
  padding-bottom:22px;margin-bottom:34px;
  border-bottom:1px solid var(--op-rule);
}
.op-filter{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 18px;
  font:inherit;font-size:16px;font-weight:600;
  color:var(--op-text);background:var(--op-frame);
  border:1px solid var(--op-rule);border-radius:2px;cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.op-filter__n{
  font-size:13px;font-weight:700;line-height:1;
  padding:4px 7px;border-radius:2px;
  background:var(--op-paper);color:var(--op-text-2);
}
.op-filter:hover{border-color:var(--op-ink);}
.op-filter.is-on{background:var(--op-ink);color:#fff;border-color:var(--op-ink);}
.op-filter.is-on .op-filter__n{background:var(--op-mark);color:#fff;}

.op-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
}
.op-card{display:block;}
.op-card[hidden]{display:none;}

.op-card__a{
  display:flex;flex-direction:column;height:100%;
  background:var(--op-frame);
  border:1px solid var(--op-rule);
  border-radius:3px;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.op-card__a:hover{
  transform:translateY(-4px);
  border-color:var(--op-ink);
  box-shadow:0 16px 34px -18px rgba(14,18,22,.45);
}
.op-card__shot{
  display:block;background:var(--op-ink-2);
  aspect-ratio:16/10;overflow:hidden;
}
.op-card__shot img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .28s ease;
}
.op-card__a:hover .op-card__shot img{transform:scale(1.04);}

.op-card__body{
  display:flex;flex-direction:column;gap:9px;
  padding:20px 20px 22px;flex:1 1 auto;
}
.op-card__cat{
  font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--op-mark-ink);
}
.op-card__name{
  font-size:20px;font-weight:700;line-height:1.3;color:var(--op-text);
}
.op-card__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;
  font-size:16px;font-weight:600;color:var(--op-text-2);
}
.op-card__more img{display:block;transition:transform .18s ease;}
.op-card__a:hover .op-card__more{color:var(--op-mark-ink);}
.op-card__a:hover .op-card__more img{transform:translateX(4px);}

.op-empty{
  margin:40px 0 0;text-align:center;
  font-size:18px;color:var(--op-text-2);
}

/* ---------- Area We Serve ----------------------------------------------- */
.op-area{
  background:var(--op-ink);color:var(--op-onink);
  padding:clamp(56px,7vw,88px) 0;
}
.op-area__h2{
  margin:0 0 36px;
  font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.01em;
  color:#fff;
}
.op-regions{
  list-style:none;margin:0;padding:0;
  display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.op-region{
  padding:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:3px;
}
.op-region h3{
  display:flex;align-items:center;gap:10px;
  margin:0 0 14px;
  font-size:18px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
}
.op-region__tel{
  display:inline-block;margin-bottom:10px;
  font-size:18px;font-weight:700;color:#ff7d70;
}
.op-region__tel:hover{text-decoration:underline !important;}
.op-region p{margin:0;font-size:16px;line-height:1.7;color:var(--op-onink-2);}

/* ---------- CTA modal ----------------------------------------------------
   Geometry ported from /about-us (.au-modal), which is the reference shell for
   this embedded form across the site.

   The bug this replaces: the overlay centred the panel, the panel was capped at
   max-height:92vh with overflow:hidden, and the iframe was pinned to a fixed
   height:78vh. form_embed.js resizes the iframe to its true content height
   (measured: 870px), so the panel clipped the overflow and, because the overlay
   itself did not scroll, the clipped part was UNREACHABLE. Measured on staging:
   42px lost at a 900px viewport, 226px at 700px -- taking the SUBMIT bar off
   screen with no way to reach it. The form could not be submitted on a laptop.

   The fix is three coupled rules, all three required:
     - overlay aligns to flex-start and scrolls (overflow-y:auto)
     - the panel carries NO max-height, so it can be taller than the viewport
     - the iframe uses min-height, so it GROWS to whatever the widget reports
   Colours stay CONTACT SHEET; only the geometry is borrowed.                  */
.op-modal{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:flex-start;justify-content:center;
  padding: 100px 20px 20px 20px;overflow-y:auto;background:rgba(8,11,14,.72);
}
.op-modal.is-open{display:flex;}
.op-modal__box{
  position:relative;width:100%;max-width:620px;margin:auto;
  background:#fff;border-radius:16px;
  box-shadow:0 30px 80px -30px rgba(8,11,14,.7);
  /* hidden, not auto: clips the embedded form's square-cornered white document
     to the panel radius so all four corners stay rounded. */
  overflow:hidden;
}
.op-modal__x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--op-text);
  border:1px solid var(--op-rule);border-radius:50%;cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.op-modal__x:hover{background:var(--op-ink);color:#fff;border-color:var(--op-ink);}
.op-modal__box iframe{
  display:block;width:100%;min-height:860px;border:0;
}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:900px){
  .op-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
}
@media (max-width:640px){
  .op-hero{padding-top:56px;padding-bottom:52px;}
  .op-grid{grid-template-columns:1fr;}
  .op-filters{gap:8px;}
  .op-filter{padding:0 14px;font-size:16px;}
  .op-region{padding:20px;}
}

@media (prefers-reduced-motion:reduce){
  #page-our-portfolio *,
  #page-our-portfolio *::before,
  #page-our-portfolio *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}