/* In-Line AGM — home concept (study 04, outside design study approved by Igor 2026-09-25).
   Source kept as received: clients/in-line-agm/reference/design-brief/gpt-study-04/kit/inline-agm.css
   Only change: the two static Archivo @font-face rules point at the site's own variable font. */
/* In-Line AGM — architectural direction 04: restrained desktop proportions.
   Scope the accompanying markup with #agm-concept.
   This is a new layout system, not a drop-in skin for the current DOM. */
@font-face{font-family:Archivo;src:url('/fonts/archivo-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

#agm-concept{
  color-scheme:light;
  --agm-paper:#fcfcfb;
  --agm-ink:#20201e;
  --agm-muted:#62625e;
  --agm-blue:#20201e;
  --agm-pale:#f2f2ef;
  --agm-line:#d8d8d3;
  --agm-deep:#1b1b19;
  --agm-gutter:clamp(24px,5.1%,80px);
  --agm-content-gutter:max(var(--agm-gutter),calc((100% - 1120px)/2));
  background:var(--agm-paper);color:var(--agm-ink);
  font:400 16px/1.5 Archivo,Arial,sans-serif;
  overflow:clip;text-align:left;isolation:isolate;position:relative;
}
#agm-concept *{box-sizing:border-box}
#agm-concept [hidden]{display:none!important}
#agm-concept h1,#agm-concept h2,#agm-concept h3,#agm-concept p,#agm-concept figure{margin:0}
#agm-concept a{color:inherit;text-decoration:none}
#agm-concept button{font:inherit;color:inherit;cursor:pointer}
#agm-concept img{display:block;max-width:100%;object-fit:cover}
#agm-concept section{scroll-margin-top:24px}
#agm-concept .agm-label{font-size:11px;line-height:1.5;font-weight:500;letter-spacing:.13em;text-transform:uppercase}
#agm-concept .agm-arrow{display:inline-block;font-family:Arial,sans-serif;font-size:22px;font-weight:400;line-height:1}
#agm-concept .agm-header{position:absolute;inset:0 0 auto;z-index:5;padding:27px var(--agm-gutter);display:flex;align-items:center;justify-content:flex-end;color:#fff;pointer-events:none}
#agm-concept .agm-header>button,#agm-concept .agm-header>nav{pointer-events:auto}
#agm-concept .agm-menu{display:flex;align-items:center;gap:17px;background:transparent;border:0;color:#fff;padding:12px 0 12px 14px;font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;min-height:48px}
#agm-concept .agm-menu-lines{display:flex;flex-direction:column;gap:7px;width:34px}
#agm-concept .agm-menu-lines span{display:block;width:100%;height:1px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
#agm-concept .agm-menu[aria-expanded='true'] .agm-menu-lines span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#agm-concept .agm-menu[aria-expanded='true'] .agm-menu-lines span:nth-child(2){opacity:0}
#agm-concept .agm-menu[aria-expanded='true'] .agm-menu-lines span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#agm-concept .agm-nav{position:absolute;top:88px;right:var(--agm-gutter);width:285px;max-width:calc(100% - 48px);display:flex;flex-direction:column;align-items:stretch;gap:0;background:#1b1b19;color:#fff;padding:18px 25px;font-size:16px;box-shadow:0 16px 35px #0003}
#agm-concept .agm-nav a{padding:15px 0;border-bottom:1px solid #ffffff30;min-height:48px}
#agm-concept .agm-nav a:hover{color:#d2d2cd}
#agm-concept .agm-nav .agm-contact-link{display:flex;gap:24px;align-items:center;justify-content:space-between;border:0;font-size:13px}
#agm-concept .agm-hero{position:relative;min-height:clamp(600px,54vw,760px);display:flex;align-items:center;justify-content:center;color:#fff;background:#242422}
#agm-concept .agm-hero-media{position:absolute;inset:0;overflow:hidden}
#agm-concept .agm-hero-media img{width:100%;height:100%;object-position:center 45%}
#agm-concept .agm-hero-media picture{display:contents}
#agm-concept .agm-hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.79),rgba(0,0,0,.40) 34%,rgba(0,0,0,.40) 69%,rgba(0,0,0,.30)),radial-gradient(ellipse at 50% 49%,rgba(0,0,0,.21),transparent 57%);pointer-events:none}
#agm-concept .agm-emblem{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:clamp(300px,34vw,460px);max-width:88%;aspect-ratio:442/421;overflow:hidden;pointer-events:none;z-index:1}
#agm-concept .agm-emblem img{width:100%;height:auto;max-width:none;opacity:.22;filter:saturate(.65) brightness(1.35)}
#agm-concept .agm-hero-copy{position:relative;z-index:2;width:100%;padding:130px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(-4px)}
#agm-concept h1{color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:clamp(31px,3.8vw,56px);font-weight:400;line-height:1.12;letter-spacing:.17em;padding-left:.17em;margin:0;text-shadow:0 2px 24px #0003;white-space:nowrap}
#agm-concept .agm-hero-specialty{font-size:clamp(11px,1vw,13px);font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.7;color:#f1f1ee;margin-top:18px;text-wrap:balance}
#agm-concept .agm-portfolio-link{margin-top:38px;display:inline-flex;align-items:center;justify-content:space-between;gap:27px;min-height:48px;padding:12px 21px;border:1px solid #e9e9e3;background:#11111112;color:#fff;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:background .25s ease,border-color .25s ease}
#agm-concept .agm-portfolio-link:hover{background:#ffffff1c;border-color:#fff}
#agm-concept .agm-hero-location{position:absolute;bottom:34px;left:var(--agm-gutter);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#e2e2dc;line-height:1.7;z-index:2}
#agm-concept .agm-hero-location span{padding:0 6px}
#agm-concept .agm-text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:44px;border-bottom:1px solid currentColor;font-size:13px;font-weight:500}
#agm-concept .agm-scroll{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#e2e2dc;min-width:44px;min-height:44px}
#agm-concept .agm-scroll span{font:26px/1 Arial,sans-serif;letter-spacing:0;margin-bottom:4px}
#agm-concept .agm-hero-credit{position:absolute;z-index:2;bottom:34px;right:var(--agm-gutter);display:flex;align-items:center;gap:8px;color:#d4d4cf;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
#agm-concept .agm-hero-credit:before{content:'';width:20px;height:1px;background:#ffffff66;margin-right:4px}
#agm-concept .agm-hero-credit strong{color:#fff;font-weight:500}
#agm-concept .agm-intro{display:grid;grid-template-columns:32% 1fr;gap:32px;padding:78px var(--agm-content-gutter);border-top:1px solid var(--agm-line);border-bottom:1px solid var(--agm-line)}
#agm-concept .agm-intro .agm-label{color:var(--agm-muted);padding-top:5px}
#agm-concept .agm-intro .agm-intro-process{font-size:14px;line-height:1.75;color:var(--agm-muted);margin-top:24px;max-width:280px}
#agm-concept .agm-intro h2{font-size:clamp(32px,3vw,42px);letter-spacing:-.035em;line-height:1.2;font-weight:400}
#agm-concept .agm-intro h2 strong{font-weight:500}
#agm-concept .agm-intro-copy>p{max-width:580px;font-size:14px;line-height:1.8;color:var(--agm-muted);margin-top:22px;text-wrap:pretty}
#agm-concept .agm-projects{padding:78px var(--agm-content-gutter) 88px}
#agm-concept .agm-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:18px 0 34px}
#agm-concept h2{font-size:clamp(32px,3vw,42px);font-weight:400;line-height:1.16;letter-spacing:-.035em}
#agm-concept .agm-project-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:35px;align-items:start}
#agm-concept .agm-project{min-width:0}
#agm-concept .agm-project:nth-child(2){margin-top:74px}
#agm-concept .agm-project-image{overflow:hidden;position:relative;background:var(--agm-pale)}
#agm-concept .agm-project-image img{width:100%;aspect-ratio:1.28;filter:grayscale(1);transition:transform .45s ease,filter .6s ease}
#agm-concept .agm-project:nth-child(2) .agm-project-image img{aspect-ratio:.98;object-position:38% center}
#agm-concept .agm-project:hover .agm-project-image img{transform:scale(1.025)}
#agm-concept .agm-project-number{position:absolute;bottom:0;left:0;background:var(--agm-paper);padding:9px 15px;font-size:11px;letter-spacing:.09em}
#agm-concept .agm-project-caption{display:grid;grid-template-columns:1fr auto;gap:7px 12px;padding-top:18px}
#agm-concept .agm-project-caption h3{font-size:24px;font-weight:400;letter-spacing:-.04em;line-height:1.2}
#agm-concept .agm-project-caption p{font-size:14px;color:var(--agm-muted);grid-column:1}
#agm-concept .agm-project-caption .agm-arrow{grid-column:2;grid-row:1/3;align-self:center}
#agm-concept .agm-expertise{padding:78px var(--agm-content-gutter);background:var(--agm-pale);border-top:1px solid var(--agm-line);display:grid;grid-template-columns:39% 1fr;gap:55px}
#agm-concept .agm-expertise h2{margin:20px 0 20px}
#agm-concept .agm-expertise-intro{font-size:13px;line-height:1.65;color:var(--agm-muted);max-width:290px;margin-bottom:27px}
#agm-concept .agm-project:focus-visible .agm-project-image img{filter:grayscale(0)}
@media(hover:hover){#agm-concept .agm-project:hover .agm-project-image img{filter:grayscale(0)}}
#agm-concept .agm-contact{padding:0 var(--agm-content-gutter) 78px;background:var(--agm-paper);color:var(--agm-ink)}
#agm-concept .agm-cbox-main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;align-items:end}
#agm-concept .agm-contact h2{grid-column:1/3;align-self:start;margin:0;max-width:740px;text-wrap:balance}
#agm-concept .agm-contact h2 em{display:block;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}
#agm-concept .agm-contact-action{grid-column:3/5;width:100%;max-width:340px;justify-self:start}
#agm-concept .agm-contact-action>p{color:var(--agm-muted);font-size:14px;line-height:1.7;margin:0 0 23px}
#agm-concept .agm-contact-button{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:15px 20px;border:1px solid var(--agm-deep);background:var(--agm-deep);color:#f5f5ef;font-size:13px;font-weight:500;letter-spacing:.025em;transition:background .25s ease,color .25s ease}
#agm-concept .agm-contact-button .agm-arrow{font-size:26px}
#agm-concept .agm-contact-email{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:var(--agm-muted);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#agm-concept .agm-contact-email:hover{color:var(--agm-ink);text-decoration:underline;text-underline-offset:4px}
#agm-concept .agm-foot-band{padding:0 var(--agm-content-gutter) 35px;background:#191a18;color:#fff}
#agm-concept .agm-footer{display:grid;grid-template-columns:minmax(0,1.75fr) 1fr auto;gap:48px;align-items:center;padding:48px 0 10px;color:#f1f1ec;font-size:13px}
#agm-concept .agm-footer-brand{min-width:0}
#agm-concept .agm-footer-brand img{display:block;width:144px;max-width:100%;height:auto;object-fit:contain}
#agm-concept .agm-footer-label{font-size:11px;line-height:1.6;letter-spacing:.13em;text-transform:uppercase;color:#b9bcb4}
#agm-concept .agm-footer a:hover{text-decoration:underline}
@media(min-width:1300px){#agm-concept .agm-hero-location,#agm-concept .agm-hero-credit{font-size:11px;letter-spacing:.12em}#agm-concept .agm-header{padding-top:34px}#agm-concept .agm-portfolio-link{font-size:12px;min-height:52px;padding:13px 26px}}
@media(max-width:760px){
 #agm-concept .agm-header{padding-top:23px;padding-bottom:23px}
 #agm-concept .agm-hero{min-height:600px}
 #agm-concept .agm-hero-copy{padding:140px 22px;transform:translateY(-10px)}
 #agm-concept .agm-emblem{width:330px;max-width:100%;top:46%}
 #agm-concept .agm-hero-media img{object-position:42% center}
 #agm-concept .agm-hero-media:after{background:linear-gradient(0deg,#000c,#0007 35%,#0007 76%,#0004)}
 #agm-concept h1{font-size:clamp(27px,5vw,36px);letter-spacing:.11em;padding-left:.11em}
 #agm-concept .agm-hero-specialty{max-width:290px;font-size:11px;letter-spacing:.16em;margin-top:16px}
 #agm-concept .agm-hero-location{bottom:54px;left:24px;right:24px;text-align:center;font-size:11px;letter-spacing:.08em}
 #agm-concept .agm-hero-credit{left:24px;right:24px;bottom:29px;justify-content:center;flex-wrap:wrap;font-size:11px;gap:8px;letter-spacing:.08em}
 #agm-concept .agm-hero-credit:before{display:none}
 #agm-concept .agm-scroll{display:none}
 #agm-concept .agm-intro{grid-template-columns:1fr;gap:18px;padding-top:34px;padding-bottom:34px}
 #agm-concept .agm-intro .agm-intro-process{margin-top:10px;margin-bottom:8px}
 #agm-concept .agm-projects{padding-top:42px;padding-bottom:45px}
 #agm-concept .agm-project-grid{gap:22px}
 #agm-concept .agm-project-caption h3{font-size:20px}
 #agm-concept .agm-project:nth-child(2){margin-top:45px}
 #agm-concept .agm-section-heading .agm-text-link{gap:15px}
 #agm-concept .agm-expertise{grid-template-columns:1fr;gap:30px;padding-top:43px;padding-bottom:43px}
 #agm-concept .agm-expertise-intro{max-width:440px}
 #agm-concept .agm-contact{padding-bottom:44px}
 #agm-concept .agm-contact h2{text-wrap:initial}
 #agm-concept .agm-contact-action>p{margin-bottom:19px}
 #agm-concept .agm-foot-band{padding-left:24px;padding-right:24px}
 #agm-concept .agm-footer{grid-template-columns:1fr 1fr;gap:24px 20px;padding-top:36px}
 #agm-concept .agm-footer-brand{grid-column:1/-1;margin-bottom:12px}
 #agm-concept .agm-footer-brand img{width:124px}
}
@media(max-width:480px){
 #agm-concept .agm-project-grid{grid-template-columns:1fr;gap:32px}
 #agm-concept .agm-project:nth-child(2){margin-top:0}
 #agm-concept .agm-project-image img,#agm-concept .agm-project:nth-child(2) .agm-project-image img{aspect-ratio:1.2}
 #agm-concept .agm-section-heading{align-items:flex-start;flex-direction:column;gap:16px}
}
@media(prefers-reduced-motion:reduce){#agm-concept *{scroll-behavior:auto!important;transition:none!important}}

/* ADDED 2026-09-26 — the one change to the study's CSS beyond fonts. The study sets aspect-ratio on these
   photos but not height:auto, so in Chrome the <img height> attribute wins and each photo rendered 233–382px
   taller than in the approved review PDF (the Systems photo 628x853 instead of 629x561). height:auto lets the
   designed ratios apply; object-fit:cover (set on all images above) crops instead of distorting. */
#agm-concept .agm-project-image img{height:auto}
/* ADDED 2026-09-26 (studio round, home review) — defects and parity with the approved review PDF. No new type roles.
   */
/* Photo chips: the PDF sets them in the label role (11px / 500 / .13em) with a wider right margin (190x35 there, 157 here). */
#agm-concept .agm-project-number{font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:9px 37px 9px 15px}
/* Scroll cue: the PDF draws a thin chevron; Arial has no ⌄, so the browser substituted a heavy V. Drawn as a 1px stroke. */
#agm-concept .agm-scroll span{display:block;width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 0 10px;font-size:0}
/* Hero captions: one weight, slash separators, no rule (the PDF); 10px at every width (8px was below legibility). */
#agm-concept .agm-hero-location,#agm-concept .agm-hero-credit{font-size:11px;letter-spacing:.12em}
#agm-concept .agm-hero-credit{font-weight:500;color:#e2e2dc;gap:0}
#agm-concept .agm-hero-credit:before{display:none}
#agm-concept .agm-hero-credit strong{color:inherit}
/* Keyboard focus in the page's own ink, not the browser's blue. */
#agm-concept :focus-visible{outline:1px solid currentColor;outline-offset:4px}
@media(min-width:761px){
 /* Laptop fold (1280x720): the hero ended 29px short of the fold, leaving a sliver of the next section. */
 #agm-concept .agm-hero{min-height:clamp(600px,max(54vw,100svh),760px)}
 /* The PDF's "View the portfolio" rule is 212px wide. */
 #agm-concept .agm-section-heading .agm-text-link{min-width:212px}
}

/* ADDED 2026-09-27 — Selected Work V1 "context + detail" (Kire: "go with V1"). Each context photograph carries a detail
   plate of the same facade, matted in paper like the chip; chip bottom-left, plate in the opposite corner. Layout only. */
#agm-concept .agm-projects--detail .agm-project:nth-child(2) .agm-project-image>img{object-position:92% center}
#agm-concept .agm-projects--detail .agm-detail{position:absolute;z-index:1;background:var(--agm-paper);display:block;overflow:hidden}
#agm-concept .agm-projects--detail .agm-project .agm-project-image .agm-detail img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transform:none!important}
#agm-concept .agm-projects--detail .agm-detail--br{right:0;bottom:0;width:27%;aspect-ratio:.8;padding:10px 0 0 10px}
#agm-concept .agm-projects--detail .agm-detail--tr{right:0;top:0;width:36%;aspect-ratio:.8;padding:0 0 10px 10px}
@media(max-width:760px){#agm-concept .agm-projects--detail .agm-detail--br,#agm-concept .agm-projects--detail .agm-detail--tr{width:30%;padding-left:7px}#agm-concept .agm-projects--detail .agm-detail--br{padding-top:7px}#agm-concept .agm-projects--detail .agm-detail--tr{padding-bottom:7px}}
/* Tablet: a 10px mat is ~10% of a 92px plate; the phone mat (7px) reads lighter (ui-ux-critic 2026-09-27). */
@media(min-width:761px) and (max-width:1024px){#agm-concept .agm-projects--detail .agm-detail--br{padding:7px 0 0 7px}#agm-concept .agm-projects--detail .agm-detail--tr{padding:0 0 7px 7px}}

/* SYSTEM DRAWING + CARD — shared by the Systems catalog and the home Systems box (moved here from portfolio.css on
   2026-10-01, because the home page loads only this stylesheet). One component, one definition. */
#agm-concept .x-cropwrap{position:relative;aspect-ratio:var(--ar)}
#agm-concept .x-crop{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
#agm-concept .x-crop use{pointer-events:none}
#agm-concept .x-dot{fill:#20201e}
#agm-concept .x-tie{stroke:#20201e;stroke-width:1;vector-effect:non-scaling-stroke}
#agm-concept .x-badge{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;display:grid;place-items:center;background:var(--agm-ink);color:#b9bcb4;font-size:11px;font-weight:500;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;line-height:1;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
#agm-concept .x-badge.is-on{background:var(--agm-paper);color:var(--agm-ink);box-shadow:inset 0 0 0 1px var(--agm-ink)}
#agm-concept .xb-card{display:block;color:var(--agm-ink)}
#agm-concept .xb-plate{aspect-ratio:1/1;background:var(--agm-pale);display:flex;align-items:center;justify-content:center;padding:10%;transition:background .3s ease}
#agm-concept .xb-plate .x-cropwrap{width:100%}
#agm-concept .xb-plate .x-cropwrap.is-tall{width:auto;height:100%}
#agm-concept .xb-plate .x-badge{opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .25s ease}
#agm-concept .xb-card:hover .x-badge,#agm-concept .xb-card:focus-visible .x-badge{opacity:1;transform:none}
#agm-concept .xb-card:hover .xb-plate,#agm-concept .xb-card:focus-visible .xb-plate{background:#ebebe7}
#agm-concept .xb-cap{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding-top:20px}
#agm-concept .xb-cap .agm-label{color:var(--agm-muted)}
#agm-concept .xb-name{grid-column:1;margin:6px 0 0;font-size:24px;font-weight:400;line-height:1.25;letter-spacing:-.04em}
#agm-concept .xb-cap .agm-arrow{grid-column:2;grid-row:2;align-self:start;margin-top:14px;transition:transform .25s ease}
#agm-concept .xb-card:hover .agm-arrow{transform:translate(3px,-3px)}
#agm-concept .xb-card:focus-visible{outline:2px solid var(--agm-ink);outline-offset:6px}
@media(max-width:760px){
 #agm-concept .xb-plate{padding:12%}
 #agm-concept .xb-cap{padding-top:12px;column-gap:8px}
 #agm-concept .xb-name{font-size:20px}
 #agm-concept .xb-cap .agm-arrow{margin-top:12px}
}

/* SYSTEMS BOX — the pale inset panel Kire liked (2026-09-27, "I like this box"), since 2026-10-01 a preview of the
   Systems page (Kire: "go with the four drawing cards"). The cards are the catalog's own .xb-card (defined above) on
   paper plates: four up, two up below 900px; the heading and intro sit on the same columns. No new type roles: label 11px, heading, 13px muted intro, card name 24px
   (20px on phones, the catalog's phone role), 13/500 link. */
#agm-concept .agm-expertise--box{display:block;background:var(--agm-paper);border-top:0}
#agm-concept .agm-box{background:var(--agm-pale);padding:44px clamp(24px,5vw,64px) 60px}
#agm-concept .agm-box-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:26px}
#agm-concept .agm-box-tag{color:var(--agm-muted)}
@media(min-width:761px){#agm-concept .agm-box-head{min-height:70px}}
#agm-concept .agm-expertise--box .agm-box-intro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;align-items:end}
#agm-concept .agm-expertise--box .agm-box-intro h2{grid-column:1/3}
#agm-concept .agm-expertise--box .agm-box-intro .agm-expertise-intro{grid-column:3/5}
#agm-concept .agm-expertise--box h2{margin:0}
#agm-concept .agm-expertise--box .agm-expertise-intro{margin:0;max-width:340px}
#agm-concept .agm-box-all{white-space:nowrap}
#agm-concept .agm-sysgrid{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
#agm-concept .agm-sysgrid .xb-plate{background:var(--agm-paper)}
/* no label above the name here (numbers removed 2026-10-01), so the arrow sits on the name's own row */
#agm-concept .agm-sysgrid .xb-cap .agm-arrow{grid-row:1}
#agm-concept .agm-sysgrid .xb-card:hover .xb-plate,#agm-concept .agm-sysgrid .xb-card:focus-visible .xb-plate{background:#fff}
@media(max-width:899px){#agm-concept .agm-sysgrid,#agm-concept .agm-expertise--box .agm-box-intro{grid-template-columns:repeat(2,minmax(0,1fr))}#agm-concept .agm-expertise--box .agm-box-intro h2{grid-column:1}#agm-concept .agm-expertise--box .agm-box-intro .agm-expertise-intro{grid-column:2}}
@media(max-width:760px){
 #agm-concept .agm-expertise--box,#agm-concept .agm-contact--box{padding-left:0;padding-right:0}
 #agm-concept .agm-box{padding:34px 24px 44px}
 #agm-concept .agm-box-head{gap:12px;padding-bottom:20px}
 #agm-concept .agm-box-head .agm-label{white-space:nowrap}
 #agm-concept .agm-box-head .agm-box-tag{display:none}
 #agm-concept .agm-expertise--box .agm-box-intro{grid-template-columns:1fr;gap:16px}
 #agm-concept .agm-expertise--box .agm-box-intro h2,#agm-concept .agm-expertise--box .agm-box-intro .agm-expertise-intro{grid-column:1}
 #agm-concept .agm-sysgrid{gap:28px 16px;margin-top:32px}
}

/* 2026-09-28 (Kire: "Good contrast!", from the outside study): the contact button is filled paper-on-dark at rest and
   inverts to the outline on hover — the reverse of study 04's quiet outline. Headline: "The next project / starts with
   a conversation." on every page (replaces "Bring the drawings", settling the 8/21 decision). */
#agm-concept .agm-contact-button:hover,#agm-concept .agm-contact-button:focus-visible{background:transparent;color:var(--agm-ink)}
#agm-concept .agm-contact :focus-visible{outline:2px solid var(--agm-ink);outline-offset:4px}
#agm-concept .agm-foot-band :focus-visible{outline:2px solid #f5f5ef;outline-offset:4px}

/* ADDED 2026-10-01 — THE MENU, full screen (Kire: "use the structure from the existing version, but update the layout
   to fit the new design"). The live site's structure (five items with one-line notes; phone, 24/7 line, office) in the
   concept's language: the contact band's charcoal ground and text roles, hairline rows, the Systems box's square marker
   on the current page, the white header lockup. The header's own button stays on top and reads "Close". */
#agm-concept .agm-menu-page{--menu-pad:var(--agm-gutter);position:fixed;inset:0;top:0;right:0;width:auto;max-width:none;z-index:1;display:flex;flex-direction:column;gap:0;padding:0 var(--menu-pad) 40px;background:var(--agm-deep);color:#fff;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;font-size:inherit;animation:agm-menu-in .28s ease both}
#agm-concept.agm-portfolio-page .agm-menu-page{--menu-pad:var(--agm-content-gutter);top:0;right:0}
#agm-concept .agm-menu-page[hidden]{display:none}
@keyframes agm-menu-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#agm-concept .agm-menu-page{animation:none}}
#agm-concept .agm-header .agm-menu{position:relative;z-index:2}
#agm-concept .agm-header .agm-menu[aria-expanded='true']{color:#fff}
html.agm-menu-open{overflow:hidden}
#agm-concept .agm-menu-top{display:flex;align-items:center;min-height:96px;border-bottom:1px solid #484b44}
#agm-concept .agm-menu-brand{display:flex;align-items:center;gap:10px;padding:0;border:0;min-height:0}
#agm-concept .agm-menu-brand .agm-logo-mark{height:44px;width:auto}
#agm-concept .agm-menu-brand .agm-logo-type{height:38px;width:auto}
#agm-concept .agm-menu-body{flex:1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,1fr);gap:clamp(40px,8vw,140px);align-items:center;padding-top:clamp(32px,6vh,72px)}
#agm-concept .agm-menu-list{list-style:none;margin:0;padding:0;border-top:1px solid #484b44}
#agm-concept .agm-menu-page .agm-menu-item{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:24px;align-items:center;padding:20px 0 18px;border-bottom:1px solid #484b44;min-height:0;color:#fff}
#agm-concept .agm-menu-title{grid-column:1;font-size:clamp(32px,3.2vw,46px);font-weight:400;line-height:1.18;letter-spacing:-.035em;color:#fff}
#agm-concept .agm-menu-note{grid-column:1;margin-top:6px;font-size:12px;line-height:1.5;color:#c2c5bd}
#agm-concept .agm-menu-mark{grid-column:2;grid-row:1/3;width:7px;height:7px;background:#fff;opacity:0}
#agm-concept .agm-menu-item[aria-current='page'] .agm-menu-mark{opacity:1}
#agm-concept .agm-menu-arrow{grid-column:2;grid-row:1/3;font-size:26px;opacity:0;transform:translate(-4px,4px);transition:opacity .25s ease,transform .25s ease}
#agm-concept .agm-menu-item:hover .agm-menu-arrow,#agm-concept .agm-menu-item:focus-visible .agm-menu-arrow{opacity:1;transform:none}
#agm-concept .agm-menu-item[aria-current='page']:hover .agm-menu-mark,#agm-concept .agm-menu-item[aria-current='page']:focus-visible .agm-menu-mark{opacity:0}
#agm-concept .agm-menu-page .agm-menu-item:hover{color:#fff}
#agm-concept .agm-menu-item:focus-visible{outline:2px solid #f5f5ef;outline-offset:4px}
#agm-concept .agm-menu-side{display:grid;gap:38px;align-content:center}
#agm-concept .agm-menu-side .agm-label{color:#b9bcb4;letter-spacing:.16em;margin:0 0 12px}
#agm-concept .agm-menu-phone{display:inline-block;padding:0;border:0;min-height:0;font-size:24px;letter-spacing:-.04em;line-height:1.2;color:#fff}
#agm-concept .agm-menu-page .agm-menu-detail{display:block;padding:0;border:0;min-height:0;margin-top:8px;font-size:13px;line-height:1.6;color:#f1f1ec;max-width:340px}
#agm-concept .agm-menu-page a.agm-menu-detail:hover,#agm-concept .agm-menu-phone:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){
 #agm-concept .agm-menu-body{grid-template-columns:1fr;align-items:start;gap:44px}
 #agm-concept .agm-menu-top{min-height:80px}
}
@media(max-width:760px){
 #agm-concept .agm-menu-page{--menu-pad:24px}
 #agm-concept.agm-portfolio-page .agm-menu-page{--menu-pad:24px}
 #agm-concept .agm-menu-title{font-size:32px}
 #agm-concept .agm-menu-page .agm-menu-item{padding:16px 0 14px}
 #agm-concept .agm-menu-brand .agm-logo-mark{height:36px}
 #agm-concept .agm-menu-brand .agm-logo-type{height:30px}
}
/* The portfolio header's old dropdown rule (portfolio.css .agm-nav top:100%) must not position the full-screen menu. */
#agm-concept .agm-header .agm-menu-page,#agm-concept.agm-portfolio-page .agm-header .agm-menu-page{inset:0;top:0;right:0;bottom:0;left:0;width:auto;height:auto}
/* The top row is as tall as twice the Close button's centre line, so the logo and Close share one line (set in JS). */
#agm-concept .agm-menu-top{min-height:var(--menu-top,96px)}
/* The old dropdown rules (.agm-nav a: padding + hairline; portfolio .agm-nav z-index 6) must not reach the menu. */
#agm-concept .agm-header .agm-menu[aria-expanded='true']{z-index:30}
#agm-concept .agm-header .agm-menu-page{z-index:25}
#agm-concept .agm-menu-page a.agm-menu-brand,#agm-concept .agm-menu-page a.agm-menu-phone,#agm-concept .agm-menu-page a.agm-menu-detail{padding:0;border:0;min-height:0}
/* ui-ux-critic 2026-10-01 (84f0170) fixes. */
#agm-concept .agm-menu-page :focus-visible,#agm-concept .agm-header .agm-menu[aria-expanded='true']:focus-visible{outline:2px solid #f5f5ef;outline-offset:4px}
#agm-concept .agm-menu-top{position:sticky;top:0;z-index:1;background:var(--agm-deep)}
#agm-concept .agm-menu-list{border-top:0}
@media(max-height:780px) and (min-width:701px){#agm-concept .agm-menu-body{padding-top:24px}#agm-concept .agm-menu-page{padding-bottom:24px}#agm-concept .agm-menu-page .agm-menu-item{padding:16px 0 14px}}
@media(min-width:701px) and (max-width:900px){#agm-concept .agm-menu-body{grid-template-columns:minmax(0,1.4fr) minmax(200px,1fr);align-items:center;gap:40px}#agm-concept .agm-menu-top{min-height:var(--menu-top,96px)}}

/* THE PROCESS in the contact box (Kire 2026-10-01: "that's probably here"; layout like 03, same date). It runs on the
   box's four columns under an ink rule, as 03's cards do. Roles: label, the 24px card-name role, 12px muted caption.
   Numbered because the sequence is real; no vertical dividers (they encoded nothing). */
#agm-concept .agm-process{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--agm-ink)}
#agm-concept .agm-process li{display:flex;flex-direction:column;gap:8px;padding:18px 0 0}
#agm-concept .agm-process-n{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--agm-muted)}
#agm-concept .agm-process-t{font-size:24px;line-height:1.2;letter-spacing:-.04em;color:var(--agm-ink)}
#agm-concept .agm-process-d{font-size:14px;line-height:1.6;color:var(--agm-muted);text-wrap:pretty;max-width:260px}
@media(max-width:760px){
 #agm-concept .agm-process{margin-top:34px;column-gap:16px}
}

/* Below 900px the heading and the action stack (as 03's heading and intro go two-up), the action left-aligned. */
@media(max-width:899px){#agm-concept .agm-process{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}#agm-concept .agm-cbox-main{grid-template-columns:1fr;row-gap:30px}#agm-concept .agm-contact h2,#agm-concept .agm-contact-action{grid-column:1}#agm-concept .agm-contact-action{justify-self:start}}

/* ADDED 2026-10-01 — ARROWS AS DRAWN ICONS (Kire: "the same font throughout the pages"). Archivo has no ↗ ← →, and Arial
   has no ↗, so browsers drew them in whatever system font had them (PingFang on a Mac, something else on Windows and
   Android): measured with Chrome's platform-font report on home, projects, systems and contact. Every arrow span now
   carries data-a (ne / e / w / s) and is drawn as a thin line icon in the text colour, identical on every device. The
   glyph stays in the markup for no-CSS and copy-paste; its size follows each span's existing font-size. */
#agm-concept [data-a]{display:inline-block;width:.8em;height:.8em;vertical-align:-.08em;line-height:0;font-family:Archivo,Arial,sans-serif}
#agm-concept [data-a] svg{display:block;width:100%;height:100%;overflow:visible}
/* ui-ux-critic 2026-10-01 (288b2a2): the 13px source-link arrows draw a heavier stroke so they match the text weight. */
#agm-concept .pd-press-line [data-a] svg{stroke-width:2.4}

/* FOOTER WITH NAVIGATION (Kire 2026-10-01: "Upgrade the footer with proper navigation!"). The contact box's four
   columns with its 64px inset: lockup, Explore (the menu's items), Office, 24/7. A closing row for the copyright under a
   hairline. Roles: the footer label (10px) and the footer's 13px text; links underline on touch. */
#agm-concept .agm-footer{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;row-gap:48px;align-items:start}
#agm-concept .agm-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;line-height:1.6}
#agm-concept .agm-footer-col p{margin:0;color:#f1f1ec}
#agm-concept .agm-footer-col .agm-footer-label{margin-bottom:6px}
#agm-concept .agm-footer-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#agm-concept .agm-footer-col a{display:inline-flex;align-items:center;min-height:32px;color:#f1f1ec}
#agm-concept .agm-footer-legal{grid-column:1/-1;margin:0;padding-top:22px;border-top:1px solid #484b44;font-size:11px;line-height:1.6;letter-spacing:.13em;text-transform:uppercase;color:#b9bcb4}
@media(min-width:761px){
 #agm-concept .agm-footer{padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)}
}
@media(max-width:760px){
 #agm-concept .agm-footer{grid-template-columns:1fr;row-gap:32px}
 #agm-concept .agm-footer-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;width:100%}
 #agm-concept .agm-footer-col a[href^="mailto"]{white-space:nowrap}
}

/* SECTION EYEBROWS, MORE PROMINENT (Kire 2026-10-01: "make the headings more prominent", with "remove numbers all
   together"). The site's one larger uppercase role — the hero's 13px/500/.24em line — in ink. Named to Kire as new by
   color only. */
#agm-concept p.agm-label.agm-eyebrow,#agm-concept span.agm-label.agm-eyebrow,#agm-concept h2.agm-label.agm-eyebrow{font-size:13px;font-weight:500;letter-spacing:.24em;line-height:1.7;color:var(--agm-ink)}

/* ROUND 1 of the 2026-10-02 outside review (Kire: "go with round 1").
   H4 — the contact box leads by its action, not a darker ground (Kire kept it pale on 10/01): the phone number under
   the button in the 24px card-name role, ink. */
#agm-concept .agm-contact-phone{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font-size:24px;line-height:1.25;letter-spacing:-.04em;color:var(--agm-ink)}
#agm-concept .agm-contact-phone:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
#agm-concept .agm-contact-phone+.agm-contact-email{display:flex;margin-top:0}
/* X2 — Home's header scrolled away with the hero; every other concept page keeps a sticky bar. Once the hero is out of
   view the header docks: the same bar as the portfolio pages (paper ground, hairline, color logo left, Menu right).
   Logo + Menu only (Kire 2026-09-27: no "Projects" link beside Menu). */
#agm-concept .agm-dock-logo{display:none}
#agm-concept .agm-header.is-docked{position:fixed;inset:0 0 auto;z-index:20;justify-content:space-between;padding:12px var(--agm-content-gutter);background:var(--agm-paper);color:var(--agm-ink);border-bottom:1px solid var(--agm-line);pointer-events:auto;animation:agm-dock .3s ease backwards}
#agm-concept .agm-header.is-docked .agm-dock-logo{display:flex;align-items:center;gap:12px;min-height:48px}
#agm-concept .agm-header.is-docked .agm-logo img{filter:none}
#agm-concept .agm-header.is-docked .agm-logo-mark{height:40px;width:auto}
#agm-concept .agm-header.is-docked .agm-logo-type{height:36px;width:auto}
#agm-concept .agm-header.is-docked .agm-menu:not([aria-expanded='true']){color:var(--agm-ink)}
html.agm-menu-open #agm-concept .agm-header.is-docked .agm-dock-logo{visibility:hidden}
@keyframes agm-dock{from{transform:translateY(-100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){#agm-concept .agm-header.is-docked{animation:none}}
/* S5 — on touch screens there is no hover to reveal a drawing's part keys, so they show at rest (phones hide them in
   the small grid plates; the opened drawing always shows them). */
/* touch: the part numbers come in one by one when the card scrolls into view (rule below, 2026-10-02) */
/* H1 — the hero's base line now carries the offer; on phones it takes two lines, the place under the offer (no
   dangling slash). */
#agm-concept .agm-hero-location .agm-hero-place{padding:0}
@media(max-width:760px){#agm-concept .agm-hero-location .agm-hero-sep{display:none}#agm-concept .agm-hero-place{display:block}}
/* Critic fixes, round 1 (2026-10-02). Phones: the photo credit sits apart from the hero's offer line and reads as a
   caption; the process steps take one column; the family filter shows it scrolls. */
@media(max-width:760px){
 #agm-concept .agm-hero-location{bottom:72px}
 #agm-concept .agm-hero-credit{opacity:.7}
 #agm-concept .agm-process{grid-template-columns:1fr}
 /* the fade is an overlay, not a mask: Safari's full-page capture painted the masked tab row as a black bar */
 #agm-concept .xb-bar{position:relative}
 #agm-concept .xb-bar::after{content:"";position:absolute;right:-24px;bottom:0;width:64px;height:44px;background:linear-gradient(to right,rgba(252,252,251,0),var(--agm-paper) 80%);pointer-events:none}
}

/* MOBILE ROUND (2026-10-02, Kire: "improve the mobile UI/UX"; three agents on the rendered pages at 390 + 375, touch on).
   Shared: thumb-sized footer and menu links (44px), a smaller stacked footer logo, balanced card names. */
#agm-concept .xb-name{text-wrap:balance}
@media(max-width:760px){
 #agm-concept .agm-footer-col a{min-height:44px}
 #agm-concept .agm-footer-nav{gap:0}
 #agm-concept .agm-footer-brand img{width:96px}
 #agm-concept .agm-menu-page a.agm-menu-phone,#agm-concept .agm-menu-page a.agm-menu-detail{display:flex;width:fit-content;align-items:center;min-height:44px}
 #agm-concept .agm-menu-page a.agm-menu-detail{margin-top:0}
 #agm-concept .agm-process-d{max-width:none}
}
/* Touch QA (mobile round): the dock animation filled "both", so the docked header kept a transform and became the
   containing block of the fixed menu (MENU opened a 72px strip). It now fills backwards only. Fields scrolled into view
   clear the sticky header. */
html:has(#agm-concept){scroll-padding-top:96px}
/* Kire 2026-10-02: "dim the emblem on phones" (it sat right behind the name). Phones also get the readable body role
   (16px, the contact list's) for the home intro and Systems box intro, one tracking value for the hero labels, a 64px
   sticky header and a menu that fits a 667px screen with the phone in view. */
@media(max-width:760px){
 #agm-concept .agm-emblem img{opacity:.11}
 #agm-concept .agm-hero-location,#agm-concept .agm-hero-credit{letter-spacing:.13em}
}
@media(max-width:760px) and (max-height:700px){
 #agm-concept .agm-menu-page .agm-menu-item{padding:10px 0 9px}
 #agm-concept .agm-menu-body{gap:28px}
}
/* Phones: the home's reading paragraphs take the 16px muted body role (critic, mobile round); desktop unchanged. */
@media(max-width:760px){#agm-concept .agm-intro-copy p,#agm-concept .agm-expertise-intro{font-size:16px;line-height:1.65}}
/* PHONES, 2026-10-02 (Kire on his iPhone: "see if you can some animation on the systems products with numbers"; "the
   process could be designed better").
   1. Drawing cards (Systems page + the Home box): on touch screens the part numbers, hidden until hover on desktop, come
      in one after another as the card scrolls into view (inline-agm.js adds .is-keyed once), so a phone shows the drawing
      being keyed part by part. Functional numbers: they are the drawing's own keys.
   2. The process (the contact box on every page): on phones a sequence on one thin line, a square marker per step that
      fills as the step scrolls into view. The line is the order, so it encodes something true. Titles take the 20px
      card-name role phones already use. */
@media(hover:none) and (min-width:761px){#agm-concept .xb-plate .x-badge{opacity:1;transform:none}}
#agm-concept .x-pin{display:none}
/* Phones: a guided keying. Each number appears ON its part (the anchor, not the desktop label position), holds, and
   hands over to the next while a small square stays on the part it named, so the card ends readable with every keyed
   part marked. At most two numbers show at once (paced 2026-10-02, Kire: "the animation is very fast": one number at a time: ~1.4s each, 1.5s apart), so nothing collides or hides the detail at rest (critic 2026-10-02:
   the first version left six numbers sitting on the sill profiles). Tapping opens the full key in the sheet. */
@media(max-width:760px){
 #agm-concept .xb-plate .x-badge{left:var(--ax) !important;top:var(--ay) !important;opacity:0;transform:scale(.5)}
 #agm-concept .xb-plate .x-pin{display:block;position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--agm-ink);opacity:0;transform:scale(0);pointer-events:none}
 #agm-concept .xb-card.is-keyed .x-badge{animation:agm-key 1.7s ease both;animation-delay:calc(var(--i,0) * 1500ms + 300ms)}
 #agm-concept .xb-card.is-keyed .x-pin{animation:agm-pin .45s ease both;animation-delay:calc(var(--i,0) * 1500ms + 1650ms)}
}
@keyframes agm-key{0%{opacity:0;transform:scale(.5)}16%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:scale(.85)}}
@keyframes agm-pin{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@media(max-width:760px){
 #agm-concept .agm-process{row-gap:0;padding-top:26px}
 #agm-concept .agm-process li{position:relative;padding:0 0 26px 30px;gap:6px}
 #agm-concept .agm-process li:last-child{padding-bottom:0}
 #agm-concept .agm-process li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--agm-pale);box-shadow:inset 0 0 0 1px var(--agm-ink);transition:background .7s ease;transition-delay:calc(var(--i,0) * 450ms)}
 #agm-concept .agm-process li::after{content:"";position:absolute;left:4px;top:23px;bottom:-2px;width:1px;background:var(--agm-ink);opacity:.25;transform-origin:top;transform:scaleY(0);transition:transform .8s ease;transition-delay:calc(var(--i,0) * 450ms + 300ms)}
 #agm-concept .agm-process li:last-child::after{display:none}
 #agm-concept .agm-process.is-in li::before{background:var(--agm-ink)}
 #agm-concept .agm-process.is-in li::after{transform:none}
 #agm-concept .agm-process-t{font-size:20px;line-height:1.25}
}
@media(prefers-reduced-motion:reduce){
 #agm-concept .agm-process li::before,#agm-concept .agm-process li::after{transition:none}
 #agm-concept .agm-process li::before{background:var(--agm-ink)}
 #agm-concept .agm-process li::after{transform:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
 #agm-concept .xb-card .x-badge,#agm-concept .xb-card.is-keyed .x-badge{animation:none;opacity:0}
 #agm-concept .xb-card .x-pin,#agm-concept .xb-card.is-keyed .x-pin{animation:none;opacity:1;transform:none}
}
@media(max-width:760px){
 #agm-concept .xb-plate{padding:6%}
}

/* THE MENU ON PAPER (Kire, 2026-10-08 meeting: "the menu should follow the website style and theme - white background
   should work better with the font and style"). Same structure, type roles and rhythm; the ground, rules and type move
   from the charcoal band to the site's paper and ink, the lockup to its color version. One Office block on the right:
   address, phone, email (no 24/7, no hours). */
#agm-concept .agm-menu-page{background:var(--agm-paper);color:var(--agm-ink)}
#agm-concept .agm-menu-top{background:var(--agm-paper);border-bottom-color:var(--agm-line)}
#agm-concept .agm-menu-page .agm-menu-item{border-bottom-color:var(--agm-line);color:var(--agm-ink)}
#agm-concept .agm-menu-page .agm-menu-item:hover{color:var(--agm-ink)}
#agm-concept .agm-menu-title{color:var(--agm-ink)}
#agm-concept .agm-menu-note{color:var(--agm-muted)}
#agm-concept .agm-menu-mark{background:var(--agm-ink)}
#agm-concept .agm-menu-side .agm-label{color:var(--agm-muted)}
#agm-concept .agm-menu-phone{color:var(--agm-ink);margin-top:20px}
#agm-concept .agm-menu-page .agm-menu-detail{color:var(--agm-ink)}
#agm-concept .agm-header .agm-menu[aria-expanded='true']{color:var(--agm-ink)}
#agm-concept .agm-menu-item:focus-visible,#agm-concept .agm-menu-page :focus-visible,#agm-concept .agm-header .agm-menu[aria-expanded='true']:focus-visible{outline-color:var(--agm-ink)}
/* Menu on paper, critic fixes (2026-10-08). The current page's arrow kept an older grey (#b9bcb4, 1.9:1 on paper);
   it is ink. Desktop: the list starts under the top rule and the Office block shares its first row (it floated,
   centered, on no rule). Small phones: spacing only, so the phone and email are on the first screen at 375x667. */
#agm-concept.agm-portfolio-page .agm-menu-page .agm-menu-item[aria-current='page']{color:var(--agm-ink)}
@media(min-width:701px){
 #agm-concept .agm-menu-body{align-items:start}
 #agm-concept .agm-menu-side{align-content:start;padding-top:16px}
}
@media(max-width:700px) and (max-height:700px){
 #agm-concept .agm-menu-page .agm-menu-item{padding:7px 0 5px}
 #agm-concept .agm-menu-body{gap:16px;padding-top:14px}
 #agm-concept .agm-menu-side .agm-label{margin-bottom:6px}
 #agm-concept .agm-menu-phone{margin-top:6px}
}
/* Kire, 2026-10-08: "make sure the font is smaller .. it has to follow the site experience". The menu titles take the
   site's card-name role (24px/400, -.04em, line-height 1.25 — project and system names), 20px on phones like the
   Systems cards; rows tighten with them. Was a 46px display size used nowhere else. */
#agm-concept .agm-menu-title{font-size:24px;line-height:1.25;letter-spacing:-.04em}
#agm-concept .agm-menu-page .agm-menu-item{padding:16px 0 15px}
#agm-concept .agm-menu-arrow{font-size:22px}
@media(max-width:760px){
 #agm-concept .agm-menu-title{font-size:20px}
 #agm-concept .agm-menu-page .agm-menu-item{padding:13px 0 12px}
}
@media(max-width:700px){#agm-concept .agm-menu-body{padding-top:28px;gap:36px}}
@media(max-width:700px) and (max-height:700px){#agm-concept .agm-menu-page .agm-menu-item{padding:9px 0 8px}}
@media(max-width:700px) and (max-height:700px){#agm-concept .agm-menu-body{padding-top:14px;gap:16px}}

/* Hero loads first (Kire, 2026-10-12: "the hero image still loads slow"). The media box carries a 1 KB preview of the same
   frame (inline in home.njk), so the photo's shape shows at once; the full file paints over it. */
#agm-concept .agm-hero-media{background-color:#2b2b29;background-size:cover;background-position:center 45%;background-repeat:no-repeat}
@media(max-width:760px){#agm-concept .agm-hero-media{background-position:42% center}}

/* iPads (Atlas review 2026-10-12, M3 + M5; Kire: "go ahead with the iPad fixes").
   M3: the "SCROLL" cue sat on "FAIRFIELD, NJ" from 761 to 892 px wide (every iPad held upright). Phones already hide it;
   tablets up to 900 px do the same. M5: the 44px tap rules stopped at 760 px, leaving 16–32 px links on iPads; any touch
   screen now gets them (phones included, unchanged there). Footer Home/About also get a 44px minimum width. */
@media(min-width:761px) and (max-width:900px){#agm-concept .agm-scroll{display:none}}
@media(hover:none) and (pointer:coarse){
 #agm-concept .agm-footer-col a{min-height:44px;min-width:44px}
 #agm-concept .agm-footer-nav{gap:0}
 #agm-concept .agm-menu-page a.agm-menu-phone,#agm-concept .agm-menu-page a.agm-menu-detail{display:flex;width:fit-content;align-items:center;min-height:44px}
 #agm-concept .agm-menu-page a.agm-menu-detail{margin-top:0}
}

/* Hero services block (2026-10-22, mockup B adapted). Same values as the hero caption role (.agm-hero-location) and the
   specialty role (.agm-hero-specialty), so no new type role. Replaces the one-line services/location caption. */
#agm-concept .agm-hero-services{position:absolute;z-index:2;bottom:34px;left:var(--agm-gutter);margin:0}
#agm-concept .agm-hero-services p{margin:0}
#agm-concept .agm-hero-cap{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#e2e2dc;line-height:1.7}
#agm-concept .agm-hero-svc{font-size:clamp(11px,1vw,13px);font-weight:500;letter-spacing:.24em;text-transform:uppercase;line-height:1.7;color:#f1f1ee;margin:6px 0 8px !important}
@media(max-width:760px){
 #agm-concept .agm-hero-services{left:24px;right:24px;bottom:62px;text-align:center}
 #agm-concept .agm-hero-svc{font-size:11px;letter-spacing:.16em;margin:2px 0 4px !important}
}

/* AGENCY CREDIT (Kire 2026-10-22: "please add credit to Veobit somewhere"). The closing row becomes legal line (left) +
   "Design by Veobit" (right), both in the legal line's own role; on phones the credit wraps under it. */
#agm-concept .agm-footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 32px}
#agm-concept .agm-footer-legal p{margin:0}
#agm-concept .agm-footer-legal .footer-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* PRE-LAUNCH FIX 4 (2026-10-23, ui-ux-critic): footer legal links read as links, underlined like the body links (they
   were the (c) text's color with no underline, on every page). */
#agm-concept .agm-footer-legal p a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* MENU LOGO = HEADER LOGO (2026-10-23, Kire: "menu distortion to listing page"). Opening the menu used to swap the header
   logo for a smaller blue copy (20x36 + 98x30 on phones vs the header's 22x40 + 117x36; 25x44 + 124x38 vs 27x48 + 143x44 on
   desktop), 2px lower, and on the home page 87px further left (the menu used the page gutter, the docked header the
   content gutter). The menu's logo now takes the header's sizes, treatment and gutter, so it does not move or change. */
#agm-concept .agm-menu-brand{gap:12px}
#agm-concept .agm-menu-brand .agm-logo-mark{height:40px}
#agm-concept .agm-menu-brand .agm-logo-type{height:36px}
#agm-concept .agm-header.is-docked .agm-menu-page{--menu-pad:var(--agm-content-gutter)}
#agm-concept.agm-portfolio-page .agm-menu-brand img{filter:grayscale(1) brightness(.6) contrast(1.5)}
@media(min-width:761px){
 #agm-concept.agm-portfolio-page .agm-menu-brand .agm-logo-mark{height:48px}
 #agm-concept.agm-portfolio-page .agm-menu-brand .agm-logo-type{height:44px}
}
@media(max-width:760px){
 #agm-concept .agm-menu-brand .agm-logo-mark{height:40px}
 #agm-concept .agm-menu-brand .agm-logo-type{height:36px}
 #agm-concept .agm-header.is-docked .agm-menu-page{--menu-pad:24px}
}

/* HOME HERO ON PHONES, OPTION E (2026-10-23, Kire: "go: menu, hero E, speed"; mockups in
   reference/design-brief/mobile-hero-2026-10-23/). Nearly full screen like desktop (the screen minus 64px, so the next
   section shows and invites the scroll), the facade + skyline crop kept, and no emblem on phones: dimmed it still read as
   a bluish smudge behind the name (supersedes the 2026-10-02 "dim the emblem on phones"). Desktop is unchanged. */
@media(max-width:760px){
 #agm-concept .agm-hero{min-height:600px;min-height:max(600px,calc(100svh - 64px))}
 #agm-concept .agm-emblem{display:none}
 #agm-concept .agm-hero-media img{object-position:44% center}
}

/* LOGO SWAP (2026-10-23): header and menu carry a black-and-white and a color copy of each logo part, stacked. Color shows
   by default (home's docked bar); the inner pages show black and white until scrolled (portfolio.css). */
#agm-concept .agm-logo-swap{display:inline-grid;align-items:center}
#agm-concept .agm-logo-swap>img{grid-area:1/1}
#agm-concept .agm-logo-mono{opacity:0}

/* NO SCROLL-TRIGGERED MOTION ON PHONES (2026-10-23, Kire: "the blinking when scrolling is still there - only on mobile ..
   resolve it"). Measured during a phone-size scroll (ui-ux-critic): the drawing cards played 22 (home) / 47 (Systems)
   number-badge pops, 1.5 s apart per card (the 2026-10-02 "keying"), and the process list above the footer flipped its four
   markers light → black in sequence on every page ("the footer is blinking"). On a phone, while the thumb moves, that reads
   as flicker. Phones now show the END state from the start — each keyed part marked with its small square, the process
   markers solid and the line drawn — the same state reduced-motion users already got. Desktop keeps hover keys. */
@media(max-width:760px){
 #agm-concept .xb-card .x-badge,#agm-concept .xb-card.is-keyed .x-badge{animation:none;opacity:0;transition:none}
 #agm-concept .xb-card .x-pin,#agm-concept .xb-card.is-keyed .x-pin{animation:none;opacity:1;transform:none;transition:none}
 #agm-concept .agm-process li::before,#agm-concept .agm-process.is-in li::before{transition:none;background:var(--agm-ink)}
 #agm-concept .agm-process li::after,#agm-concept .agm-process.is-in li::after{transition:none;transform:none}
}

/* iOS BOUNCE COLOR (2026-10-23): the root background shows only in iPhone Safari's rubber-band area. It matches the
   edge in view (inline-agm.js toggles .agm-canvas-foot at the page midpoint): page paper at the top (the home page's dark
   hero ground on home), the footer's ink at the bottom. It was transparent, which iOS paints white. */
html{background-color:#fcfcfb}
html.agm-home{background-color:#242422}
html.agm-canvas-foot{background-color:#191a18}
/* TOUCH SCREENS: no filter transitions on photos (2026-10-23). There is no hover on a phone, so the transitions never
   play a purpose there, and iOS Safari re-rasterizes filtered images that carry them during momentum scroll. The logo's
   opacity crossfade is kept. */
@media(hover:none){
 #agm-concept img:not(.agm-logo-mono):not(.agm-logo-color){transition:none}
}

/* HEADER CAP (2026-10-23, found in the iOS Simulator: Kire "the blinking is still there"). iPhone Safari draws the page
   right up under the status bar, and during a momentum scroll the sticky header lags the top edge by a few pixels, so the
   scrolling photos flashed through a thin band between the clock and the header (frames 439/441 of a 30 fps recording;
   frame 440 shows the header itself 2–3px off). A band of the header's own paper now extends upward behind it, so
   anything showing above the header is paper, never moving photos. Invisible otherwise: it sits above the viewport. */
#agm-concept.agm-portfolio-page .agm-header::before,
#agm-concept .agm-header.is-docked::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:var(--agm-paper);pointer-events:none}