/* ==========================================================================
   ISLAMONT
   Dark hero, light body. Two families: Cormorant Garamond for display in
   mixed case, Jost for labels and running text. One ember accent.
   ========================================================================== */

/* ---------- tokens ---------- */

:root{
  --ink:#0A1118;
  --ink-2:#121B24;
  --ink-3:#1B242E;

  --paper:#F5F2EB;
  --paper-2:#EAE5DB;

  --type:#15181C;
  --type-70:#4A5058;
  --type-50:#6E757E;
  --type-30:#9AA0A8;

  --on-ink:#FFFFFF;
  --on-ink-75:rgba(255,255,255,.76);
  --on-ink-50:rgba(255,255,255,.52);
  --on-ink-30:rgba(255,255,255,.30);

  --rule-dark:rgba(255,255,255,.14);
  --rule-light:rgba(21,24,28,.14);
  --rule-light-2:rgba(21,24,28,.08);

  --ember:#B0702F;
  --ember-light:#C8823F;

  --serif:"Cormorant Garamond",Cormorant,Georgia,"Times New Roman",serif;
  --sans:"Jost",Futura,"Century Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* `--shell` is the OUTER width of the page, gutters included, so the layout
     fills whatever screen it is on instead of sitting in a column. Image
     HEIGHT is capped separately, further down, which is what actually stops a
     short laptop screen being swallowed by one photograph. An earlier pass
     narrowed the whole shell to solve that and the result was a thin strip. */
  --shell:1760px;
  --gutter:clamp(20px,4.2vw,84px);
  --mark-h:clamp(30px,3vw,48px);

  /* Tracking was set for decoration and made the labels fragile at small
     sizes. These are metadata, so they are tracked enough to read as caps
     and no further. */
  --track-label:.14em;
  --track-nav:.12em;

  --step:clamp(64px,10.5vh,148px);  /* vertical rhythm between sections */
}

/* ---------- reset ---------- */

*,*::before,*::after{box-sizing:border-box}

/* The canvas is ink, not paper. Shortening Contact and 404 in the 2026-09-22
   rebuild left them shorter than a tall viewport, and the strip below the body
   showed the paper background as a pale band under the dark footer. Giving
   <html> its own background stops it propagating from <body>, so anything
   below the content matches the footer instead. */
html{-webkit-text-size-adjust:100%;background:var(--ink)}

body{
  margin:0;
  background:var(--paper);
  color:var(--type);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(16px,0.95vw,20px);
  line-height:1.7;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ember-light);outline-offset:3px}

/* ---------- type primitives ---------- */

.label{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(12px,.74vw,14px);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  line-height:1.5;
}
/* Metadata that is not a heading: market, role, date, status. */
.label--meta{color:var(--type-70)}
.on-ink .label--meta,.on-ink-2 .label--meta{color:var(--on-ink-75)}

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.d-xl{font-size:clamp(34px,5vw,84px)}
.d-lg{font-size:clamp(30px,3.5vw,62px)}
.d-md{font-size:clamp(24px,2.3vw,40px)}
.d-sm{font-size:clamp(21px,1.7vw,31px);line-height:1.22}

/* Measures for display type, in the element's own ems rather than `ch`,
   which resolves against the body size and wraps headings far too tight. */
.m-wide{max-width:14em}
.m-mid{max-width:11em}
.m-tight{max-width:9em}

.lede{
  font-size:clamp(17px,1.3vw,25px);
  line-height:1.6;
  max-width:44ch;
  color:var(--type-70);
}

.body{max-width:54ch;color:var(--type-70)}
.body + .body{margin-top:1.1em}

.num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---------- layout ---------- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--step)}
.section--tight{padding-block:calc(var(--step) * .62)}

.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink-2{background:var(--ink-2);color:var(--on-ink)}
.on-paper-2{background:var(--paper-2)}

.on-ink .body,.on-ink .lede,.on-ink-2 .body,.on-ink-2 .lede{color:var(--on-ink-75)}
.on-ink .stance__lede,.on-ink-2 .stance__lede{color:var(--on-ink)}
.on-ink .label,.on-ink-2 .label{color:var(--on-ink-75)}

