/* ==========================================================================
   Armstrong Build — Our Offices page (template-office.php)
   Mirrors the About page measurements (page-about.css) and the project gallery grid
   (page-project.css); the video player styles live in vimeo-player.css. Added 2026-10-22.
   ========================================================================== */

/* ----------------------------------------------------------------- Intro */
.office-intro{ background:var(--paper); padding:100px 0 64px; }
.office-intro__inner{ display:flex; flex-direction:column; gap:32px; align-items:flex-start; }
.office-intro__title{
  font-family:var(--font-serif); font-weight:300; color:var(--ink);
  font-size:79px; line-height:1.04; max-width:1000px;
}
.office-intro__lede{
  font-family:var(--font-sans); font-weight:300; color:var(--text-soft);
  font-size:19px; line-height:1.7; max-width:860px;
}

/* ----------------------------------------------------------------- Office video (lead) */
.office-video{ background:var(--paper); padding:0 0 100px; }

/* ----------------------------------------------------------------- For our clients */
.office-story{ background:var(--paper-2); padding:130px 0; }
.office-story__inner{ display:flex; gap:80px; align-items:flex-start; }
.office-story__head{ width:360px; flex-shrink:0; display:flex; flex-direction:column; gap:14px; }
.office-story__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:34px; line-height:1.15; }
.office-story__body{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:20px; }
.office-story__body p{ font-family:var(--font-sans); font-weight:300; color:var(--text-soft); font-size:18px; line-height:1.75; margin:0; }

/* ----------------------------------------------------------------- Gallery */
.office-gallery{ background:var(--paper-3); padding:130px 0; }
.office-gallery__inner{ display:flex; flex-direction:column; gap:40px; }
.office-gallery__head{ display:flex; flex-direction:column; gap:14px; }
.office-gallery__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:50px; line-height:1.15; }
.office-gallery__grid{ display:flex; flex-direction:column; gap:40px; }
.office-gallery__row{ display:grid; gap:40px; }
.office-gallery__row--1{ grid-template-columns:1fr; }
.office-gallery__row--2{ grid-template-columns:repeat(2, 1fr); }
.office-gallery__row--3{ grid-template-columns:repeat(3, 1fr); }
.office-gallery__item{ margin:0; overflow:hidden; background:var(--paper-4); border-radius:var(--radius-img); min-width:0; }
.office-gallery__item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.office-gallery__item:hover img{ transform:scale(1.02); }
.office-gallery__item--large{ height:700px; }
.office-gallery__row--2 .office-gallery__item{ height:460px; }
.office-gallery__row--3 .office-gallery__item{ height:340px; }

/* ----------------------------------------------------------------- Team video (dark band) */
.office-team{ background:var(--ink); color:#fff; padding:130px 0; }
.office-team__inner{ display:flex; flex-direction:column; gap:56px; }
.office-team__head{ display:flex; flex-direction:column; gap:14px; }
.office-team__title{ font-family:var(--font-serif); font-weight:300; color:var(--on-dark); font-size:57px; line-height:1.15; max-width:1000px; }
.office-team__statement{
  font-family:var(--font-serif); font-weight:300; color:var(--on-dark-faint);
  font-size:30px; line-height:1.45; max-width:1000px;
}

/* ----------------------------------------------------------------- Visit */
.office-visit{ background:var(--paper-2); padding:120px 0; }
.office-visit__inner{ display:flex; gap:80px; align-items:flex-start; justify-content:space-between; }
.office-visit__copy{ display:flex; flex-direction:column; gap:24px; align-items:flex-start; max-width:640px; }
.office-visit__title{ font-family:var(--font-serif); font-weight:300; color:var(--ink); font-size:44px; line-height:1.2; }
.office-visit__lede{ font-weight:300; color:var(--text-soft); font-size:17px; line-height:1.75; }
.office-visit__details{ margin:0; display:flex; flex-direction:column; gap:24px; width:360px; flex-shrink:0; padding-top:6px; }
.office-visit__item{ border-top:1px solid var(--line-2); padding-top:18px; display:flex; flex-direction:column; gap:8px; }
.office-visit__label{ font-size:11px; letter-spacing:2px; color:var(--muted); }
.office-visit__value{ margin:0; font-weight:300; color:var(--ink); font-size:17px; line-height:1.6; }
.office-visit__value a{ transition:opacity .2s ease; }
.office-visit__value a:hover{ opacity:.65; }

/* ----------------------------------------------------------------- Responsive */
@media (max-width:1200px){
  .office-intro__title{ font-size:64px; }
  .office-team__title{ font-size:46px; }
  .office-gallery__item--large{ height:520px; }
  .office-gallery__row--2 .office-gallery__item{ height:360px; }
  .office-gallery__row--3 .office-gallery__item{ height:260px; }
}
@media (max-width:900px){
  .office-intro{ padding:72px 0 48px; }
  .office-intro__title{ font-size:44px; }
  .office-intro__lede{ font-size:17px; }
  .office-video{ padding:0 0 64px; }
  .office-story{ padding:80px 0; }
  .office-story__inner{ flex-direction:column; gap:32px; }
  .office-story__head{ width:100%; }
  .office-story__body p{ font-size:16px; }
  .office-gallery{ padding:80px 0; }
  .office-gallery__title{ font-size:38px; }
  .office-gallery__grid, .office-gallery__row{ gap:24px; }
  .office-gallery__item--large{ height:360px; }
  .office-gallery__row--2 .office-gallery__item{ height:240px; }
  .office-gallery__row--3 .office-gallery__item{ height:190px; }
  .office-team{ padding:80px 0; }
  .office-team__inner{ gap:40px; }
  .office-team__title{ font-size:38px; }
  .office-team__statement{ font-size:24px; }
  .office-visit{ padding:80px 0; }
  .office-visit__inner{ flex-direction:column; gap:40px; }
  .office-visit__title{ font-size:34px; }
  .office-visit__details{ width:100%; }
}
@media (max-width:560px){
  .office-intro__title{ font-size:38px; }
  .office-gallery__row--2, .office-gallery__row--3{ grid-template-columns:1fr; }
  .office-gallery__item--large, .office-gallery__row--2 .office-gallery__item, .office-gallery__row--3 .office-gallery__item{ height:240px; }
  .office-team__statement{ font-size:22px; }
  .office-visit__title{ font-size:30px; }
}