/* In-Line AGM — portfolio + project page concept (2026-09-26).
   Loaded after inline-agm.css (the approved home study) and uses its tokens.
   Built from GPT study 05 (clients/in-line-agm/reference/design-brief/gpt-study-05/kit/projects.css,
   atlas-case.css) as guidance; the differences and their reasons are in that folder's ANALYSIS.md.
   Type scale, on purpose: 11 labels · 13 small · 15 body · 20–26 lede · 28 card titles · 40 section · 60/76 titles.
   The study's 9–10px labels are raised to 11px here; its smallest size landed on desktop. */

/* ---------- header (study 05) ---------- */
/* Sticky header (Kire, 2026-09-26): the logo rests in black and white — the site's own resting treatment —
   and comes to color once the page scrolls and the header sticks. */
#agm-concept.agm-portfolio-page .agm-header{position:sticky;inset:auto;top:0;z-index:20;justify-content:space-between;color:var(--agm-ink);background:var(--agm-paper);padding:21px var(--agm-content-gutter);border-bottom:1px solid var(--agm-line);pointer-events:auto;transition:padding .3s ease,box-shadow .3s ease}
/* The study clips #agm-concept on both axes, which stops a sticky child from sticking here. Clip only x:
   still no sideways scroll from hover scaling, and the header can stick. */
#agm-concept.agm-portfolio-page{overflow:visible;overflow-x:clip}
#agm-concept .agm-logo img{filter:grayscale(1) brightness(.6) contrast(1.5);transition:filter .5s ease,height .3s ease}
#agm-concept .agm-header.is-stuck{padding-top:12px;padding-bottom:12px;box-shadow:0 8px 24px #1b1b1914}
#agm-concept .agm-header.is-stuck .agm-logo img{filter:none}
#agm-concept .agm-header.is-stuck .agm-logo-mark{height:40px}
#agm-concept .agm-header.is-stuck .agm-logo-type{height:36px}
#agm-concept .agm-logo{display:flex;align-items:center;gap:12px;min-height:48px}
#agm-concept .agm-logo-mark{width:auto;height:48px;object-fit:contain}
#agm-concept .agm-logo-type{width:auto;height:44px;object-fit:contain}
#agm-concept.agm-portfolio-page .agm-menu{color:var(--agm-ink);font-size:11px;gap:20px}
#agm-concept.agm-portfolio-page .agm-menu-lines{width:29px;gap:6px}
#agm-concept.agm-portfolio-page .agm-menu[aria-expanded='true'] .agm-menu-lines span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#agm-concept.agm-portfolio-page .agm-menu[aria-expanded='true'] .agm-menu-lines span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#agm-concept.agm-portfolio-page .agm-nav{right:var(--agm-content-gutter);top:calc(100% + 1px);z-index:6}
#agm-concept.agm-portfolio-page .agm-nav a[aria-current='page']{color:#b9bcb4}
/* Headings only — never .agm-label headings, and no color here: the contact band's white h2 sits at the
   same specificity, and a color set here turned "Bring the drawings." dark-on-dark (caught in render). */
#agm-concept.agm-portfolio-page :is(h1,h2,h3):not(.agm-label){font-weight:400;text-shadow:none;white-space:normal;padding:0}
#agm-concept.agm-portfolio-page em{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}
#agm-concept :focus-visible{outline:2px solid var(--agm-ink);outline-offset:3px}
/* Ink set per heading, on the light ground only. The home study styles every h1 white (its title sits on a
   photograph), so without this the portfolio title computed white on paper — caught by the QA contrast pass. */
#agm-concept .agm-work-opening h1,#agm-concept .agm-case-heading h1,#agm-concept .agm-work-caption h3,#agm-concept .agm-index-heading h2,#agm-concept .agm-scope-heading h2,#agm-concept .agm-next-project strong{color:var(--agm-ink)}

/* ---------- portfolio intro ---------- */
#agm-concept .agm-work-intro{padding:66px var(--agm-content-gutter) 56px}
#agm-concept .agm-work-intro>.agm-label{color:var(--agm-muted)}
/* Heading left, a short note on the right edge (max 325px). */
#agm-concept .agm-work-opening{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(230px,1fr);gap:48px;align-items:end;margin-top:24px}
#agm-concept .agm-work-opening h1{font:400 clamp(38px,4.3vw,60px)/1.06 Archivo,Arial,sans-serif;letter-spacing:-.045em}
#agm-concept .agm-work-opening h1 em{letter-spacing:-.05em}
#agm-concept .agm-work-introduction{justify-self:end;width:100%;max-width:325px;padding-bottom:4px;font-size:15px;line-height:1.7;color:var(--agm-muted)}
#agm-concept .agm-work-introduction>span{display:block;margin-top:19px;font-size:11px;text-transform:uppercase;letter-spacing:.13em}

/* ---------- section bar ---------- */
#agm-concept .agm-section-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--agm-line);padding:14px 0 26px}
#agm-concept .agm-section-bar .agm-label{color:var(--agm-muted)}
#agm-concept .agm-section-bar-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px}
#agm-concept .agm-section-bar-link:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- selected work (the study's staggered six) ---------- */
#agm-concept .agm-work-collection{padding:0 var(--agm-content-gutter) 84px}
#agm-concept .agm-work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:70px 44px;align-items:end}
#agm-concept .agm-work-card{grid-column:span 6;display:block;min-width:0}
#agm-concept .agm-work-card:nth-child(1),#agm-concept .agm-work-card:nth-child(6){grid-column:span 12}
#agm-concept .agm-work-card:nth-child(2),#agm-concept .agm-work-card:nth-child(5){grid-column:span 7}
#agm-concept .agm-work-card:nth-child(3),#agm-concept .agm-work-card:nth-child(4){grid-column:span 5}
/* Stagger: each pair ENDS on one line (cards align to the bottom of the row) and starts 84px apart,
   set by the image ratios below at the 1120px content width. The study's first pair ended 8px apart,
   which reads as an error rather than a choice. */
#agm-concept .agm-work-image{position:relative;overflow:hidden;background:var(--agm-pale);aspect-ratio:1.06}
#agm-concept .agm-work-card:nth-child(1) .agm-work-image{aspect-ratio:1.85}
#agm-concept .agm-work-card:nth-child(2) .agm-work-image{aspect-ratio:1.25}
#agm-concept .agm-work-card:nth-child(3) .agm-work-image{aspect-ratio:1.04}
#agm-concept .agm-work-card:nth-child(4) .agm-work-image{aspect-ratio:.96}
#agm-concept .agm-work-card:nth-child(5) .agm-work-image{aspect-ratio:1.69}
#agm-concept .agm-work-card:nth-child(6) .agm-work-image{aspect-ratio:2.1}
#agm-concept .agm-work-image img{width:100%;height:100%;object-position:var(--crop,center);filter:grayscale(1);transition:filter .65s ease,transform .8s ease}
#agm-concept .agm-work-caption{padding-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
#agm-concept .agm-work-caption .agm-label{grid-column:1;color:var(--agm-muted)}
#agm-concept .agm-work-caption h3{grid-column:1;font-size:clamp(22px,2vw,28px);line-height:1.25;letter-spacing:-.035em}
#agm-concept .agm-work-caption>p:not(.agm-label){grid-column:1;font-size:13px;color:var(--agm-muted);line-height:1.6}
#agm-concept .agm-card-action{grid-column:2;grid-row:1/4;align-self:center;display:flex;align-items:center;gap:18px;font-size:13px}
#agm-concept .agm-card-action .agm-arrow{font-size:26px;transition:transform .3s ease}
#agm-concept .agm-work-card:not(:first-child) .agm-card-action>span:first-child{display:none}
#agm-concept .agm-work-card:focus-visible .agm-work-image img{filter:grayscale(0)}