.rule{border:0;height:1px;background:var(--rule-light);margin:0}
.on-ink .rule,.on-ink-2 .rule{background:var(--rule-dark)}

.ember{color:var(--ember)}
.on-ink .ember,.on-ink-2 .ember{color:var(--ember-light)}

/* The global grain overlay was removed on 2026-09-22. It made every surface
   read as processed rather than precise, which is the opposite of the point.
   The faint light off each dark band below stays: it is geometry, not texture. */
/* A faint light off the top of each dark band, so a tall ink section has a
   little depth instead of reading as a flat rectangle. The hero, page headers
   and footer carry their own treatments and are left alone. */
.on-ink,.on-ink-2{
  background-image:radial-gradient(130% 88% at 50% 0%,rgba(255,255,255,.038) 0%,rgba(255,255,255,0) 60%);
}

/* ==========================================================================
   masthead
   ========================================================================== */

.masthead{
  position:relative;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:clamp(20px,3.2vh,34px);
}

.brand{display:inline-flex;align-items:center;gap:calc(var(--mark-h) * .40)}
.brand__mark{width:calc(var(--mark-h) * 1.076);height:var(--mark-h);flex:none}
.brand__word{
  font-family:var(--serif);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.355em;
  font-size:calc(var(--mark-h) * .48);
  padding-left:.355em;
  white-space:nowrap;
}

.nav{display:flex;gap:clamp(18px,2.4vw,42px)}
.nav a{position:relative;padding-block:4px}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after{transform:scaleX(1)}
/* The current page is stated, not merely hinted: a permanent rule in the
   accent plus full-strength colour. This is one of brass's few jobs. */
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--ember-light);height:1px}
.masthead--paper .nav a[aria-current="page"]::after{background:var(--ember)}

/* dark masthead (over the hero, and on ink pages) */
.masthead--ink .brand{color:var(--on-ink)}
.masthead--ink .nav a{color:var(--on-ink-75)}
.masthead--ink .nav a:hover,.masthead--ink .nav a[aria-current="page"]{color:var(--on-ink)}

/* light masthead */
.masthead--paper{border-bottom:1px solid var(--rule-light-2)}
.masthead--paper .brand{color:var(--type)}
.masthead--paper .nav a{color:var(--type-70)}
.masthead--paper .nav a:hover,.masthead--paper .nav a[aria-current="page"]{color:var(--type)}

.menu-btn{display:none;letter-spacing:var(--track-nav)}

.overlay{
  position:fixed;inset:0;z-index:60;background:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,3.2vh,30px);
  opacity:0;pointer-events:none;transition:opacity .34s ease;
}
.overlay.open{opacity:1;pointer-events:auto}
.overlay a{
  font-family:var(--serif);font-weight:500;text-transform:uppercase;
  letter-spacing:.3em;font-size:clamp(19px,5vw,30px);
  color:var(--on-ink-75);padding-left:.3em;
}
.overlay a:hover{color:var(--on-ink)}
.overlay__close{position:absolute;top:26px;right:var(--gutter);color:var(--on-ink-50)}

/* ==========================================================================
   hero, home
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--ink);
  color:var(--on-ink);
  overflow:hidden;
  isolation:isolate;
}

.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  max-width:none;object-fit:cover;object-position:50% 56%;
}
.hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(6,9,13,.42) 0%,rgba(6,9,13,.06) 26%,rgba(6,9,13,0) 42%),
    linear-gradient(to top,rgba(6,9,13,.34) 0%,rgba(6,9,13,0) 30%);
}

.hero__inner{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;
  width:100%;max-width:var(--shell);
  margin-inline:auto;padding-inline:var(--gutter);
  padding-bottom:clamp(26px,4.4vh,52px);
}

.hero__statement{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(40px,10vh,110px);
}

.hero__head{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,4.2vw,76px);
  line-height:1.14;letter-spacing:-.01em;
  color:var(--on-ink);
  max-width:12.5em;      /* measured in display ems, not body ems */
}
/* Each .l is an authored line. Let it break only when the viewport is too
   narrow to hold it, rather than re-wrapping the whole headline. */
.hero__head .l{display:block}
@media (min-width:600px){.hero__head .l{white-space:nowrap}}

