/*
Theme Name: A. Altman Company 2026 Lite
Theme URI: https://www.aaltmanco.com/
Author: A. Altman Company
Description: Lite edition of the hand-built A. Altman Company theme, matched to the apm2025 design direction. Identical to the full theme with the portfolio removed: no Portfolio post type, archive, project pages or filters. No plugins and no page builder.
Version: 2.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: aac
*/

/* ============================================================
   TOKENS — sampled from the apm2025 build
   ============================================================ */
:root{
  --teal:#71AEB5;          /* accent: closing band, hero button, links */
  --teal-deep:#5B979E;     /* hover */
  --ink:#0C0C0C;           /* dark full-bleed sections */
  --black:#000000;         /* headings, nav */
  --muted:#797C7F;         /* body copy, footer detail */
  --paper:#FFFFFF;
  --line:#E2E2E2;
  --line-dark:rgba(255,255,255,.22);

  --shell:1320px;
  --gutter:clamp(1.25rem, 4vw, 3.5rem);

  --step--1:clamp(.8rem,.78rem + .1vw,.86rem);
  --step-0:clamp(.98rem,.95rem + .15vw,1.06rem);
  --step-1:clamp(1.1rem,1.04rem + .3vw,1.3rem);
  --step-2:clamp(1.4rem,1.2rem + .9vw,2rem);
  --step-3:clamp(1.9rem,1.45rem + 2.1vw,3.2rem);
  --step-4:clamp(2.4rem,1.7rem + 3.2vw,4.4rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; line-height:1.04; letter-spacing:-.025em; font-weight:800}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.9rem 1.4rem}
.skip:focus{left:0}