/* ---------- the full record: index ---------- */
#agm-concept .agm-index{position:relative;padding:0 var(--agm-content-gutter) 84px}
#agm-concept .agm-index-heading{border-top:1px solid var(--agm-line);padding:84px 0 42px}
#agm-concept .agm-index-heading .agm-label{color:var(--agm-muted);margin-bottom:24px}
#agm-concept .agm-index-heading h2{font-size:clamp(30px,3vw,42px);line-height:1.12;letter-spacing:-.04em}
#agm-concept .agm-index-heading h2 em{letter-spacing:-.04em}
#agm-concept .agm-collection-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;border-top:1px solid var(--agm-line);border-bottom:1px solid var(--agm-line);padding:6px 0}
#agm-concept .agm-project-filters,#agm-concept .agm-view-toggle{display:flex;flex-wrap:wrap;column-gap:26px;row-gap:2px}
#agm-concept .agm-project-filters button,#agm-concept .agm-view-toggle button{background:none;border:0;border-bottom:1px solid transparent;padding:8px 0;min-height:44px;font-size:13px;color:var(--agm-muted)}
#agm-concept .agm-project-filters button[aria-pressed='true'],#agm-concept .agm-view-toggle button[aria-pressed='true']{color:var(--agm-ink);border-bottom-color:var(--agm-ink)}
#agm-concept .agm-project-filters button span{font-size:11px;margin-left:5px;vertical-align:super;color:var(--agm-muted)}
#agm-concept .agm-project-filters button:hover,#agm-concept .agm-view-toggle button:hover{color:var(--agm-ink)}
#agm-concept .agm-index-count{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--agm-muted);padding:18px 0 6px}
#agm-concept .agm-index-list{list-style:none;margin:0;padding:0}
#agm-concept .agm-index-list>li[hidden]{display:none}

/* list view: one row per project */
#agm-concept .agm-index-list[data-view='list'] .agm-row{display:grid;grid-template-columns:48px minmax(0,2.3fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 28px;gap:20px;align-items:baseline;min-height:64px;padding:18px 0 16px;border-bottom:1px solid var(--agm-line);font-size:15px;transition:color .35s ease}
#agm-concept .agm-index-list[data-view='list'] .agm-row-thumb{display:none}
#agm-concept .agm-row-num,#agm-concept .agm-row-count{font-size:11px;letter-spacing:.08em;color:var(--agm-muted);font-variant-numeric:tabular-nums}
#agm-concept .agm-row-name{font-size:clamp(18px,1.6vw,22px);letter-spacing:-.025em;line-height:1.3;transition:transform .35s ease}
#agm-concept .agm-row-city,#agm-concept .agm-row-state{color:var(--agm-muted);font-size:13px}
#agm-concept .agm-index-list[data-view='list'] .agm-row .agm-arrow{justify-self:end;transition:transform .3s ease}
#agm-concept .agm-index-list[data-view='list'] .agm-row:focus-visible{outline-offset:-2px}
/* Hover: the list dims and the row under the pointer comes forward. */
@media(hover:hover){
  #agm-concept .agm-index-list[data-view='list']:hover .agm-row{color:#9a9a95}
  #agm-concept .agm-index-list[data-view='list']:hover .agm-row:hover{color:var(--agm-ink)}
  #agm-concept .agm-index-list[data-view='list'] .agm-row:hover .agm-row-name{transform:translateX(10px)}
  #agm-concept .agm-index-list[data-view='list'] .agm-row:hover .agm-arrow{transform:translate(2px,-2px)}
}
/* The floating photograph that follows the pointer over the index (desktop, pointer only). */
#agm-concept .agm-preview{position:fixed;top:0;left:0;z-index:4;width:340px;aspect-ratio:1.5;pointer-events:none;opacity:0;transform:translate3d(-9999px,0,0);transition:opacity .25s ease;background:var(--agm-pale);box-shadow:0 18px 40px #0000002e}
#agm-concept .agm-preview.is-on{opacity:1}
#agm-concept .agm-preview img{width:100%;height:100%;object-fit:cover}

/* grid view: every project as a photograph */
#agm-concept .agm-index-list[data-view='grid']{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px;padding-top:18px}
#agm-concept .agm-index-list[data-view='grid'] .agm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
#agm-concept .agm-index-list[data-view='grid'] .agm-row-thumb{grid-column:1/-1;display:block;overflow:hidden;background:var(--agm-pale);margin-bottom:12px}
#agm-concept .agm-index-list[data-view='grid'] .agm-row-thumb img{width:100%;height:auto;aspect-ratio:1;filter:grayscale(1);transition:filter .6s ease,transform .8s ease}
#agm-concept .agm-index-list[data-view='grid'] .agm-row-num{grid-column:1;grid-row:2}
#agm-concept .agm-index-list[data-view='grid'] .agm-row-name{grid-column:1;font-size:18px}
#agm-concept .agm-index-list[data-view='grid'] .agm-row-city{grid-column:1}
#agm-concept .agm-index-list[data-view='grid'] .agm-row-state,#agm-concept .agm-index-list[data-view='grid'] .agm-row-count{display:none}
#agm-concept .agm-index-list[data-view='grid'] .agm-row .agm-arrow{grid-column:2;grid-row:2/5;align-self:center}
#agm-concept .agm-index-list[data-view='grid'] .agm-row:focus-visible .agm-row-thumb img{filter:grayscale(0)}

/* ---------- project page ---------- */
#agm-concept .agm-case-intro{padding:22px var(--agm-content-gutter) 0}
#agm-concept .agm-case-breadcrumb{display:flex;justify-content:space-between;gap:20px;align-items:center;color:var(--agm-muted)}
#agm-concept .agm-back{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;color:var(--agm-ink)}
#agm-concept .agm-back>span{font-size:20px;transition:transform .3s ease}
#agm-concept .agm-back:hover>span{transform:translateX(-3px)}
#agm-concept .agm-case-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;padding:36px 0 40px}
#agm-concept .agm-case-heading .agm-label{color:var(--agm-muted);margin-bottom:17px}
#agm-concept .agm-case-heading h1{font:400 clamp(38px,4.3vw,60px)/1.06 Archivo,Arial,sans-serif;letter-spacing:-.045em;max-width:16ch;text-wrap:balance}
#agm-concept .agm-case-category{font-size:13px;line-height:1.9;color:var(--agm-muted);text-align:right;padding-bottom:4px}
#agm-concept .agm-case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:25px;padding:25px 0 32px;margin:0;border-top:1px solid var(--agm-line)}
#agm-concept .agm-case-facts>div{min-width:0}
#agm-concept .agm-case-facts dt{font-size:11px;line-height:1.6;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--agm-muted);margin:0 0 9px}
#agm-concept .agm-case-facts dd{font-size:15px;line-height:1.5;margin:0}
#agm-concept .agm-case-facts dd>span{display:block;color:var(--agm-muted)}

#agm-concept .agm-case-hero{padding:0 var(--agm-content-gutter);margin:0}
#agm-concept .agm-case-hero-link{display:block;background:var(--agm-pale);cursor:zoom-in}
#agm-concept .agm-case-hero-link img{width:100%;height:auto;max-height:78vh;object-fit:cover;filter:grayscale(1);transition:filter .7s ease}
#agm-concept .agm-case-hero-link:focus-visible img{filter:grayscale(0)}
#agm-concept .agm-case-hero figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0 0;color:var(--agm-muted);font-size:13px;line-height:1.6}
#agm-concept .agm-hero-caption .agm-credit{display:block;font-size:11px}
#agm-concept .agm-hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 28px}
#agm-concept .agm-hero-actions>a,#agm-concept .agm-film-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px;color:var(--agm-ink);background:none;border:0;padding:0}
#agm-concept .agm-hero-actions>a:hover,#agm-concept .agm-film-open:hover{text-decoration:underline;text-underline-offset:4px}
#agm-concept .agm-play{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
#agm-concept .agm-film-length{color:var(--agm-muted)}