/* The brass rule under the headline was removed on 2026-09-22. The horizon
   in the photograph and the disciplines rule already break the field twice. */

.hero__sub{
  margin-top:clamp(13px,1.8vh,20px);
  color:var(--on-ink-75);
  max-width:34ch;
  font-size:clamp(16px,1.15vw,23px);
  line-height:1.6;
}

.disciplines{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,1.8vw,30px);
  color:var(--on-ink-50);
  border-top:1px solid var(--rule-dark);
  padding-top:clamp(16px,2.4vh,24px);
}
.disciplines__sep{color:var(--on-ink-30)}
/* On a narrow phone the line has to wrap, and a wrapped run of slashes
   leaves a stray separator at the end of the first line. Two even columns
   with no slashes read as one deliberate block instead. */
@media (max-width:560px){
  .disciplines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
  .disciplines__sep{display:none}
}

/* ==========================================================================
   page header (inner pages)
   ========================================================================== */

.pagehead{position:relative;background:var(--ink);color:var(--on-ink);isolation:isolate}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover}
.pagehead__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(6,9,13,.82) 0%,rgba(6,9,13,.52) 46%,rgba(6,9,13,.26) 100%),
             linear-gradient(to bottom,rgba(6,9,13,.54) 0%,rgba(6,9,13,0) 34%);
}
.pagehead__inner{position:relative;z-index:1}
.pagehead__body{padding-block:clamp(56px,11vh,170px) clamp(36px,6vh,96px)}
/* Display measures are set in the heading's own ems. A `ch` here would be
   computed against the 16px body size and crush the headline into a column. */
.pagehead__body h1{max-width:11em}
.pagehead__eyebrow{color:var(--on-ink-50);margin-bottom:clamp(14px,2vh,22px)}
.pagehead__sub{margin-top:clamp(14px,2vh,22px);color:var(--on-ink-75);max-width:40ch}
.pagehead__credit{
  position:absolute;right:var(--gutter);bottom:clamp(14px,2.4vh,22px);z-index:1;
  color:var(--on-ink-50);text-align:right;
}

/* A shallow header band. The photograph is context, not the page's identity,
   so it is given a fixed slice of the viewport and the type sits on it. */
.pagehead--band{min-height:clamp(300px,38vh,540px);display:flex;flex-direction:column}
.pagehead--band .pagehead__inner{flex:1;display:flex;flex-direction:column}
.pagehead--band .pagehead__inner > .shell{margin-top:auto}
.pagehead--band .pagehead__body{padding-block:clamp(26px,4vh,46px) clamp(24px,3.6vh,44px)}
.pagehead--band .pagehead__sub{margin-top:clamp(10px,1.4vh,15px)}
.pagehead--band .pagehead__eyebrow{margin-bottom:clamp(10px,1.4vh,15px)}

/* An editorial band inside a page: one photograph, capped short, doing the
   job of evidence rather than of a hero. */
.editorial{position:relative;overflow:hidden;background:var(--ink)}
.editorial img{width:100%;height:clamp(220px,34vh,460px);object-fit:cover}
.editorial__credit{
  position:absolute;right:var(--gutter);bottom:clamp(12px,2vh,18px);
  color:var(--on-ink-75);text-align:right;
}
@media (max-width:760px){
  .editorial__credit{position:static;text-align:left;color:var(--type-50);padding-top:10px}
}

/* A quiet local index below a page header. It never replaces the masthead
   and it never makes the masthead sticky. On a phone it is ordinary links. */
.bar{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--rule-light);
}
.bar__in{display:flex;gap:clamp(16px,2vw,34px);overflow-x:auto;scrollbar-width:none}
.bar__in::-webkit-scrollbar{display:none}
.bar a{
  white-space:nowrap;padding-block:clamp(9px,1.2vh,13px);
  color:var(--type-50);border-bottom:1px solid transparent;margin-bottom:-1px;
}
.bar a:hover{color:var(--type)}
@media (max-width:760px){
  .bar{position:static}
  .bar__in{flex-wrap:wrap;gap:8px 20px}
}