/* Uppercase letterspaced eyebrow — the reference site's device */
.eyebrow{
  display:block;
  font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--black); margin-bottom:1.1rem;
}
.section--ink .eyebrow,
.hero .eyebrow{color:#fff}
/* Page heroes are near-black too — without this the eyebrow renders black on black. */
.page-hero .eyebrow{color:var(--teal)}

/* Buttons — square, uppercase, letterspaced */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:1.05rem 2.1rem;
  font-size:.78rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--teal{background:var(--teal); color:#fff}
.btn--teal:hover{background:var(--teal-deep)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:var(--teal)}
.btn--outline{border-color:var(--black); color:var(--black)}
.btn--outline:hover{background:var(--black); color:#fff}
.btn--ghost{border-color:#fff; color:#fff}
.btn--ghost:hover{background:#fff; color:var(--ink)}

/* ============================================================
   HEADER — solid white bar, black CTA block flush right
   ============================================================ */
.masthead{position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line)}
.masthead__inner{
  display:flex; align-items:stretch; justify-content:space-between; gap:2rem;
  min-height:112px;                 /* whole pixels: a fractional header height
                                       rounds differently from its children on some
                                       displays and leaves a pale hairline */
}
.masthead__left{display:flex; align-items:center; gap:clamp(1.5rem,4vw,3.5rem); padding-inline:var(--gutter); flex:1}

.brand{display:flex; align-items:center; text-decoration:none; color:var(--black); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; padding-block:1.25rem}
.brand img{height:auto; width:auto; max-height:clamp(46px,5vw,66px)}
.footer__brand{display:inline-block; margin-bottom:2.75rem}
.footer__brand img{height:auto; width:auto; max-height:74px}

.nav{display:flex; align-items:center; gap:clamp(.9rem,2vw,1.7rem)}
/* A WordPress menu wraps each link in <li>; drop the list styling so it lays out like plain links. */
.nav,.nav ul{list-style:none; margin:0; padding:0}
.nav li{list-style:none; margin:0; padding:0; display:contents}
.nav li::marker{content:none}
.nav a{
  color:var(--black); text-decoration:none;
  font-size:.95rem; font-weight:500;
  padding:.35rem 0; border-bottom:2px solid transparent;
  transition:border-color .18s var(--ease);
}
.nav a:hover,.nav a.is-current{border-bottom-color:var(--black)}

/* The CTA is a full-height black block hard against the right edge */
.masthead__cta{
  display:flex; align-items:center; justify-content:center; align-self:stretch;
  background:var(--ink); color:#fff; text-decoration:none;
  padding:1.6rem clamp(1.5rem,3vw,2.75rem);
  font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  flex:none; transition:background .2s var(--ease);
}
.masthead__cta:hover{background:var(--teal)}
/* Overhangs the edges by a pixel so no rounding gap can show through. */
.masthead__cta{box-shadow:0 1px 0 var(--ink), 0 -1px 0 var(--ink)}
.masthead__cta:hover{box-shadow:0 1px 0 var(--teal), 0 -1px 0 var(--teal)}

.burger{display:none; background:none; border:0; cursor:pointer; padding:.6rem}
.burger svg{display:block; stroke:var(--black); stroke-width:1.8}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:min(88vh,860px); display:flex; align-items:center; background:var(--ink); overflow:hidden}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover}
/* Left-weighted scrim so the headline stays legible over any hero photo.
   Strength is a variable because some photos arrive already darkened — stacking
   a second scrim on those turns them to mud. Set it in Customize > Home page hero. */
.hero{--scrim:.55}
.hero--scrim-none{--scrim:0}
.hero--scrim-light{--scrim:.26}
.hero--scrim-medium{--scrim:.55}
.hero--scrim-strong{--scrim:.84}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right,
      rgba(10,10,10,var(--scrim)) 0%,
      rgba(10,10,10,calc(var(--scrim) * .76)) 38%,
      rgba(10,10,10,calc(var(--scrim) * .42)) 70%,
      rgba(10,10,10,calc(var(--scrim) * .52)) 100%),
    linear-gradient(to top, rgba(10,10,10,calc(var(--scrim) * .42)), rgba(10,10,10,0) 45%);
}
.hero__inner{position:relative; z-index:2; width:100%}
.hero__body{max-width:min(100%,52rem)}
.hero h1{
  color:#fff; font-size:var(--step-4); font-weight:800;
  letter-spacing:-.032em; line-height:1.02; text-wrap:balance;
}
.hero__sub{margin-top:1.1rem; color:rgba(255,255,255,.92); font-size:var(--step-1); font-weight:400}
.hero .btn{margin-top:2.2rem}

/* Slider arrows */
.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:62px; height:62px; border-radius:50%;
  background:rgba(255,255,255,.18); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.3rem; transition:background .2s var(--ease);
}
.hero__arrow:hover{background:rgba(255,255,255,.34)}
.hero__arrow--prev{left:clamp(.75rem,2vw,2.5rem)}
.hero__arrow--next{right:clamp(.75rem,2vw,2.5rem)}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding-block:clamp(4rem,8vw,7.5rem)}
.section--ink{background:var(--ink); color:#fff}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--flush{padding:0}

.section__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.25rem 2rem; margin-bottom:2.75rem}
.section__title{font-size:var(--step-3); font-weight:800; letter-spacing:-.03em}
.section__note{max-width:40ch; color:var(--muted); font-size:.98rem}
.section--ink .section__note{color:rgba(255,255,255,.62)}

.statement{font-size:var(--step-3); font-weight:800; letter-spacing:-.032em; line-height:1.06; max-width:22ch; text-wrap:pretty}

/* ============================================================
   CAPABILITY STRIP — black, icons, arrow links, hairline dividers
   ============================================================ */