#agm-concept .agm-case-overview,#agm-concept .agm-case-scope{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:44px;align-items:baseline;padding:84px var(--agm-content-gutter) 0}
#agm-concept .agm-case-overview>:first-child,#agm-concept .agm-case-scope>:first-child{grid-column:1/6}
#agm-concept .agm-case-overview>.agm-case-lede,#agm-concept .agm-case-scope>.agm-case-lede{grid-column:6/-1}
#agm-concept .agm-case-editorial .agm-label,#agm-concept .agm-scope-heading .agm-label{color:var(--agm-muted);margin-bottom:24px}
#agm-concept .agm-case-overview .agm-case-editorial .agm-label{margin:0}
#agm-concept .agm-scope-heading h2{font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.04em}
#agm-concept .agm-case-lede{font-size:clamp(19px,1.7vw,22px);line-height:1.6;letter-spacing:-.01em;max-width:34em;text-wrap:pretty}

#agm-concept .agm-photographs{padding:84px var(--agm-content-gutter) 0}
#agm-concept .agm-photographs-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px;border-top:1px solid var(--agm-line);padding:14px 0 26px}
#agm-concept .agm-photographs-head h2{color:var(--agm-muted)}
#agm-concept .agm-photographs-head>span{font-size:13px;color:var(--agm-muted)}
#agm-concept .agm-photo-row{display:flex;gap:16px;margin-bottom:16px}
#agm-concept .agm-photo{display:block;min-width:0;background:var(--agm-pale);overflow:hidden;cursor:zoom-in}
#agm-concept .agm-photo img{width:100%;height:auto;filter:grayscale(1);transition:filter .6s ease,transform .8s ease}
#agm-concept .agm-photo:focus-visible img{filter:grayscale(0)}

#agm-concept .agm-case-closing{padding:84px var(--agm-content-gutter)}
#agm-concept .agm-next-project{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;border-top:1px solid var(--agm-line);border-bottom:1px solid var(--agm-line)}
#agm-concept .agm-next-project .agm-label{display:block;color:var(--agm-muted);margin-bottom:8px}
#agm-concept .agm-next-project strong{display:block;font-size:clamp(26px,2.9vw,40px);font-weight:400;line-height:1.2;letter-spacing:-.03em}
#agm-concept .agm-next-arrow{font:400 40px/1 Arial,sans-serif;transition:transform .3s ease}
#agm-concept .agm-next-project:hover .agm-next-arrow{transform:translate(3px,-3px)}

/* ---------- lightbox + film ---------- */
#agm-concept dialog{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:#141513;color:#f1f1ec}
#agm-concept dialog::backdrop{background:#141513}
#agm-concept dialog[open]{display:grid}
#agm-concept .agm-lightbox{grid-template-rows:auto minmax(0,1fr);grid-template-columns:72px minmax(0,1fr) 72px}
#agm-concept .agm-lb-bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:12px var(--agm-gutter);font-size:13px;color:#b9bcb4}
#agm-concept .agm-lb-close,#agm-concept .agm-film-close{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:none;border:0;color:#f1f1ec;font-size:13px;letter-spacing:.04em}
#agm-concept .agm-lb-close span,#agm-concept .agm-film-close span{font-size:24px;line-height:1}
#agm-concept .agm-lb-stage{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 0 28px}
#agm-concept .agm-lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
#agm-concept .agm-lb-prev,#agm-concept .agm-lb-next{grid-row:2;align-self:center;justify-self:center;width:56px;height:56px;background:none;border:1px solid #484b44;border-radius:50%;color:#f1f1ec;font:400 22px/1 Arial,sans-serif}
#agm-concept .agm-lb-prev{grid-column:1}
#agm-concept .agm-lb-next{grid-column:3}
#agm-concept .agm-lb-prev:hover,#agm-concept .agm-lb-next:hover{background:#f1f1ec;color:#141513}
#agm-concept dialog :focus-visible{outline-color:#f1f1ec}
#agm-concept .agm-film{grid-template-rows:auto minmax(0,1fr);justify-items:center}
#agm-concept .agm-film-close{justify-self:end;margin:12px var(--agm-gutter)}
#agm-concept .agm-film video{max-width:min(100% - 2 * var(--agm-gutter),1400px);max-height:calc(100% - 40px);align-self:center;background:#000}

/* ---------- color on intent (pointer) / at rest (touch) ---------- */
@media(hover:hover){
  #agm-concept .agm-work-card:hover .agm-work-image img,#agm-concept .agm-photo:hover img,#agm-concept .agm-case-hero-link:hover img,#agm-concept .agm-index-list[data-view='grid'] .agm-row:hover .agm-row-thumb img{filter:grayscale(0);transform:scale(1.015)}
  #agm-concept .agm-work-card:hover .agm-arrow{transform:translate(2px,-2px)}
}
@media(hover:none){
  #agm-concept .agm-photo img,#agm-concept .agm-case-hero-link img,#agm-concept .agm-index-list .agm-row-thumb img{filter:grayscale(0)}
  #agm-concept .agm-preview{display:none}
}

/* ---------- tablet ---------- */
@media(max-width:1000px){
  #agm-concept .agm-index-list[data-view='list'] .agm-row{grid-template-columns:40px minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) 24px}
  #agm-concept .agm-index-list[data-view='list'] .agm-row-count{display:none}
  #agm-concept .agm-index-list[data-view='grid']{grid-template-columns:repeat(3,minmax(0,1fr))}
  #agm-concept .agm-preview{display:none}
}

/* ---------- phone ---------- */
@media(max-width:760px){
  #agm-concept.agm-portfolio-page .agm-header{padding-top:16px;padding-bottom:16px}
  #agm-concept .agm-logo-mark{height:40px}
  #agm-concept .agm-logo-type{height:36px}

  #agm-concept .agm-work-intro{padding-top:43px;padding-bottom:36px}
  #agm-concept .agm-work-opening{grid-template-columns:1fr;gap:22px}
  #agm-concept .agm-work-introduction{justify-self:start;max-width:none;font-size:14px}
  #agm-concept .agm-work-grid{grid-template-columns:1fr;row-gap:44px}
  #agm-concept .agm-work-grid .agm-work-card{grid-column:auto;margin-top:0}
  #agm-concept .agm-work-grid .agm-work-card .agm-work-image{aspect-ratio:1.2}
  #agm-concept .agm-work-grid .agm-work-card:nth-child(1) .agm-work-image{aspect-ratio:1.05}
  #agm-concept .agm-card-action>span:first-child{display:none}
  #agm-concept .agm-work-collection{padding-bottom:64px}
  #agm-concept .agm-index-heading{display:block;padding:42px 0 28px}
  #agm-concept .agm-index-heading .agm-label{margin-bottom:16px}
  #agm-concept .agm-project-filters{column-gap:18px}
  /* On a phone the index rows carry a small photograph, since there is no pointer to preview with. */
  #agm-concept .agm-index-list[data-view='list'] .agm-row{grid-template-columns:64px minmax(0,1fr) 22px;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:16px;row-gap:2px;padding:12px 0}
  #agm-concept .agm-index-list[data-view='list'] .agm-row-thumb{display:block;grid-row:1/3;grid-column:1}
  #agm-concept .agm-index-list[data-view='list'] .agm-row-thumb img{width:64px;height:64px}
  #agm-concept .agm-index-list[data-view='list'] .agm-row-num,#agm-concept .agm-index-list[data-view='list'] .agm-row-state{display:none}
  #agm-concept .agm-index-list[data-view='list'] .agm-row-name{grid-column:2;font-size:17px}
  #agm-concept .agm-index-list[data-view='list'] .agm-row-city{grid-column:2}
  #agm-concept .agm-index-list[data-view='list'] .agm-row .agm-arrow{grid-column:3;grid-row:1/3}
  #agm-concept .agm-index-list[data-view='grid']{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  #agm-concept .agm-index-list[data-view='grid'] .agm-row-name{font-size:16px}
  #agm-concept .agm-case-heading{display:block;padding:26px 0 30px}
  #agm-concept .agm-case-category{text-align:left;margin-top:18px}
  #agm-concept .agm-case-facts{grid-template-columns:1fr 1fr;gap:22px 24px}
  #agm-concept .agm-case-hero figcaption{flex-direction:column;gap:6px}
  #agm-concept .agm-hero-actions{justify-content:flex-start}
  #agm-concept .agm-case-overview,#agm-concept .agm-case-scope{grid-template-columns:1fr;row-gap:22px;padding-top:56px}
  #agm-concept .agm-case-overview>*,#agm-concept .agm-case-scope>*{grid-column:1/-1!important}
  #agm-concept .agm-photographs{padding-top:56px}
  #agm-concept .agm-photo-row{gap:8px;margin-bottom:8px}
  #agm-concept .agm-case-closing{padding:56px var(--agm-content-gutter) 64px}
  #agm-concept .agm-lightbox{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto}
  #agm-concept .agm-lb-stage{grid-column:1/-1;padding:0 0 12px}
  #agm-concept .agm-lb-prev,#agm-concept .agm-lb-next{grid-row:3;margin-bottom:20px}
  #agm-concept .agm-lb-prev{grid-column:1}
  #agm-concept .agm-lb-next{grid-column:2}
}
@media(prefers-reduced-motion:reduce){
  #agm-concept .agm-preview{transition:none}
}