/* type-only header. With no photograph the headline carries the band, so it
   steps up a size rather than sitting small in a large dark rectangle. */
.pagehead--plain{background:var(--ink)}
.pagehead--plain .pagehead__body{padding-block:clamp(60px,12vh,168px) clamp(44px,7vh,104px)}
.pagehead--plain .pagehead__body h1{font-size:clamp(34px,5.2vw,72px);max-width:10em}

/* ==========================================================================
   home, the firm block
   ========================================================================== */

/* Label, lede and body are three siblings of one grid, and that grid is
   the SAME columns as the figures row directly beneath: two halves from
   900px while the four figures sit two by two, four equal columns from
   1100px when they run four across. The lede takes the first column, the
   running text the rest, and the text's first letter sits exactly over the
   second figure's numeral. One
   grid, carried through two sections, is what makes the block read as
   composed rather than as a headline floating beside a paragraph. The text
   runs at reading size, a step above the body elsewhere, because this is the
   firm's statement and it is read, not scanned. */
.stance{display:grid;grid-template-columns:minmax(0,1fr)}
.stance__label{grid-column:1 / -1}
.stance__lede{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(23px,2.35vw,42px);
  line-height:1.24;letter-spacing:-.005em;
  color:var(--type);
  margin-top:clamp(14px,2vh,20px);
  max-width:16em;
  text-wrap:balance;
}
.stance__body{margin-top:clamp(28px,4.4vh,40px)}
/* 33em holds the line near 70 characters wherever the text runs in a
   single column. Uncapped, a portrait tablet ran it the full shell width,
   99 characters a line at 768 and about 120 at 899. A phone column is
   narrower than the cap, and from 1100 the grid sets the measure instead. */
.stance__body .body{font-size:clamp(17px,1.05vw,21px);line-height:1.65;max-width:33em;text-wrap:pretty}
.stance__body .body + .body{margin-top:1.2em}
@media (min-width:900px){
  .stance{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .stance__lede{grid-column:1;padding-right:clamp(18px,2.2vw,40px)}
  /* the same top margin as the lede, so their first lines sit level; the
     left padding is the figure cell's, so the two columns share an edge */
  .stance__body{
    grid-column:2 / -1;
    padding-left:clamp(18px,2.2vw,40px);
    margin-top:clamp(14px,2vh,20px);padding-top:.15em;
  }
}
/* Four across, the text spans the second and third columns exactly and is
   inset on the right by the same padding as a figure cell, so its right
   edge sits over the third figure's text edge. Spanning to the shell edge
   under a 74ch cap left the edge stopping at a different point inside the
   fourth column at every width, at about 83 characters a line, and made
   the text jump from 472px to 720px wide at exactly 1100. The grid now
   sets the measure: about 55 characters a line at 1100, about 70 from
   1366 to 2560. */
@media (min-width:1100px){
  .stance{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stance__body{grid-column:2 / 4;padding-right:clamp(18px,2.2vw,40px)}
  .stance__body .body{max-width:none}
}

/* figures row */
/* Three figures. Stacked on a phone, three across from 640 up, which gives
   each label a wide enough column that none of them wrap awkwardly. */
.figures{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--rule-dark);
}
@media (min-width:640px){.figures{grid-template-columns:repeat(3,minmax(0,1fr))}}

.figure{
  padding:clamp(20px,2.8vh,30px) 0;
  border-bottom:1px solid var(--rule-dark);
}
/* Three across: each cell is padded on BOTH sides of its divider, so a
   numeral never sits flush against the rule to its left. The first cell
   keeps the page's left edge and the last keeps the right edge. */
@media (min-width:640px){
  .figure{
    padding-inline:clamp(18px,2.2vw,40px);
    border-bottom:0;border-right:1px solid var(--rule-dark);
  }
  .figure:first-child{padding-left:0}
  .figure:last-child{border-right:0;padding-right:0}
}
.figure__n{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,3.2vw,60px);line-height:1;
  color:var(--on-ink);
}
/* The currency mark and the unit are set identically, one size and one
   baseline, so "$60M+" reads as a single figure with two quiet flanks. */