.caps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.caps__item{
  padding:clamp(2rem,4vw,3.5rem) clamp(1.25rem,2.5vw,2.5rem);
  border-left:1px solid var(--line-dark);
  display:flex; flex-direction:column;
}
.caps__item:first-child{border-left:0; padding-left:0}
.caps__icon{width:56px; height:56px; margin-bottom:2.2rem; color:#fff}
.caps__icon svg{width:100%; height:100%; fill:currentColor}
.caps__item h3{color:#fff; font-size:1.22rem; font-weight:800; letter-spacing:-.02em}
.caps__item p{margin-top:.8rem; color:rgba(255,255,255,.6); font-size:.93rem; line-height:1.6}
.caps__arrow{
  display:inline-block; margin-top:auto; padding-top:1.9rem;
  color:#fff; text-decoration:none; font-size:1.35rem; line-height:1;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.caps__arrow:hover{color:var(--teal); transform:translateX(5px)}

/* ============================================================
   WHO WE ARE
   ============================================================ */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.about h2{font-size:clamp(1.9rem,1.25rem + 2.6vw,3.4rem); font-weight:800; letter-spacing:-.032em; line-height:1.06}
.about__copy{color:var(--muted); line-height:1.75}
.about__actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem}

/* ============================================================
   SECTOR TILES — four edge-to-edge photos, label bottom left
   ============================================================ */
.sectors{display:grid; grid-template-columns:repeat(4,1fr)}
.sector{position:relative; aspect-ratio:1/1.12; overflow:hidden; text-decoration:none; display:block; background:var(--ink)}
.sector img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.sector:hover img{transform:scale(1.05)}
/* Lite: the tiles are not links (no portfolio to open), so no hover zoom. */
div.sector:hover img{transform:none}
.sector::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%)}
.sector__label{
  position:absolute; left:clamp(1rem,2vw,1.9rem); bottom:clamp(1rem,2vw,1.6rem); z-index:2;
  color:#fff; font-size:clamp(1.05rem,.9rem + .7vw,1.5rem); font-weight:800; letter-spacing:-.02em;
}
/* Tile with a descriptor line under the label. */
.sector--sub .sector__label{bottom:auto; top:auto}
.sector__caption{
  position:absolute; left:clamp(1rem,2vw,1.9rem); right:clamp(1rem,2vw,1.9rem);
  bottom:clamp(1rem,2vw,1.6rem); z-index:2;
}
.sector__caption .sector__label{position:static; left:auto; bottom:auto; display:block}
.sector__sub{
  display:block; margin-top:.35rem;
  color:rgba(255,255,255,.85); font-size:.92rem; font-weight:400; line-height:1.4;
}
.sector__caption + .sector__label{display:none}

/* The sticky header would otherwise cover the target of an in-page jump. */
.cap-block{scroll-margin-top:130px}
.sector__ph{position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 2px,transparent 2px 12px),linear-gradient(150deg,#1d1d1d,#0C0C0C)}

/* ============================================================
   TENANT LOGOS — full colour on white
   ============================================================ */
/* ============================================================
   TENANT TICKER
   Two identical halves translated -50%, so the loop is seamless.
   Slow by design: this is a trust signal, not an animation.
   ============================================================ */
.ticker{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display:flex; width:max-content; align-items:center;
  animation:ticker-roll var(--ticker-speed, 65s) linear infinite;
  will-change:transform;
}
/* Spacing is margin, not flex gap, on purpose. With `gap` there are 2n-1 gaps
   across the doubled list, so translateX(-50%) lands half a gap short and the
   loop visibly jumps on every wrap. As margin there are exactly 2n, and half
   the track is exactly one full set. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused}

/* Fixed row height reserves the space before the logos load — otherwise the
   track collapses to zero and the section jumps when images arrive. */
.ticker__item{
  flex:none; display:flex; align-items:center; justify-content:center;
  height:clamp(38px, 4vw, 56px);
  min-width:110px;
  margin-right:clamp(2.5rem, 6vw, 6rem);
}
.ticker__item img{
  width:auto; height:auto;
  max-height:100%;
  max-width:190px;
  object-fit:contain;
}

@keyframes ticker-roll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* No motion: fall back to a static, wrapped row. */
@media (prefers-reduced-motion:reduce){
  .ticker{mask-image:none; -webkit-mask-image:none}
  .ticker__track{
    animation:none; width:auto; flex-wrap:wrap; justify-content:center;
    row-gap:1.5rem;
  }
  .ticker__item{margin-right:clamp(1.5rem,4vw,3rem)}
}

.empty{padding:3rem 0; color:var(--muted); border-top:1px solid var(--line)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1.5px solid var(--black); max-width:72ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; font-size:clamp(1rem,.94rem + .35vw,1.2rem); font-weight:700; letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--teal); font-size:1.5rem; font-weight:400; line-height:1; flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--teal-deep)}
.faq p{padding:0 0 1.4rem; color:var(--muted); max-width:62ch}