/* CONTACT concept (2026-10-01). Roles reused: field labels = .agm-label (11px/500 uppercase muted), field text 17px ink
   (the project facts' value role), errors 12px (caption role), the side column = the menu's blocks on paper (phone 24px,
   details 13px), the send button = the band button inverted (12px/500 on ink). Hairline fields like the site's rules. */
#agm-concept .agm-contact-page .agm-work-intro{padding-bottom:48px}
#agm-concept .ct-body{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(230px,1fr);gap:48px;padding:56px var(--agm-content-gutter) 80px;border-top:1px solid var(--agm-line)}
#agm-concept .ct-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#agm-concept .ct-row{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
#agm-concept .ct-f{display:flex;flex-direction:column;margin-bottom:26px}
#agm-concept .ct-f .agm-label{color:var(--agm-muted);margin:0 0 6px}
#agm-concept .ct-opt{color:#9a9a95;margin-left:6px}
#agm-concept .ct-f input,#agm-concept .ct-f textarea{font:400 17px/1.5 Archivo,Arial,sans-serif;color:var(--agm-ink);background:transparent;border:0;border-bottom:1px solid var(--agm-muted);border-radius:0;padding:10px 0 12px;outline:0;transition:border-color .2s ease}
#agm-concept .ct-f textarea{resize:vertical;min-height:132px}
#agm-concept .ct-f input:focus,#agm-concept .ct-f textarea:focus{border-bottom-color:var(--agm-ink);box-shadow:0 1px 0 var(--agm-ink)}
/* one focus cue on text fields: the 2px ink underline (critic 2026-10-02: underline + outline box read as two rules) */
#agm-concept .ct-f input:focus-visible,#agm-concept .ct-f textarea:focus-visible{outline:none}
#agm-concept .ct-f textarea::placeholder{color:#8a8a85}
#agm-concept .ct-f[data-bad] input,#agm-concept .ct-f[data-bad] textarea{border-bottom-color:#9b2c1f}
#agm-concept .ct-e{margin:6px 0 0;font-size:12px;color:#9b2c1f;min-height:0}
#agm-concept .ct-e:empty{display:none}
#agm-concept .ct-act{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:8px}
#agm-concept .ct-send{display:inline-flex;align-items:center;justify-content:space-between;gap:56px;min-height:56px;padding:15px 20px;border:1px solid var(--agm-deep);background:var(--agm-deep);color:#f5f5ef;font:500 13px/1 Archivo,Arial,sans-serif;letter-spacing:.025em;cursor:pointer;transition:background .25s ease,color .25s ease}
#agm-concept .ct-send .agm-arrow{font-size:26px}
#agm-concept .ct-send:hover,#agm-concept .ct-send:focus-visible{background:transparent;color:var(--agm-ink)}
#agm-concept .ct-send:disabled{opacity:.6;cursor:progress}
#agm-concept .ct-note{margin:0;font-size:14px;line-height:1.6;color:var(--agm-muted);max-width:340px}
#agm-concept .ct-note a{color:var(--agm-ink);text-decoration:underline;text-underline-offset:3px}
#agm-concept .ct-status{margin:18px 0 0;font-size:13px;line-height:1.6;color:var(--agm-ink)}
#agm-concept .ct-status:empty{display:none}
#agm-concept .ct-status[data-bad]{color:#9b2c1f}
#agm-concept .ct-side{display:grid;gap:38px;align-content:start;padding-top:22px}
#agm-concept .ct-side .agm-label{color:var(--agm-muted);margin:0 0 12px}
#agm-concept .ct-phone{display:inline-block;font-size:24px;letter-spacing:-.04em;line-height:1.2;color:var(--agm-ink)}
#agm-concept .ct-detail{display:block;margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--agm-ink);max-width:300px}
#agm-concept a.ct-detail:hover,#agm-concept .ct-phone:hover{text-decoration:underline;text-underline-offset:4px}
#agm-concept .ct-map{padding:0 var(--agm-content-gutter) 88px}
#agm-concept .ct-map .agm-label{color:var(--agm-muted);margin:0 0 18px}
#agm-concept .ct-map-link{display:block;overflow:hidden;background:var(--agm-pale)}
#agm-concept .ct-map-link img{display:block;width:100%;height:auto;aspect-ratio:2048/768;filter:grayscale(1);transition:filter .6s ease}
#agm-concept .ct-map-link:hover img,#agm-concept .ct-map-link:focus-visible img{filter:grayscale(0)}
#agm-concept .ct-map-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:10px;font-size:12px;color:var(--agm-muted)}
@media(max-width:900px){#agm-concept .ct-body{grid-template-columns:1fr;gap:44px}#agm-concept .ct-side{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}}
@media(max-width:760px){#agm-concept .ct-body{padding:36px 24px 56px}#agm-concept .ct-row{grid-template-columns:1fr}#agm-concept .ct-side{grid-template-columns:1fr;gap:30px}#agm-concept .ct-map{padding:0 24px 56px}#agm-concept .ct-map-link img{aspect-ratio:4/3;object-fit:cover;object-position:62% 50%}#agm-concept .ct-map-foot{flex-direction:column;align-items:flex-start}}
#agm-concept .ct-note a,#agm-concept .ct-phone{white-space:nowrap}

/* ui-ux-critic 2026-10-01 (0e3993e): roles mapped to existing ones (details = the systems intro role, 13px muted;
   "Optional" muted; links ink); the side column on the page's right edge (x of the intro and the band action); map
   capped and centred on the pin; no button jump while sending; "Talk to us" level with the first field label. */
#agm-concept .ct-opt{color:var(--agm-muted)}
#agm-concept .ct-map-foot .agm-text-link{color:var(--agm-ink)}
#agm-concept .ct-note a{color:inherit}
#agm-concept .ct-detail{color:var(--agm-muted)}
#agm-concept .ct-detail-link{color:var(--agm-ink);text-decoration:underline;text-underline-offset:3px}
#agm-concept .ct-side{padding-top:0}
@media(min-width:901px){#agm-concept .ct-side{justify-self:end;width:100%;max-width:325px}}
#agm-concept .ct-send{min-width:209px}
#agm-concept .ct-map-link img{aspect-ratio:auto;height:340px;object-fit:cover;object-position:61% 40%}
@media(max-width:760px){#agm-concept .ct-map-link img{height:280px}}
#agm-concept .ct-detail-link{font-weight:500}

/* SYSTEMS, CATALOG (Kire 2026-10-01: "go with B"). Ported from the concept generator in
   clients/in-line-agm/reference/design-brief/concepts/2026-10-01-systems-page/ (common.js + gen-b.js). Roles: label 11/500,
   24px card title, 42/32px heading, 14/13px muted body, 12px caption, 13px/500 links; square markers; no radii. */
#agm-concept .x-parts{list-style:none;margin:0;padding:0}
#agm-concept .x-part{display:grid;grid-template-columns:34px 1fr;align-items:baseline}
#agm-concept .x-part-n{color:var(--agm-muted)}
#agm-concept .x-part-name{font-size:24px;line-height:1.1;letter-spacing:-.04em;color:var(--agm-ink)}
#agm-concept .x-part-desc{grid-column:2;margin-top:4px;font-size:12px;line-height:1.5;color:var(--agm-muted)}
#agm-concept .x-leaders{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
#agm-concept .x-leader polyline{fill:none;stroke:#20201e;stroke-width:1;transition:stroke-width .2s ease,opacity .2s ease}
#agm-concept .x-leader circle{fill:#20201e;stroke:var(--x-ground,#f2f2ef);stroke-width:2}
#agm-concept .x-linked.is-pointing .x-leader:not(.is-on){opacity:.28}
#agm-concept .x-linked.is-pointing .x-part:not(.is-on){opacity:.45}
#agm-concept .x-leader.is-on polyline{stroke-width:2}
#agm-concept .x-part{transition:opacity .2s ease}
:where(#agm-concept .xb,#agm-concept .xb-sheet) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
#agm-concept .xb button:focus-visible,#agm-concept .xb-sheet button:focus-visible{outline:2px solid var(--agm-ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){#agm-concept .xb *,#agm-concept .xb-sheet,#agm-concept .xb-sheet *{transition:none!important;animation:none!important}}

#agm-concept .agm-work-intro{padding-bottom:40px}
#agm-concept .xb{padding:0 var(--agm-content-gutter) 112px}
#agm-concept .xb-bar{display:flex;align-items:baseline;gap:28px;padding:22px 0 0;border-top:1px solid var(--agm-ink)}
#agm-concept .xb-bar>.agm-label{color:var(--agm-muted)}
#agm-concept .xb-tabs{display:flex;flex-wrap:wrap;gap:6px 26px}
#agm-concept .xb-tab{padding:0 0 8px;font-size:17px;line-height:1.5;letter-spacing:-.01em;color:var(--agm-muted);box-shadow:inset 0 -1px 0 transparent;transition:color .2s ease,box-shadow .2s ease}
#agm-concept .xb-tab:hover,#agm-concept .xb-tab[aria-checked=true]{color:var(--agm-ink)}
#agm-concept .xb-tab[aria-checked=true]{box-shadow:inset 0 -1px 0 var(--agm-ink)}
#agm-concept .xb-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 32px}
#agm-concept .xb-item[hidden]{display:none}
/* sheet */
#agm-concept .xb-sheet{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--agm-paper);color:var(--agm-ink);overflow:hidden}
#agm-concept .xb-sheet[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;animation:xb-in .28s ease both}
#agm-concept .xb-sheet::backdrop{background:rgba(27,27,25,.4)}
@keyframes xb-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#agm-concept .xb-top{display:flex;justify-content:space-between;align-items:center;height:72px;padding:0 var(--agm-gutter);border-bottom:1px solid var(--agm-line)}
#agm-concept .xb-count{color:var(--agm-muted)}
#agm-concept .xb-close{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:13px;font-weight:500}
#agm-concept .xb-x{position:relative;width:18px;height:18px}
#agm-concept .xb-x::before,#agm-concept .xb-x::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1px;background:currentColor;transform:rotate(45deg)}
#agm-concept .xb-x::after{transform:rotate(-45deg)}
#agm-concept .xb-content{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto minmax(max-content,1fr);gap:64px;padding:48px var(--agm-gutter) 32px;overflow:auto;animation:xa-in .3s ease both}
@keyframes xa-in{from{opacity:0}to{opacity:1}}
#agm-concept .xb-kicker{color:var(--agm-muted)}
/* Every sheet ends in a next step (critic 2026-10-01: the sheet had no links). Desktop: under the text, in the left
   column the stage leaves empty; phones: after the parts list. */
#agm-concept .xb-content>.xb-stage{grid-column:2;grid-row:1/3}
#agm-concept .xb-act{grid-column:1;grid-row:2;align-self:end}
/* The family's photograph beside every opened system (Kire 2026-10-01: "add a photo next to a category"). A real
   project, mono at rest and color on touch like every photograph on the site; the caption is the sheet's own figure-caption role
   (12px muted) and the photo links to the project's page. */
#agm-concept .xb-photo{display:block;margin-bottom:22px;color:var(--agm-muted)}
#agm-concept .xb-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1);transition:filter .6s ease}
#agm-concept .xb-photo:focus-visible img{filter:grayscale(0)}
@media(hover:hover){#agm-concept .xb-photo:hover img{filter:grayscale(0)}#agm-concept .xb-photo:hover .xb-photo-cap{color:var(--agm-ink)}}
@media(min-width:1181px) and (max-height:860px){#agm-concept .xb-photo img{aspect-ratio:16/9}}
#agm-concept .xb-photo-cap{display:flex;justify-content:space-between;gap:16px;padding-top:12px;font-size:12px;line-height:1.5}
#agm-concept .xb-photo:focus-visible{outline:2px solid var(--agm-ink);outline-offset:4px}
#agm-concept .xb-content:focus{outline:none}
#agm-concept .xb-title{margin:14px 0 0;font-size:42px;font-weight:400;line-height:1.12;letter-spacing:-.03em}
#agm-concept .xb-sub{margin:16px 0 0;font-size:14px;line-height:1.8;color:var(--agm-muted)}
#agm-concept .xb-figcap{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--agm-line);font-size:12px;line-height:1.5;color:var(--agm-muted)}
#agm-concept .xb-stage{--x-ground:var(--agm-pale);position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:110px;align-items:center;background:var(--agm-pale);padding:40px 56px;min-height:min(600px,100%)}
#agm-concept .xb-draw{display:flex;justify-content:center;align-items:center}
#agm-concept .xb-draw .x-cropwrap{height:min(520px,calc(100dvh - 300px),calc(480px / var(--arn)));max-width:100%}
#agm-concept .xb-draw .x-badge,#agm-concept .xb-draw .x-tie,#agm-concept .xb-draw .x-dot{display:none}
#agm-concept .xb-stage .x-parts{position:relative;align-self:stretch}
#agm-concept .xb-stage .x-part{position:absolute;left:0;right:0}
#agm-concept .xb-foot{display:flex;justify-content:space-between;gap:24px;padding:0 var(--agm-gutter);height:72px;align-items:center;border-top:1px solid var(--agm-line)}
#agm-concept .xb-foot button{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:13px;font-weight:500}
#agm-concept .xb-foot .agm-arrow{font-size:18px}
@media(max-width:1180px){#agm-concept .xb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#agm-concept .xb-content{grid-template-columns:1fr;grid-template-rows:none}#agm-concept .xb-content>.xb-stage,#agm-concept .xb-act{grid-column:1;grid-row:auto}#agm-concept .xb-act{margin-top:0;align-self:start;max-width:520px}#agm-concept .xb-stage{column-gap:80px;grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:760px){
 #agm-concept .xb{padding:0 24px 72px}
 #agm-concept .xb-bar{display:block;padding-top:18px}
 /* Phones (Kire 2026-10-01, critic: the 112px list shrank each drawing to an icon): two square plates per row, so the
    drawings stay drawings; the family tabs run on one line and scroll sideways instead of wrapping. */
 #agm-concept .xb-tabs{margin:12px -24px 0;padding:0 24px;gap:0 22px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 #agm-concept .xb-tabs::-webkit-scrollbar{display:none}
 #agm-concept .xb-tab{flex:none}
 #agm-concept .xb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-top:24px}
 #agm-concept .xb-top{height:64px;padding:0 20px}
 #agm-concept .xb-content{display:block;padding:24px 24px 32px}
 #agm-concept .xb-title{font-size:32px;letter-spacing:-.04em}
 #agm-concept .xb-sub{font-size:13px;line-height:1.6;margin-top:10px}
 #agm-concept .xb-figcap{display:none}
 #agm-concept .xb-act{margin-top:28px}
 #agm-concept .xb-stage{display:block;margin:22px -24px 0;padding:24px 24px 8px;min-height:0}
 #agm-concept .xb-draw .x-cropwrap{height:min(360px,calc((100vw - 64px) / var(--arn)))}
 #agm-concept .xb-draw .x-dot,#agm-concept .xb-draw .x-tie{display:block}
 #agm-concept .xb-draw .x-badge{display:grid}
 #agm-concept .xb-stage .x-leaders{display:none}
 #agm-concept .xb-stage .x-parts{margin:24px -24px 0;padding:0 24px;background:var(--agm-paper)}
 #agm-concept .xb-stage .x-part{position:static;padding:13px 0;border-bottom:1px solid var(--agm-line)}
 #agm-concept .xb-stage .x-part-name{font-size:20px}
 #agm-concept .xb-foot{height:64px;padding:0 20px}
 #agm-concept .xb-foot .xb-pn{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ui-ux-critic 2026-10-01 (f78e51e): the button reset no longer outranks the tabs and Close (:where above); the sheet's
   stacked layout (≤1180) sizes its rows to content and caps the drawing so it opens uncut on short screens; prev/next
   arrows at the approved 22px. */
#agm-concept .xb-foot .agm-arrow{font-size:22px}
@media(max-width:1180px) and (min-width:761px){#agm-concept .xb-content{grid-auto-rows:max-content}#agm-concept .xb-draw .x-cropwrap{height:min(520px,calc(100dvh - 470px),calc(480px / var(--arn)));min-height:220px}}

/* ABOUT, third version: the company profile (Kire 2026-10-02 picked concept C). One sheet, read the way a general
   contractor prequalifies a subcontractor: a label column on the left (the 13px eyebrow role), the value on the other
   three columns, rows under hairlines. Roles reused only: 24px card name for the lead value of a row, 15px ink for item
   names, 14px muted for sub-items and captions, 15px muted text. Printable: header, contact box and footer drop out. */
#agm-concept.agm-about-page main>.ap-sheet{margin:24px var(--agm-content-gutter) 0;border-top:1px solid var(--agm-ink)}
#agm-concept .ap-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;padding:28px 0;border-bottom:1px solid var(--agm-line)}
#agm-concept .ap-row>h2{grid-column:1/2;margin:0;padding-top:4px}
#agm-concept .ap-val{grid-column:2/5;margin:0;padding:0}
#agm-concept .ap-big{margin:0;font-size:24px;line-height:1.45;letter-spacing:-.04em;color:var(--agm-ink);max-width:760px}
#agm-concept .ap-txt{margin:10px 0 0;font-size:15px;line-height:1.7;color:var(--agm-muted);max-width:70ch}
#agm-concept .ap-txt a{color:inherit;text-decoration:underline;text-underline-offset:4px}
#agm-concept .ap-nowrap{white-space:nowrap}
#agm-concept .ap-cols{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:24px}
#agm-concept .ap-item{display:flex;flex-direction:column;align-items:flex-start;color:var(--agm-ink)}
#agm-concept .ap-name{font-size:15px;line-height:1.7;color:var(--agm-ink)}
#agm-concept .ap-sub{margin-top:2px;font-size:14px;line-height:1.6;color:var(--agm-muted)}
#agm-concept a.ap-item .ap-name{text-decoration:underline;text-decoration-color:var(--agm-line);text-underline-offset:4px;transition:text-decoration-color .2s ease}
#agm-concept a.ap-item:hover .ap-name,#agm-concept a.ap-item:focus-visible .ap-name{text-decoration-color:currentColor}
#agm-concept .ap-link{margin-top:22px}
#agm-concept .ap-print{margin-top:22px;background:none;border-top:0;border-left:0;border-right:0;padding-left:0;padding-right:0;cursor:pointer;font-family:inherit;color:var(--agm-ink)}
#agm-concept .ap-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));column-gap:24px;row-gap:8px}
#agm-concept .ap-logos li{display:flex;align-items:center;height:56px}
#agm-concept .ap-logos img{display:block;width:auto;height:auto;max-width:min(96px,100%);max-height:24px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .4s ease,opacity .4s ease}
#agm-concept .ap-logos li.is-square img{max-height:34px}
/* solid-block artwork (no knockout file yet, asked of David) rests lighter so it doesn't read as black bars */
#agm-concept .ap-logos li.is-solid img{opacity:.4}
#agm-concept .ap-table{width:100%;border-collapse:collapse}
#agm-concept .ap-table th,#agm-concept .ap-table td{text-align:left;font-weight:400;padding:10px 16px 10px 0;border-bottom:1px solid var(--agm-line);font-size:14px;line-height:1.5;color:var(--agm-muted);vertical-align:baseline}
#agm-concept .ap-table td a{font-size:15px;line-height:1.7;color:var(--agm-ink);text-decoration:underline;text-decoration-color:var(--agm-line);text-underline-offset:4px;transition:text-decoration-color .2s ease}
#agm-concept .ap-mfacts{display:none}
#agm-concept .ap-table td a:hover,#agm-concept .ap-table td a:focus-visible{text-decoration-color:currentColor}
#agm-concept.agm-about-page .agm-contact{margin-top:112px}
/* the sheet already states the scope; the box's process row would repeat it */
#agm-concept.agm-about-page .agm-process{display:none}
@media(hover:hover){#agm-concept .ap-logos li:hover img{filter:grayscale(0);opacity:1}}
@media(max-width:899px){
 #agm-concept .ap-row{grid-template-columns:1fr;row-gap:14px}
 #agm-concept .ap-row>h2,#agm-concept .ap-val{grid-column:1}
 #agm-concept .ap-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
 #agm-concept .ap-logos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){
 #agm-concept.agm-about-page main>.ap-sheet{margin-left:24px;margin-right:24px}
 #agm-concept .ap-big{font-size:20px}
 #agm-concept .ap-scope{grid-template-columns:1fr;row-gap:4px}
 #agm-concept .ap-table .ap-wide{display:none}
 #agm-concept .ap-mfacts{display:block}
 #agm-concept .ap-certs{grid-template-columns:1fr;row-gap:8px}
 #agm-concept .ap-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
 #agm-concept.agm-about-page .agm-contact{margin-top:72px}
}
/* Certification logos (Kire 2026-10-02: "add logos next to them .. much more recognisable"): one fixed box so the names
   line up; black and white at rest, color on touch, like every image on the site. */
#agm-concept .ap-cred{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
#agm-concept .ap-cred-logo{display:flex;align-items:center;width:150px;height:44px}
#agm-concept .ap-cred-logo img{display:block;width:auto;height:auto;max-width:150px;max-height:44px;object-fit:contain;filter:grayscale(1);transition:filter .4s ease}
/* The office gallery (Kire 2026-10-02: "extend this section with photos and video"; picked option 2 of three). */
#agm-concept .ap-cap{display:flex;justify-content:space-between;gap:16px;padding-top:12px;font-size:14px;line-height:1.5;color:var(--agm-muted)}
#agm-concept .ap-film,#agm-concept .ap-photo{margin:0}
#agm-concept .ap-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1);transition:filter .6s ease}
/* inside the Office row: the film over two columns and two rows, four photographs beside it */
#agm-concept .ap-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:16px;margin:36px 0 34px}
/* the caption hangs below the tile so the film's edge lines up with the bottom photos (critic 2026-10-02) */
#agm-concept .ap-g-film{grid-column:1/3;grid-row:1/3;position:relative;display:flex;flex-direction:column}
#agm-concept .ap-g-film .ap-cap{position:absolute;top:100%;left:0;right:0}
#agm-concept .ap-g-film .pd-film-btn{position:relative;flex:1 1 0;min-height:0}
#agm-concept .ap-g-film .pd-film-btn img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
@media(hover:hover){#agm-concept .ap-cred:hover img,#agm-concept .ap-photo:hover img{filter:grayscale(0)}}
@media(max-width:760px){
 #agm-concept .ap-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;margin-bottom:0}
 #agm-concept .ap-g-film .ap-cap{position:static}
 #agm-concept .ap-g-film{grid-column:1/3;grid-row:auto}
 #agm-concept .ap-g-film .pd-film-btn{flex:none;aspect-ratio:16/9}
}
/* Print: one company sheet. concepts.css hides .agm-work-intro in print for the Projects list, so the name is brought
   back here; the screen's <900px stacking is undone so Letter keeps the four-column sheet (critic 2026-10-02). */
@media print{
 @page{size:letter;margin:.45in}
 #agm-concept.agm-about-page{zoom:.62}
 #agm-concept .agm-header,#agm-concept .agm-contact,#agm-concept .agm-foot-band,#agm-concept .agm-work-introduction,#agm-concept .ap-link,#agm-concept .ap-film,#agm-concept .ap-gallery,#agm-concept .ap-print{display:none !important}
 #agm-concept .ap-cred-logo img{filter:grayscale(1)}
 #agm-concept.agm-about-page .agm-work-intro{display:block !important;padding:0 0 16px}
 #agm-concept.agm-about-page main>.ap-sheet{margin:0}
 #agm-concept .ap-row{grid-template-columns:repeat(4,minmax(0,1fr));padding:14px 0;break-inside:avoid}
 #agm-concept .ap-row>h2{grid-column:1}
 #agm-concept .ap-val{grid-column:2/5}
 #agm-concept .ap-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
 #agm-concept .ap-logos{grid-template-columns:repeat(7,minmax(0,1fr))}
 #agm-concept .ap-logos img{filter:grayscale(1);opacity:1}
 #agm-concept .ap-table .ap-wide{display:table-cell}
 #agm-concept .ap-mfacts{display:none}
 #agm-concept .ap-table tr:last-child td{border-bottom:0}
}

/* MOBILE ROUND (2026-10-02). Systems: tab hit areas, wrapping previous/next names, no pale sliver under the parts, the
   sub-family on its own line. About: one gutter, the city in the facts line, taller links, color on touch. Contact: 44px
   detail links, a full-width send button, "Optional" in the 12px note role, the map in color on touch. */
#agm-concept .xb-tab{position:relative}
#agm-concept .xb-tab::before{content:"";position:absolute;inset:-5px -11px}
#agm-concept .ap-big{text-wrap:balance}
#agm-concept .ct-opt{font-size:12px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--agm-muted)}
@media(max-width:760px){
 #agm-concept .xb-stage{padding:24px 24px 0}
 #agm-concept .xb-foot .xb-pn{white-space:normal;overflow:visible;text-overflow:clip;max-width:120px;line-height:1.3}
 #agm-concept .xb-capsub{display:block}
 #agm-concept .xb-capsub .xb-dot{display:none}
 #agm-concept .ap-cols,#agm-concept .ap-gallery{column-gap:16px}
 #agm-concept .ap-gallery{row-gap:16px}
 #agm-concept .ap-certs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
 #agm-concept .ap-cred-logo{width:100%}
 #agm-concept .ap-cred-logo img{max-width:100%}
 #agm-concept .ap-table .ap-loc{display:none}
 #agm-concept .ap-table td a{display:inline-block;padding:10px 0;margin:-10px 0}
 #agm-concept .ap-txt a[href^="tel"],#agm-concept .ap-txt a[href^="mailto"],#agm-concept .ct-note a[href^="tel"]{display:inline-block;padding:14px 0;margin:-14px 0}
 #agm-concept .ct-blk a{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:0}
 #agm-concept .ct-send{width:100%}
}
/* Phones: the sticky header drops to 64px (it was 81px, 12% of a 667px screen); the 48px Menu button is unchanged. */
@media(max-width:600px){#agm-concept.agm-portfolio-page .agm-header{padding-top:8px;padding-bottom:8px}}
/* Systems family tabs on phones: every family visible, wrapping like the Projects filter (Kire's iPhone 2026-10-02: "the
   system categories are not correctly displayed"; Railings was cut off in a sideways scroll). */
@media(max-width:760px){
 #agm-concept .xb-tabs{margin:12px 0 0;padding:0;flex-wrap:wrap;overflow-x:visible;gap:0 20px}
 #agm-concept .xb-tab{padding:10px 0 9px}
 #agm-concept .xb-bar::after{display:none}
}
/* The sticky header no longer changes size or color on scroll (Kire's iPhone, 2026-10-08: "the logo and the menu is
   distorted on the scroll .. it's like blinking"). Shrinking the padding and the logo moved the page under the finger;
   on momentum scroll that toggled the stuck state back and forth. Stuck now adds only the shadow; the logo stays in
   its resting black, the site's ink-at-rest rule. */
#agm-concept.agm-portfolio-page .agm-header.is-stuck{padding-top:21px;padding-bottom:21px}
#agm-concept .agm-header.is-stuck .agm-logo img{filter:grayscale(1) brightness(.6) contrast(1.5)}
#agm-concept .agm-header.is-stuck .agm-logo-mark{height:48px}
#agm-concept .agm-header.is-stuck .agm-logo-type{height:44px}
@media(max-width:760px){
 #agm-concept.agm-portfolio-page .agm-header.is-stuck{padding-top:16px;padding-bottom:16px}
 #agm-concept .agm-header.is-stuck .agm-logo-mark{height:40px}
 #agm-concept .agm-header.is-stuck .agm-logo-type{height:36px}
}
@media(max-width:600px){#agm-concept.agm-portfolio-page .agm-header.is-stuck{padding-top:8px;padding-bottom:8px}}
#agm-concept .agm-logo img{transition:none}

/* About, Manufacturers (Kire 2026-10-09: logos removed, copy kept): the sentence now leads its row, so it starts level with the label. */
#agm-concept .ap-val>.ap-txt:first-child{margin-top:0}

/* iPads (Atlas review 2026-10-12, M5): the About and Contact tap areas from the phone block, on every touch screen. */
@media(hover:none) and (pointer:coarse){
 #agm-concept .ap-table td a{display:inline-block;padding:10px 0;margin:-10px 0}
 #agm-concept .ap-txt a[href^="tel"],#agm-concept .ap-txt a[href^="mailto"],#agm-concept .ct-note a[href^="tel"]{display:inline-block;padding:14px 0;margin:-14px 0}
 #agm-concept .ct-blk a{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:0}
}

/* Legal pages (launch 2026-10-22): one readable column, the site's own label + body roles. */
#agm-concept .lg-body{padding:0 var(--agm-content-gutter) 96px;max-width:calc(72ch + 2 * var(--agm-content-gutter))}
#agm-concept .lg-body .agm-label{margin:48px 0 6px}
#agm-concept .lg-body ul,#agm-concept .lg-body ol{margin:10px 0 0;padding-left:1.2em}
#agm-concept .lg-body li.ap-txt{margin-top:6px}

/* LINKS INSIDE THE PAGE INTRO (2026-10-22, ui-ux-critic on /emergency-support/): they rendered in the paragraph's own
   color with no underline, so the phone number and the 404's two links did not read as links. Same treatment as the
   body copy's links (.ap-txt a). */
#agm-concept .agm-work-introduction p a{color:inherit;text-decoration:underline;text-underline-offset:4px}
#agm-concept .agm-work-introduction p{text-wrap:pretty}

/* PRE-LAUNCH FIXES (2026-10-23, ui-ux-critic full-site pass before launch).
   1. Intro alignment: the opening grid aligns at the bottom, so any intro taller than the H1 pushed the H1 down (17–21px
      on About, Contact, Systems, 404 at 1440; far more at 900–1280). The H1 now holds the top: a short intro still sits
      at the bottom level with the heading (Projects, as approved); a long one starts on the heading's top line. Either way
      the eyebrow→H1 gap is the approved 24px (Kire 10/22: "You have to align the elements"). */
#agm-concept .agm-work-opening h1{align-self:start}
/* 2. Display lines balance, so no single word is left on a short heading line (thank-you "message." at 390). */
#agm-concept .agm-work-opening h1{text-wrap:balance}
/* 4. Footer legal links: rule lives in inline-agm.css (the home page loads only that sheet). */
/* 5. Project figures on phones: rule lives in concepts.css (loaded after this sheet on project pages). */

/* ONE HEADER, THE HOME PAGE'S (2026-10-23, Kire: "the distortion is still the issue .. only on the scrolling the footer is
   blinking for project .. also the menu should work the same as the home page"). The inner pages had their own header:
   the color logo forced to black through filter:grayscale(1) brightness(.6) contrast(1.5) (harsh lettering, and iOS
   Safari repaints a filtered layer inside a sticky bar on every scroll frame, which blinks), plus a scroll-driven
   is-stuck switch at 24px with height/filter transitions and a drop shadow. They now match the home page's docked bar
   exactly: the logo as drawn (no filter), 40px mark + 36px lettering at every width, 12px vertical padding, the hairline
   below, no shadow, no transitions, nothing that changes while scrolling. The open menu's logo follows (no filter). */
#agm-concept.agm-portfolio-page .agm-header,
#agm-concept.agm-portfolio-page .agm-header.is-stuck{padding-top:12px;padding-bottom:12px;box-shadow:none;transition:none}
#agm-concept.agm-portfolio-page .agm-header .agm-logo img,
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo img,
#agm-concept.agm-portfolio-page .agm-menu-brand img{filter:none;transition:none}
#agm-concept.agm-portfolio-page .agm-header .agm-logo-mark,
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo-mark,
#agm-concept.agm-portfolio-page .agm-menu-brand .agm-logo-mark{height:40px;width:auto}
#agm-concept.agm-portfolio-page .agm-header .agm-logo-type,
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo-type,
#agm-concept.agm-portfolio-page .agm-menu-brand .agm-logo-type{height:36px;width:auto}
@media(max-width:600px){
 #agm-concept.agm-portfolio-page .agm-header,
 #agm-concept.agm-portfolio-page .agm-header.is-stuck{padding-top:12px;padding-bottom:12px}
}

/* BLACK AND WHITE AT REST, COLOR ON SCROLL (2026-10-23, Kire: "the pages have to start with black and white logo and to
   convert in color on the scroll .. the blinking has stop"). is-stuck is set once past 24px (hysteresis back at 4px,
   portfolio.js); the two real logo files crossfade on opacity, which the compositor does without a repaint. The open menu
   follows the header's state, so opening it never changes the logo. */
#agm-concept.agm-portfolio-page .agm-header .agm-logo-mono,
#agm-concept.agm-portfolio-page .agm-header .agm-logo-color,
#agm-concept.agm-portfolio-page .agm-header .agm-logo img.agm-logo-mono,
#agm-concept.agm-portfolio-page .agm-header .agm-logo img.agm-logo-color,
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo img.agm-logo-mono,
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo img.agm-logo-color{transition:opacity .3s ease}
#agm-concept.agm-portfolio-page .agm-header:not(.is-stuck) .agm-logo-mono{opacity:1}
#agm-concept.agm-portfolio-page .agm-header:not(.is-stuck) .agm-logo-color{opacity:0}
@media(prefers-reduced-motion:reduce){
 #agm-concept.agm-portfolio-page .agm-header .agm-logo-mono,
 #agm-concept.agm-portfolio-page .agm-header .agm-logo-color,
 #agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo img.agm-logo-mono,
 #agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo img.agm-logo-color{transition:none}
}

/* DESKTOP HEADER BACK TO ITS APPROVED SIZE (2026-10-23, Kire: "the desktop view has been changed"). The one-header change
   above was meant for phones (where it matches home's docked bar); on desktop the inner pages keep the approved 91px bar,
   21px padding and 48px mark + 44px lettering. The black-and-white-to-color logo applies at every width. */
@media(min-width:761px){
 #agm-concept.agm-portfolio-page .agm-header,
 #agm-concept.agm-portfolio-page .agm-header.is-stuck{padding-top:21px;padding-bottom:21px}
 #agm-concept.agm-portfolio-page .agm-header .agm-logo-mark,
 #agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo-mark,
 #agm-concept.agm-portfolio-page .agm-menu-brand .agm-logo-mark{height:48px;width:auto}
 #agm-concept.agm-portfolio-page .agm-header .agm-logo-type,
 #agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo-type,
 #agm-concept.agm-portfolio-page .agm-menu-brand .agm-logo-type{height:44px;width:auto}
}

/* NO DIP IN THE LOGO CHANGE (2026-10-23, Kire: "even on the chrome the menu is still blinking"). Crossfading the two logo
   images made both 50% transparent at mid-fade, so the logo went pale (about 75% coverage) and came back: a blink. The
   black-and-white copy now stays fully opaque underneath at all times and only the color copy fades in or out on top
   (identical shapes), so the logo changes color without ever losing ink. */
#agm-concept.agm-portfolio-page .agm-header .agm-logo-mono,
#agm-concept.agm-portfolio-page .agm-header:not(.is-stuck) .agm-logo-mono,
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo img.agm-logo-mono,
#agm-concept.agm-portfolio-page .agm-header .agm-logo img.agm-logo-mono{opacity:1;transition:none}
/* …and once the color copy has fully arrived, the black-and-white copy switches off (after the .3s fade) so its edges
   do not darken the color logo; on the way back it switches on at once, before the color fades out. */
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo img.agm-logo-mono,
#agm-concept.agm-portfolio-page .agm-header.is-stuck .agm-logo-mono{opacity:0;transition:opacity 0s linear .3s}

/* FIXED HEADER, LIKE HOME (2026-10-23, Kire in the iOS Simulator: "check out on the scroll how the menu is appearing ..
   can we use the same approach ?"). Home's docked bar is position:fixed and its scroll recorded clean (815 frames, zero
   blink frames). These pages used position:sticky, which during an iPhone momentum scroll lags the top edge and let
   photos flash above the header. Same bar, same look, now fixed; the page starts below it by exactly its height
   (73px on phones, 91px above 760px), so nothing on the page moves. portfolio.js keeps the offset equal to the header's
   real height if it ever changes. */
#agm-concept.agm-portfolio-page .agm-header{position:fixed;inset:0 0 auto;top:0}
#agm-concept.agm-portfolio-page{padding-top:var(--agm-head-h,73px)}
@media(min-width:761px){#agm-concept.agm-portfolio-page{padding-top:var(--agm-head-h,91px)}}