.figure__n sup,.figure__n .pre{font-size:.46em;vertical-align:super;line-height:0}
.figure__n sup{color:var(--ember-light);margin-left:.06em}
.figure__n .pre{color:var(--on-ink-50);margin-right:.06em}
/* No fixed measure on the label: the cell's own width decides when it
   wraps, and text-wrap:balance keeps a two-line label even. A 30ch cap here
   was what forced "Real estate owned and operated" onto two lines in a
   cell with room for one. */
.figure__l{margin-top:10px;color:var(--on-ink-75);text-wrap:balance}
/* Four figures, home page: the record plus the 2027 revenue projection.
   Two by two from 640, so no label is squeezed into a quarter of a tablet;
   four across from 1100, where each cell still holds "150,000+" at full
   size. The firm block above follows the same columns at each width. */
@media (min-width:640px) and (max-width:1099.98px){
  .figures--four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figures--four .figure:nth-child(odd){padding-left:0}
  .figures--four .figure:nth-child(even){border-right:0;padding-right:0}
  .figures--four .figure:nth-child(-n+2){border-bottom:1px solid var(--rule-dark)}
}
@media (min-width:1100px){.figures--four{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* A shorter band where the figures are a record rather than the argument. */
.figures--tight .figure{padding-block:clamp(15px,2vh,22px)}
.figures--tight .figure__n{font-size:clamp(29px,2.7vw,50px)}

/* method and people, firm page */

.method{margin-top:clamp(16px,2.2vh,26px);border-top:1px solid var(--rule-light);
  counter-reset:step}

/* leadership portraits */
.people{
  display:grid;gap:clamp(26px,3vw,52px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(26px,3.6vh,48px);
}
@media (min-width:640px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person{margin:0}
/* A headshot stays a portrait. Capping the WIDTH is right here, unlike the
   property frames: a face does not need to fill its column, and a fixed
   height would crop three portraits into three landscapes. */
.person__frame{
  display:block;position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:4/5;
  max-width:min(100%,clamp(240px,23vw,360px));
}
.person__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.person__name{margin-top:clamp(14px,1.8vh,20px)}
.person__role{margin-top:7px;color:var(--type-50)}

/* A thin sequence marker in front of each step, so the four rows read as an
   operating method in order rather than as four services on a menu. */
.method__step{
  display:grid;gap:4px clamp(18px,2.6vw,40px);
  grid-template-columns:auto minmax(0,1fr);
  padding-block:clamp(16px,2.3vh,24px);
  border-bottom:1px solid var(--rule-light-2);
  counter-increment:step;
}
.method__step::before{
  content:counter(step,decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--sans);font-weight:500;
  font-size:clamp(12px,.74vw,14px);letter-spacing:var(--track-label);
  color:var(--type-30);
  padding-top:.55em;min-width:2.4em;
}
@media (min-width:760px){
  .method__step{grid-template-columns:auto minmax(0,3fr) minmax(0,9fr);align-items:baseline}
  .method__step::before{grid-row:auto}
}
.method__note{max-width:56ch}

/* ==========================================================================
   snapshots, the small index on the home page
   ========================================================================== */

/* Four small tiles. Landscape rather than portrait, because an aerial cropped
   into a narrow portrait loses the sweep that makes it worth showing, but kept
   modest: this is an index into the portfolio, not the portfolio. */
.snaps{display:grid;gap:clamp(18px,2vw,30px);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.snaps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.snaps{grid-template-columns:repeat(4,minmax(0,1fr))}}

.snap{display:block;position:relative}
.snap__frame{
  display:block;
  position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:3/2;
}
@media (min-width:560px){
  .snap__frame{aspect-ratio:auto;height:clamp(165px,24vh,320px)}
}
.snap__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1),filter .5s ease;
}
.snap:hover .snap__frame img{transform:scale(1.035)}
/* The tiles are small, so the name steps down from .d-sm to match them. */
.snap__name{margin-top:clamp(11px,1.4vh,15px);font-size:clamp(18px,1.42vw,21px)}
.snap__meta{margin-top:5px;color:var(--type-50)}
.on-ink .snap__meta,.on-ink-2 .snap__meta{color:var(--on-ink-50)}
.snap__frame--tall{aspect-ratio:3/4}

/* ==========================================================================
   home index, three stories rather than four equal tiles
   ========================================================================== */

.idx{
  display:grid;gap:clamp(18px,2vw,30px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(22px,3.4vh,40px);
}
@media (min-width:560px){.idx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.idx{grid-template-columns:repeat(12,minmax(0,1fr))}}

.idx__item{display:block}
@media (min-width:560px) and (max-width:999px){
  /* The lead story keeps the full width when only two fit across. */
  .idx__item[data-span="6"]{grid-column:span 2}
}
@media (min-width:1000px){
  .idx__item[data-span="6"]{grid-column:span 6}
  .idx__item[data-span="3"]{grid-column:span 3}
}
/* These tiles keep a ratio at every width rather than taking an explicit
   height from the tablet breakpoint up, which is what the large property
   frames do. A height in vh does not track the column width, so between
   1000 and 1200px the four tiles narrowed into near-squares and cropped the
   aerials toward portrait. The tiles are small, so the short-viewport problem
   that the explicit height solves elsewhere does not arise here. */
.idx__frame{
  display:block;position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:16/10;
}
.idx__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.idx__item:hover .idx__frame img{transform:scale(1.03)}
.idx__name{margin-top:clamp(12px,1.5vh,16px);font-size:clamp(19px,1.5vw,25px)}
.idx__where{margin-top:5px;color:var(--type-50);text-transform:none;letter-spacing:0;
  font-size:clamp(14px,1vw,16px)}
.idx__disc{margin-top:9px;color:var(--type-70)}

/* ==========================================================================
   portfolio
   ========================================================================== */

.group{padding-top:clamp(48px,7.4vh,96px)}
.group__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:clamp(14px,2vh,20px);
  border-bottom:1px solid var(--rule-light);
}
.group__place{color:var(--type)}

/* Selected work. One consistent 16:10 image, two across at desktop, text
   directly beneath. The old .prop card alternated left and right down the
   page, which read as agency choreography and made every asset look equally
   important. Four properties carry an image now; the rest are register rows. */
.feat{
  display:grid;gap:clamp(26px,3vw,56px) clamp(20px,2.4vw,44px);
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(8px,1vh,13px);
}
@media (min-width:900px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}

.feat__item{display:block;width:100%;text-align:left}
.feat__frame{
  display:block;position:relative;overflow:hidden;background:var(--paper-2);
  aspect-ratio:16/10;
}
.feat__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.feat__item:hover .feat__frame img{transform:scale(1.03)}
.feat__name{display:block;margin-top:clamp(13px,1.7vh,18px)}
.feat__where{display:block;margin-top:6px;color:var(--type-50);
  text-transform:none;letter-spacing:0;font-size:clamp(14px,1.02vw,16px)}
.feat__stats{
  display:block;margin-top:clamp(11px,1.5vh,15px);
  padding-top:clamp(10px,1.4vh,14px);
  border-top:1px solid var(--rule-light-2);
  color:var(--type-70);
  font-size:clamp(14px,1.02vw,16px);letter-spacing:0;text-transform:none;
}

/* The register: every other asset, one line each, grouped by place. Dense
   enough to scan, and each row still opens the same full gallery. */
.row{
  display:grid;gap:6px clamp(18px,2.4vw,44px);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(15px,2vh,22px);
  border-bottom:1px solid var(--rule-light-2);
  width:100%;text-align:left;
  transition:background .2s ease;
}
@media (min-width:760px){
  .row{
    grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,6fr);
    align-items:baseline;
  }
}
.row__name{display:block;color:var(--type);font-size:clamp(19px,1.4vw,24px)}
.row__addr{display:block;color:var(--type-50);text-transform:none;letter-spacing:0;
  font-size:clamp(14px,1.02vw,16px)}
.row__stats{display:block;color:var(--type-70);text-transform:none;letter-spacing:0;
  font-size:clamp(14px,1.02vw,16px)}
.row[data-gallery]:hover{background:var(--paper-2)}
.row[data-gallery]:hover .row__name{color:var(--type)}

/* ==========================================================================
   projects
   ========================================================================== */

.project{padding-block:clamp(32px,5vh,64px);border-bottom:1px solid var(--rule-light)}
.project:last-of-type{border-bottom:0}

.project__frame{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:16/9}
@media (min-width:760px){
  .project__frame{aspect-ratio:auto;height:clamp(300px,50vh,700px)}
}

/* Parlor: a measured two-column entry, not a second full-width hero. */
.project--split{display:grid;gap:clamp(20px,2.8vw,52px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .project--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
}
.project--split .project__frame{margin-top:0}
@media (min-width:760px){
  .project--split .project__frame{height:clamp(260px,36vh,440px)}
}
.project--split .project__body{display:block;margin-top:0}
/* Three strip images under the lead, one row, so the set does not leave a
   single orphan on a second line. */
.project--split .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:760px){
  .project--split .strip button{height:clamp(96px,13vh,150px)}
}

/* OfficePort: compact text and gallery, because the photographs are small
   and enlarging them would be a lie about the material. */
.project--compact .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){
  .project--compact .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .project--compact .strip button{height:clamp(110px,15vh,170px)}
}
.project__frame img{width:100%;height:100%;object-fit:cover}
.project__tag{
  position:absolute;left:0;bottom:0;
  background:rgba(10,17,24,.74);color:var(--on-ink-75);padding:8px 14px;
}