/* ============================================================
   CLOSING TEAL BAND
   ============================================================ */
.closer{background:var(--teal); color:#fff; padding-block:clamp(3rem,6vw,5.5rem)}
.closer__inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.75rem}
.closer h2{font-size:clamp(1.5rem,1rem + 1.75vw,2.45rem); font-weight:800; letter-spacing:-.03em; max-width:36ch}

/* ============================================================
   FOOTER — white, four columns
   ============================================================ */
.footer{background:#fff; padding-block:clamp(3.5rem,7vw,6rem) 2rem}
.footer__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem}
/* Section labels in caps; office names below stay sentence case, so the
   two levels are clearly different. */
.footer h4{
  font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:1.6rem; color:var(--black);
}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--black)}
.footer address{font-style:normal; color:var(--muted); line-height:1.75}
.footer address + address{margin-top:1.5rem}

/* Email button. The address is assembled by JS, so this is an <a> with no
   href until the script runs — styled as a button either way. */
.mailbtn{
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1.25rem; padding:.6rem 1.05rem;
  border:1px solid var(--line); border-radius:2px;
  font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.footer .mailbtn{color:var(--ink)}
.mailbtn svg{flex:none; opacity:.75}
.mailbtn:hover,
.mailbtn:focus-visible{background:var(--ink); border-color:var(--ink); color:#fff}
.footer .mailbtn:hover,
.footer .mailbtn:focus-visible{color:#fff}
.mailbtn:hover svg,
.mailbtn:focus-visible svg{opacity:1}
.mailbtn:focus-visible{outline:2px solid var(--teal); outline-offset:2px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.85rem; color:var(--muted)}
.footer__base{margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem}

.social{display:flex; gap:.6rem}
.social a{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; color:var(--black);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.social a:hover{background:var(--teal); border-color:var(--teal); color:#fff}
.social svg{width:17px; height:17px; fill:currentColor}

/* Scroll-to-top */
.totop{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:90;
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease), background .2s var(--ease);
}
.totop.is-on{opacity:1; pointer-events:auto}
.totop:hover{background:var(--teal)}

/* ============================================================
   PAGES / PROSE
   ============================================================ */
.page-hero{background:var(--ink); color:#fff; padding-block:clamp(2.25rem,3.6vw,3.5rem)}
.page-hero h1{font-size:var(--step-4); font-weight:800; letter-spacing:-.032em; max-width:20ch}
.page-hero p{margin-top:1.1rem; color:rgba(255,255,255,.72); max-width:54ch; font-size:var(--step-1)}

.prose{max-width:70ch; line-height:1.8; color:var(--muted)}
.prose h2{font-size:var(--step-2); color:var(--black); margin:2.5rem 0 .8rem}
.prose h3{font-size:var(--step-1); color:var(--black); margin:2rem 0 .6rem}
.prose a{color:var(--teal-deep)}
.prose blockquote{margin:2rem 0; padding-left:1.5rem; border-left:3px solid var(--teal); color:var(--black); font-size:var(--step-1); font-weight:600}

/* Two-column layout (used by the Contact page) */
.project{display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start}
.pager{display:flex; justify-content:space-between; gap:1rem; padding-block:2.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.92rem}
.pager a{text-decoration:none}
.pager a:hover{color:var(--teal-deep)}

/* Team */
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:clamp(1.25rem,2.5vw,2rem)}
.person{display:block; text-decoration:none; color:inherit}
.person__media{aspect-ratio:4/5; background:#EFEFEF; overflow:hidden}
.person__media img{width:100%;height:100%;object-fit:cover; transition:transform .5s var(--ease)}
.person:hover .person__media img{transform:scale(1.04)}
.person__name{margin-top:.9rem; font-size:1.05rem; font-weight:700; letter-spacing:-.015em}
.person:hover .person__name{color:var(--teal-deep)}
.person__role{color:var(--teal-deep); font-size:.86rem; font-weight:600; margin-top:.15rem}

/* Everyone without a headshot: name and title, no empty photo box. */
.team-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:0 clamp(1.25rem,2.5vw,2rem); margin-top:clamp(2.5rem,5vw,4rem)}
.team-list__item{display:block; padding:1.1rem 0 1.25rem; border-top:1.5px solid var(--black); text-decoration:none; color:inherit}
.team-list__item .person__name{margin-top:0}
a.team-list__item:hover .person__name{color:var(--teal-deep)}

/* Single person */
.person-single{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.person-single__media{aspect-ratio:4/5; background:#EFEFEF; overflow:hidden}
.person-single__media img{width:100%;height:100%;object-fit:cover}
.person-single__back{
  display:inline-block; margin-bottom:1.6rem; text-decoration:none;
  color:var(--muted); font-size:.82rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.person-single__back:hover{color:var(--teal-deep)}
.person-single h1{font-size:clamp(1.9rem,1.4rem + 2vw,3rem); font-weight:800; letter-spacing:-.03em}
.person-single__role{margin-top:.5rem; color:var(--teal-deep); font-weight:600; font-size:var(--step-1)}
.person-single__bio{margin-top:1.75rem; max-width:none}
.person-single--nophoto{grid-template-columns:minmax(0,1fr); max-width:860px}
.person-single__links{margin-top:2rem}
.person-single__links a{
  color:var(--teal-deep); text-decoration:none;
  font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid currentColor; padding-bottom:.2rem;
}
.person-single__links a:hover{color:var(--black)}
@media (max-width:820px){
  .person-single{grid-template-columns:1fr; gap:1.75rem}
  .person-single__media{max-width:320px}
}

/* News */
.news{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(1.5rem,3vw,2.5rem)}
.post{display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:inherit}
.post__date{color:var(--muted); font-size:.84rem}
.post__title{font-size:1.1rem; font-weight:700; line-height:1.3; letter-spacing:-.015em}
.post:hover .post__title{color:var(--teal-deep)}

.screen-reader-text{position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pagination{display:flex; gap:.4rem; flex-wrap:wrap}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;padding:.6rem .8rem;border:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:.88rem}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.searchform{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem}
.searchform input[type="search"]{flex:1 1 240px; padding:.9rem 1rem; border:1px solid var(--line); font:inherit}
.office{padding:1.4rem 0; border-top:1px solid var(--line)}
.office:first-child{border-top:1.5px solid var(--black)}

/* ============================================================
   ABOUT — scrapbook of the founders
   Two photo prints taped to a paper band, slightly askew.
   ============================================================ */
.history{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,95,60,.025) 0 2px, transparent 2px 5px),
    #F2ECE2;
  overflow:hidden;
}
.history__inner{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:center}
.history__text h2{font-size:clamp(1.9rem,1.25rem + 2.6vw,3.4rem); font-weight:800; letter-spacing:-.032em; line-height:1.06}
.history__text .about__copy{margin-top:1.5rem; color:#5E5850; max-width:48ch}
.history__text .about__copy p + p{margin-top:1rem}

.scrapbook{position:relative; min-height:clamp(520px,46vw,640px)}
.snap{
  position:absolute; margin:0; width:clamp(210px,24vw,320px);
  background:#FFFDF8; padding:12px 12px 16px;
  box-shadow:0 1px 2px rgba(40,30,20,.18), 0 14px 30px -8px rgba(40,30,20,.35);
  transition:transform .35s var(--ease);
}
.snap img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 20%; filter:contrast(1.02)}
.snap figcaption{
  margin:.7rem .25rem 0; min-height:2.6rem;
  font-family:'Caveat',cursive; font-size:1.55rem; font-weight:700; line-height:1; color:#2F2821;
}
.snap figcaption small{display:block; margin-top:.15rem; font-size:1.1rem; font-weight:500; color:#6B6157}
.snap--a{left:0; top:16%; transform:rotate(-5deg); z-index:1}
.snap--b{right:0; top:0; transform:rotate(4deg); z-index:2}
.snap:hover{transform:rotate(0deg) scale(1.02); z-index:3}

/* Masking tape across the top edge */
.tape{
  position:absolute; top:-15px; left:50%; width:118px; height:32px; z-index:2;
  transform:translateX(-50%) rotate(-4deg);
  background:linear-gradient(180deg, rgba(236,226,200,.86), rgba(226,214,184,.86));
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  clip-path:polygon(2% 8%, 98% 0, 100% 92%, 0 100%);
}
.snap--b .tape{transform:translateX(-50%) rotate(5deg)}

/* Small typed label pinned under the prints */
.scrap-note{
  position:absolute; right:6%; bottom:4%; z-index:4; transform:rotate(-2.5deg);
  background:#FBF7EE; border:1px solid #E3D9C6; padding:.7rem 1.1rem;
  box-shadow:0 8px 18px -8px rgba(40,30,20,.35);
  font-family:'Courier New',Courier,monospace; font-size:.8rem; letter-spacing:.06em; color:#4A4238; text-transform:uppercase;
}
.scrap-note span{display:block}
.scrap-note span + span{margin-top:.2rem; color:#7A6F62}

@media (max-width:900px){
  .history__inner{grid-template-columns:1fr}
}
@media (max-width:560px){
  .scrapbook{min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:1.25rem .9rem; padding-top:1rem}
  .snap{position:relative; inset:auto; width:auto; padding:8px 8px 12px}
  .snap figcaption{margin-top:.5rem; min-height:0; font-size:1.25rem}
  .snap figcaption small{font-size:.95rem}
  .snap--b{margin-top:1.75rem}
  .tape{width:84px; height:26px; top:-12px}
  .scrap-note{position:relative; grid-column:1 / -1; justify-self:center; left:auto; right:auto; bottom:auto; margin-top:.25rem}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .about{grid-template-columns:1fr; gap:2rem}
  .project{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .sectors{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .masthead__inner{min-height:92px}
  .masthead__left{flex-wrap:wrap}
  .nav{
    position:fixed; inset:auto 0 0 0; top:var(--head-h,74px);
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:.5rem var(--gutter) 1.5rem;
    border-top:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
    max-height:calc(100dvh - 74px); overflow:auto;
  }
  .nav.is-open{opacity:1; transform:none; pointer-events:auto}
  .nav a{padding:.95rem .25rem; font-size:1.05rem; border-bottom:1px solid var(--line)}
  .burger{display:block}
  .masthead__cta{padding-inline:1.25rem; font-size:.7rem}
  .caps__item{border-left:0; border-top:1px solid var(--line-dark); padding-inline:0}
  .caps__item:first-child{border-top:0}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr; gap:2rem}
  .closer__inner{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* Offices grid on the About page */
/* Sized so the block reads the same with two offices as with four. */

/* Footer: "Our Offices" heads the two office columns, so Links and Social
   keep their headings on the same optical line. */
.footer__grid{grid-template-columns:2fr 1fr 1fr}
.footer__offices-cols{display:grid; grid-template-columns:1fr 1fr; gap:2rem}
.footer h5{
  font-size:.95rem; font-weight:700; letter-spacing:-.005em;
  color:var(--black); margin:0 0 .7rem;
}
@media (max-width:1000px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__offices{grid-column:1 / -1}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr}
  .footer__offices-cols{grid-template-columns:1fr; gap:1.75rem}
}

/* ============================================================
   CAPABILITY BLOCKS — one section per discipline, alternating
   ============================================================ */
.cap-block{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
  padding-block:clamp(2.75rem,5vw,4.5rem);
}
/* Content sits above the tint band. */
.cap-block > *{position:relative; z-index:1}
/* The section already provides the top gap; don't double it. */
.cap-block:first-child{padding-top:0}
/* A tinted band as the last block runs straight into the closer, so it needs
   no trailing white. */
.cap-block--tint:last-child{margin-bottom:calc(-1 * clamp(4rem,8vw,7.5rem))}

/* Every second discipline gets a full-bleed tinted band, so the four read as
   four blocks rather than one long list. The hatch is deliberately near the
   threshold of visibility — texture, not pattern. */
.cap-block--tint::before{
  content:"";
  position:absolute; z-index:0;
  top:0; bottom:0;
  left:calc(50% - 50vw); width:100vw;
  background:
    repeating-linear-gradient(135deg,
      rgba(12,12,12,.022) 0 1px,
      transparent 1px 10px),
    linear-gradient(180deg, #F6F6F4, #F1F1EE);
}
/* Hairline top and bottom to crisp the band edges. */
.cap-block--tint::after{
  content:"";
  position:absolute; z-index:0; pointer-events:none;
  top:0; bottom:0;
  left:calc(50% - 50vw); width:100vw;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.cap-block h2{
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);
  font-weight:800; letter-spacing:-.028em; line-height:1.08;
}
.cap-block__lead{
  margin-top:1rem; color:var(--muted);
  font-size:var(--step-1); line-height:1.6;
}

.cap-list{list-style:none; padding:0; margin:.35rem 0 0; display:grid; gap:.72rem; align-content:start}
.cap-list li{
  position:relative; padding-left:1.5rem;
  color:var(--black); font-size:.96rem; line-height:1.5;
}
.cap-list li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:9px; height:2px; background:var(--teal);
}

@media (max-width:820px){
  .cap-block{grid-template-columns:1fr; gap:1.25rem}
  .cap-list{margin-top:0}
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.form__row{display:flex; flex-direction:column; margin-bottom:1.4rem}
.form__row label{
  font-size:.78rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--black); margin-bottom:.55rem;
}
.form__row label span{color:var(--teal-deep)}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea{
  width:100%; font:inherit; color:var(--black);
  padding:.95rem 1.05rem;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:0;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.form textarea{resize:vertical; min-height:150px; line-height:1.6}
.form input:focus,
.form textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(113,174,181,.25);
}
.form [aria-invalid="true"]{border-color:#B4442F}

.form__error{margin-top:.45rem; color:#B4442F; font-size:.85rem}
.form__error--top{
  padding:.9rem 1.1rem; margin-bottom:1.5rem;
  border-left:3px solid #B4442F; background:#FCF3F1;
}
.form__ok{
  padding:1rem 1.2rem; margin-bottom:1.75rem;
  border-left:3px solid var(--teal); background:#F0F7F8;
  color:var(--black); font-weight:600;
}

/* Honeypot — off-screen rather than display:none, which some bots detect. */
.form__pot{position:absolute!important; left:-9999px; top:-9999px; height:0; overflow:hidden}

.form button[type="submit"]{margin-top:.4rem}

/* ============================================================
   CAPABILITY: PRIMARY VS SECONDARY
   ============================================================ */

/* The primary discipline, on the dark field. */
.cap-primary{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem,4vw,4rem);
  align-items:start;
  margin-top:1.5rem;
}
.cap-primary h2{
  color:#fff;
  font-size:clamp(1.85rem,1.35rem + 2.2vw,3.1rem);
  font-weight:800; letter-spacing:-.032em; line-height:1.05;
}
.cap-primary__lead{
  margin-top:1.15rem;
  color:rgba(255,255,255,.72);
  font-size:var(--step-1); line-height:1.6;
}
.cap-primary .cap-list{margin-top:.35rem}
.cap-primary .cap-list li{color:rgba(255,255,255,.92)}
.cap-primary .cap-list li::before{background:var(--teal)}

/* Secondary disciplines sit a step down in scale. */
.cap-block--secondary h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.95rem)}
.cap-block--secondary .cap-block__lead{font-size:var(--step-0)}

@media (max-width:820px){
  .cap-primary{grid-template-columns:1fr; gap:1.25rem}
}

/* Lead-in line above the property-type tiles on the Capability page */
.cap-primary__note{
  margin-top:clamp(2rem,4vw,3.25rem);
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.78);
  font-size:var(--step-1);
  font-weight:600;
}

/* ============================================================
   PROPERTY TYPES — card variant
   Deliberately unlike the full-bleed discipline tiles: contained
   inside the column, landscape, label under the image rather than on it.
   ============================================================ */
.ptypes{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.85rem,1.6vw,1.4rem);
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
/* These are not links, so nothing here may suggest one: no arrow, no hover
   zoom, no colour shift on hover. */
.ptype{display:block; color:#fff}
.ptype__media{
  display:block; aspect-ratio:16/11;
  overflow:hidden; background:#1A1A1A;
}
.ptype__media img{width:100%; height:100%; object-fit:cover}

.ptype__label{
  display:block;
  margin-top:.9rem; padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:.98rem; font-weight:700; letter-spacing:-.012em;
}

@media (max-width:820px){
  .ptypes{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .ptypes{grid-template-columns:1fr}
  .ptype__media{aspect-ratio:16/9}
}

/* ============================================================
   DISCIPLINE PAGES
   ============================================================ */
.discipline__banner{position:relative; aspect-ratio:21/7; overflow:hidden; background:var(--ink)}
.discipline__banner img{width:100%; height:100%; object-fit:cover}

.discipline{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.discipline__body p{
  color:var(--muted); font-size:var(--step-1); line-height:1.68;
  margin-bottom:1.2rem;
}
.discipline__body p:first-child{color:var(--black); font-weight:600}
.discipline__aside h2{
  font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:1rem; margin-bottom:1.25rem;
  border-bottom:1.5px solid var(--black);
}

/* Numbered process — a genuine sequence, so the numbers carry meaning */
.steps{list-style:none; margin:0; padding:0; max-width:78ch}
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1rem clamp(1.25rem,3vw,2.5rem);
  padding:1.6rem 0; border-top:1px solid var(--line);
}
.step:first-child{border-top:0; padding-top:0}
.step__n{
  color:var(--teal-deep); font-size:.85rem; font-weight:700;
  letter-spacing:.06em; font-feature-settings:"tnum" 1;
  padding-top:.3rem;
}
.step h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem); font-weight:800; letter-spacing:-.02em}
.step p{margin-top:.5rem; color:var(--muted); line-height:1.65; max-width:62ch}

/* CTA sitting at the end of a capability list */

/* Links to the other three disciplines */
.disc-nav{display:flex; flex-wrap:wrap; align-items:baseline; gap:1rem 2rem; padding-top:1.5rem; border-top:1px solid var(--line)}
.disc-nav__label{font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.disc-nav__links{display:flex; flex-wrap:wrap; gap:.75rem 2rem}
.disc-nav__links a{
  color:var(--black); text-decoration:none; font-weight:700;
  border-bottom:1px solid var(--line); padding-bottom:.25rem;
}
.disc-nav__links a:hover{color:var(--teal-deep); border-bottom-color:var(--teal)}

.page-hero .eyebrow a{color:var(--teal); text-decoration:none}
.page-hero .eyebrow a:hover{color:#fff}

@media (max-width:900px){
  .discipline{grid-template-columns:1fr; gap:2rem}
  .discipline__banner{aspect-ratio:16/8}
}