.project__body{
  display:grid;gap:clamp(18px,2.6vw,56px);grid-template-columns:minmax(0,1fr);
  margin-top:clamp(22px,3.2vh,38px);
}
@media (min-width:880px){
  .project__body{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
}

.facts{border-top:1px solid var(--rule-light);margin-top:clamp(18px,2.6vh,26px)}
.facts div{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;
  padding-block:11px;border-bottom:1px solid var(--rule-light-2);
}
.facts dt{color:var(--type-50)}
.facts dd{margin:0;color:var(--type)}

.strip{display:grid;gap:clamp(10px,1.2vw,16px);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(20px,3vh,32px)}
@media (min-width:760px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.strip button{position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:3/2;width:100%}
@media (min-width:760px){
  .strip button{aspect-ratio:auto;height:clamp(150px,21vh,290px)}
}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
/* In the two-column phone layout an odd last image would sit alone at half
   width. It takes the full row instead. */
@media (max-width:759px){
  .strip > :last-child:nth-child(odd){grid-column:1 / -1}
  /* the Parlor strip stays three across on a phone, so its rows are full */
  .project--split .strip > :last-child:nth-child(odd){grid-column:auto}
}
.strip button:hover img{transform:scale(1.04)}

.pending{
  border:1px dashed var(--rule-light);
  padding:clamp(22px,3.4vh,34px);
  color:var(--type-50);
}

/* ==========================================================================
   contact
   ========================================================================== */

/* Two offices, side by side and given room, now that the prose block that
   repeated them in sentences is gone. */
.contact{
  display:grid;gap:clamp(30px,4vw,72px);
  grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--rule-dark);
}
@media (min-width:820px){.contact{grid-template-columns:repeat(2,minmax(0,1fr))}}

.office{padding-top:clamp(22px,3.4vh,38px)}
@media (min-width:820px){
  .office + .office{border-left:1px solid var(--rule-dark);padding-left:clamp(30px,4vw,72px)}
}
.office__name{color:var(--on-ink);font-size:clamp(24px,2.1vw,36px)}
.office__lines{margin-top:clamp(12px,1.8vh,18px);color:var(--on-ink-75);font-style:normal;
  font-size:clamp(16px,1.05vw,19px);line-height:1.75}

/* ==========================================================================
   footer
   ========================================================================== */

.foot{background:var(--ink);color:var(--on-ink-75)}
.foot__top{
  display:flex;flex-wrap:wrap;gap:24px clamp(24px,4vw,64px);
  align-items:center;justify-content:space-between;
  padding-block:clamp(30px,4.6vh,54px);
  border-bottom:1px solid var(--rule-dark);
}
.foot__nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,34px)}
.foot__nav a{color:var(--on-ink-50)}
.foot__nav a:hover{color:var(--on-ink)}
.foot__bottom{
  display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;
  padding-block:clamp(20px,3vh,30px);
  color:var(--on-ink-30);
}
.foot__disclaim{max-width:62ch}

/* ==========================================================================
   lightbox
   ========================================================================== */

.lb{
  position:fixed;inset:0;z-index:80;background:rgba(6,9,13,.97);
  display:none;flex-direction:column;
}
.lb.open{display:flex}
.lb__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(14px,2.4vh,22px) var(--gutter);
  color:var(--on-ink-50);
}
.lb__stage{
  flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(12px,5vw,86px);min-height:0;
}
.lb__stage img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.lb__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:clamp(40px,4.4vw,56px);height:clamp(40px,4.4vw,56px);
  display:flex;align-items:center;justify-content:center;
  color:var(--on-ink-75);font-size:26px;line-height:1;
  background:rgba(10,17,24,.55);
}
.lb__btn:hover{color:var(--on-ink)}
.lb__prev{left:clamp(6px,1.4vw,22px)}
.lb__next{right:clamp(6px,1.4vw,22px)}
.lb__cap{
  padding:clamp(14px,2.4vh,22px) var(--gutter) clamp(20px,3.4vh,32px);
  border-top:1px solid var(--rule-dark);
  display:grid;gap:6px clamp(24px,4vw,64px);
}
@media (min-width:880px){.lb__cap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.lb__name{color:var(--on-ink)}
.lb__meta{color:var(--on-ink-50);margin-top:6px}
.lb__desc{color:var(--on-ink-75);max-width:62ch}

/* ==========================================================================
   motion and responsive
   ========================================================================== */

.rise{opacity:0;transform:translateY(14px)}
.rise.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rise.in.d1{transition-delay:.08s}
.rise.in.d2{transition-delay:.16s}
.rise.in.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
}

@media (max-width:760px){
  .nav{display:none}
  .menu-btn{display:inline-block}
  .masthead--ink .menu-btn{color:var(--on-ink-75)}
  .hero__statement{max-width:none}
  .pagehead__body,.pagehead__credit{max-width:none}
  .pagehead__credit{position:static;text-align:left;padding-bottom:clamp(16px,3vh,24px)}
}

/* ==========================================================================
   partner portal sign in
   Its own surface: no masthead, no nav, no footer. One card on ink.
   ========================================================================== */

.portal{
  min-height:100svh;
  display:grid;place-items:center;
  background:var(--ink);color:var(--on-ink);
  padding:clamp(24px,6vw,72px);
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 62%);
}
.portal__card{width:100%;max-width:clamp(300px,34rem,480px)}
.portal__brand{display:inline-flex;color:var(--on-ink);margin-bottom:clamp(26px,4vh,44px)}
.portal__brand .brand__mark{width:calc(var(--mark-h) * 1.076);height:var(--mark-h)}
.portal__title{color:var(--on-ink)}
.portal__lede{color:var(--on-ink-75);margin-top:clamp(10px,1.4vh,14px);max-width:34ch}

.portal__form{
  margin-top:clamp(26px,4vh,40px);
  border-top:1px solid var(--rule-dark);
  padding-top:clamp(22px,3vh,32px);
  display:grid;gap:10px;
}
.portal__form label{color:var(--on-ink-50)}
.portal__form input{
  width:100%;
  font:inherit;color:var(--on-ink);
  background:rgba(255,255,255,.04);
  border:1px solid var(--rule-dark);
  padding:14px 16px;
}
.portal__form input:focus-visible{outline:2px solid var(--ember-light);outline-offset:2px}
.portal__btn{
  justify-content:center;margin-top:8px;
  border-color:var(--ember-soft);color:var(--on-ink);
  padding:14px 22px;
}
.portal__btn:hover{border-color:var(--ember-light)}
.portal__help{color:var(--on-ink-30);margin-top:4px}
.portal__notice{
  color:var(--ember-light);
  border-left:2px solid var(--ember-soft);
  padding-left:12px;margin-top:10px;
  max-width:40ch;line-height:1.6;
}
.portal__back{margin-top:clamp(26px,4vh,40px);color:var(--on-ink-50)}
.portal__back a{border-bottom:1px solid currentColor;padding-bottom:3px}
.portal__back a:hover{color:var(--on-ink)}