:root{
  --cursor-crosshair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M10.5 1v19M1 10.5h19' stroke='%2330312f' stroke-width='1'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%23f05a28'/%3E%3C/svg%3E") 10 10,crosshair;
  --cursor-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M10.5 1v19M1 10.5h19' stroke='%23f05a28' stroke-width='1'/%3E%3Crect x='8.5' y='8.5' width='4' height='4' fill='%23f05a28'/%3E%3C/svg%3E") 10 10,crosshair;
  --paper:#ffffff;
  --ink:#332e20;
  --muted:#706659;
  --hair:#d5cec3;
  --orange:#f93822;
  --mono:Monaco,"Courier New",monospace;
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{cursor:var(--cursor-crosshair)}#site{height:100dvh;width:100%;position:relative;overflow:hidden}a,button{font:inherit;color:inherit;text-decoration:none;cursor:var(--cursor-orange)}button{border:0;padding:0;background:none}a:focus-visible,button:focus-visible{outline:1px solid var(--orange);outline-offset:5px}.hover-word:hover,.phrase:hover{background:var(--orange);color:var(--paper);cursor:var(--cursor-orange)}h1,h2,h3,p,figure{margin:0;font-weight:400}h1{font-size:24px;line-height:1.25;letter-spacing:.01em}h2{font-size:15px;line-height:1.5}p{font-size:12px;line-height:1.7}img{display:block;max-width:100%}.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;white-space:nowrap;font-size:15px;line-height:1.2;letter-spacing:.015em;text-transform:uppercase}.center .brand{font-weight:700;font-size:1.18em;letter-spacing:.005em}.sep{padding:0 11px;color:#9a9c97}.center a{position:relative}.center a:hover{background:var(--orange);color:var(--paper)}.portal{color:var(--orange)}.mobile-home-nav{display:none}.legal,.mark{position:absolute;bottom:26px;font-size:9px;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;color:#747772}.legal{left:29px}.mark{right:29px;text-align:right}.panel-head{position:absolute;left:30px;right:30px;top:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.035em}.panel-head h1{font-size:10px;line-height:1.5;max-width:75%}.close{white-space:nowrap}.viewport{position:absolute;inset:94px 30px 88px;min-height:0;overflow:hidden}.sheet-controls{position:absolute;bottom:32px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;line-height:1.5}.sheet-controls nav{display:flex;gap:24px;align-items:center}.sheet-controls button:disabled{color:#aaa;cursor:var(--cursor-crosshair)}.sheet-controls .count{color:#777a75;font-size:9px}.sheet-controls .section-link{font-size:9px}.tabs{display:flex;gap:24px;border-top:1px solid var(--hair);padding:13px 0;flex-wrap:wrap;font-size:10px;line-height:1.5}.tabs button[aria-pressed=true]{color:var(--orange)}.reading{height:100%;width:min(670px,100%);margin-left:auto;margin-right:12%;overflow:hidden}.reading>*{margin-bottom:20px}.reading .micro{font-size:10px;line-height:1.6;color:#777a75;text-transform:uppercase}.reading .data{display:grid;grid-template-columns:160px 1fr;gap:20px;border-top:1px solid var(--hair);padding:12px 0;margin-bottom:0;font-size:11px;line-height:1.6}.reading .data span:first-child{color:#777a75}.text-link{font-size:11px;display:inline-block}.photo-sheet{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:15px}.photo-sheet img{width:100%;height:100%;object-fit:contain;object-position:left center}.photo-sheet figcaption{font-size:9px;line-height:1.5;color:#777a75;max-width:100%}.index-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px;height:100%}.register{height:100%;min-height:0;display:flex;flex-direction:column}.index-title{font-size:10px;line-height:1.6;color:#777a75;margin-bottom:24px;text-transform:uppercase}.index-rows{min-height:0;flex:1}.index-row{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;height:var(--row-height,54px);border-top:1px solid var(--hair);font-size:12px;line-height:1.5}.index-row .number{font-size:9px;color:#777a75}.index-row.active .number{color:var(--orange)}.index-row .phrase{justify-self:start}.preview{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px;min-width:0}.preview img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(.96)}.preview figcaption{font-size:9px;line-height:1.6}.subtle{font-size:10px;color:#777a75;line-height:1.6}.contact-sheet{height:100%;display:flex;flex-direction:column;justify-content:center;width:min(600px,100%);margin:auto;gap:25px}.contact-sheet>a{font-size:18px}.contact-sheet .subtle{max-width:400px}.portal-sheet{height:100%;width:min(670px,100%);margin:0 auto;display:flex;flex-direction:column;gap:20px}.portal-sheet h2{font-size:20px}.portal-sheet p{font-size:12px}.portal-sheet label{font-size:11px;line-height:1.6}.portal-sheet select,.portal-sheet textarea{font:inherit;font-size:12px;line-height:1.6;border:1px solid var(--hair);padding:10px;background:transparent;color:var(--ink);width:100%;border-radius:0}.portal-sheet textarea{resize:none;height:110px;overflow:hidden;cursor:text}.portal-sheet select{cursor:var(--cursor-orange)}.portal-sheet form{display:flex;flex-direction:column;gap:12px}.action{align-self:flex-start;font-size:11px;text-decoration:underline;text-underline-offset:5px}.status{font-size:10px!important;line-height:1.6;color:#777a75}.portal-tabs{flex-shrink:0}.portal-body{min-height:0;flex:1;display:flex;flex-direction:column;gap:18px}.portal-body ol{font-size:12px;line-height:2;padding-left:20px}.portal-note{font-size:9px!important}.empty{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
@media(max-width:760px){.center{display:none}.mobile-home-nav{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:min(280px,82vw);display:flex;flex-direction:column;align-items:center;font-size:16px;line-height:1.68;letter-spacing:.02em;text-transform:uppercase;text-align:center}.mobile-home-nav .brand{font-weight:700;font-size:19px;line-height:1.15;margin-bottom:14px}.mobile-home-nav .portal{margin-top:14px}.mobile-home-nav a:hover{background:var(--orange);color:var(--paper)}.legal,.mark{display:none}.panel-head{top:20px;left:18px;right:18px;font-size:9px}.panel-head h1{font-size:9px;max-width:74%}.close{font-size:10px}.viewport{inset:70px 18px 74px}.sheet-controls{bottom:25px;left:18px;right:18px;font-size:11px;gap:8px}.sheet-controls nav{gap:18px}.sheet-controls .section-link{font-size:9px;max-width:90px}.reading{margin:0;width:100%}.reading>*{margin-bottom:20px}.reading p{font-size:13px;line-height:1.65}.reading h1{font-size:22px}.reading .data{grid-template-columns:100px 1fr;gap:15px;font-size:11px}.index-layout{grid-template-columns:1fr;gap:0}.preview{display:none}.index-title{font-size:11px;margin-bottom:24px}.index-row{font-size:13px;grid-template-columns:28px 1fr}.photo-sheet figcaption{font-size:10px}.photo-sheet img{object-position:center}.contact-sheet>a{font-size:15px;letter-spacing:-.5px}.contact-sheet{gap:22px}.contact-sheet .subtle{font-size:12px}.portal-sheet{gap:14px}.portal-sheet h2{font-size:17px}.portal-sheet p{font-size:12px;line-height:1.6}.tabs{gap:12px;font-size:10px;padding:10px 0}.portal-body{gap:14px}.portal-sheet textarea{height:90px}.portal-sheet label{font-size:11px}.portal-note{font-size:9px!important}.action{font-size:11px}.hover-word:hover{background:var(--orange);color:var(--paper)}}
@media(max-height:540px){.viewport{top:62px;bottom:58px}.sheet-controls{bottom:19px}.panel-head{top:18px}.portal-sheet{gap:8px}.portal-body{gap:8px}.portal-body h2{font-size:15px}.portal-body p{font-size:11px}.portal-sheet textarea{height:65px}.tabs{padding:7px 0}.portal-body ol{margin:0;line-height:1.7}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.index-layout{grid-template-rows:minmax(0,1fr)}.preview{min-height:0}.preview img{min-height:0}
.preview{cursor:var(--cursor-orange)}
/* Phone safe areas and touch targets; desktop reference remains unchanged. */
@media(pointer:coarse){
 body{cursor:auto}a,button{touch-action:manipulation}
 .mobile-home-nav>a{min-height:44px;display:flex;align-items:center;justify-content:center}
 .mobile-home-nav .brand{margin-bottom:8px}.mobile-home-nav .portal{margin-top:8px}
 .close,.sheet-controls button,.sheet-controls .section-link,.tabs button,.action{position:relative}
 .close:after,.sheet-controls button:after,.sheet-controls .section-link:after,.tabs button:after,.action:after{content:'';position:absolute;inset:-13px -5px}
 .hover-word:hover,.phrase:hover{background:transparent;color:inherit}
 .phrase:active,.mobile-home-nav a:active{background:var(--orange);color:var(--paper)}
 .panel-head{top:max(20px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
 .viewport{top:max(70px,calc(env(safe-area-inset-top) + 48px));bottom:max(74px,calc(env(safe-area-inset-bottom) + 56px));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
 .sheet-controls{bottom:max(25px,calc(env(safe-area-inset-bottom) + 18px));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
 .portal-sheet textarea,.portal-sheet select{font-size:16px}
 body.editing-note .panel-head,body.editing-note .sheet-controls,body.editing-note .portal-note,body.editing-note .portal-tabs,body.editing-note .portal-body>h2,body.editing-note label{display:none}
 body.editing-note .viewport{top:max(20px,env(safe-area-inset-top));bottom:max(20px,env(safe-area-inset-bottom))}
 body.editing-note .portal-sheet,body.editing-note .portal-body{gap:0}
 body.editing-note textarea{height:110px}
}
@media(pointer:coarse){.mobile-home-nav>a{column-gap:.6ch}}

/* V5: immediate word-level hover, no transitions, static composition. */
a,button,.hover-word,.phrase{transition:none!important;animation:none!important}
.center a:hover,.mobile-home-nav a:hover,.index-row:hover .phrase,.index-row:focus-visible .phrase{background:var(--orange);color:var(--paper)}
.index-row:hover,.index-row:focus-visible{outline:none}
@media(pointer:coarse){.index-row:hover .phrase{background:transparent;color:inherit}.index-row:focus-visible .phrase{background:var(--orange);color:var(--paper)}}

/* Three quiet palette swatches, inspired by the Cole Calfee portfolio. */
:root[data-palette="sand"]{--paper:#ddcfb3;--ink:#332e20;--muted:#6d6150;--hair:#b5a68c;--orange:#f93822}
:root[data-palette="umber"]{--paper:#332e20;--ink:#fff9f1;--muted:#c5b9a7;--hair:#71685c;--orange:#f93822}
:root[data-palette="umber"]{--cursor-crosshair:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cpath d='M10.5 1v19M1 10.5h19' stroke='%23f93822' stroke-width='1'/%3E%3Crect x='9' y='9' width='3' height='3' fill='%23f93822'/%3E%3C/svg%3E") 10 10,crosshair;--cursor-orange:var(--cursor-crosshair)}
/* Align fixed labels, separators and metadata with the active palette. */
:root[data-palette="sand"] .sep,:root[data-palette="sand"] .legal,:root[data-palette="sand"] .mark,:root[data-palette="sand"] .subtle,:root[data-palette="sand"] .index-title,:root[data-palette="sand"] .index-row .number,:root[data-palette="sand"] .reading .micro,:root[data-palette="sand"] .reading .data span:first-child,:root[data-palette="sand"] .photo-sheet figcaption,:root[data-palette="sand"] .preview figcaption,:root[data-palette="sand"] .sheet-controls .count{color:var(--muted)}
:root[data-palette="umber"] .sep,:root[data-palette="umber"] .legal,:root[data-palette="umber"] .mark,:root[data-palette="umber"] .subtle,:root[data-palette="umber"] .index-title,:root[data-palette="umber"] .index-row .number,:root[data-palette="umber"] .reading .micro,:root[data-palette="umber"] .reading .data span:first-child,:root[data-palette="umber"] .photo-sheet figcaption,:root[data-palette="umber"] .preview figcaption,:root[data-palette="umber"] .sheet-controls .count{color:var(--muted)}
:root[data-palette="sand"] .reading .data span:first-child,:root[data-palette="umber"] .reading .data span:first-child{color:var(--muted)}

/* Project 01 / Editorial photographic plate. No overlay or scrolling. */
.project-plate{grid-template-rows:minmax(0,1fr) auto;gap:17px}
.project-plate img{object-fit:contain;object-position:center center}
.project-plate-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:end;border-top:1px solid var(--hair);padding-top:15px;max-width:none;color:var(--ink)}
.project-plate-name{font-size:clamp(18px,2.3vw,34px);line-height:1.1;letter-spacing:-.035em;text-transform:uppercase;overflow-wrap:anywhere}
.project-plate-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:9px;line-height:1.5;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media(max-width:760px){.project-plate{gap:12px}.project-plate-caption{grid-template-columns:1fr;gap:7px;padding-top:10px}.project-plate-name{font-size:clamp(19px,5.2vw,28px)}.project-plate-meta{flex-direction:row;align-items:start;justify-content:space-between;flex-wrap:wrap;gap:4px;font-size:9px;white-space:normal}}
@media(max-height:600px){.project-plate-name{font-size:19px}.project-plate-caption{padding-top:8px}}

/* Freeman opening, adapted from the current website's eagle-to-home reveal. */
.freeman-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--paper);pointer-events:none;animation:freeman-intro-out 1.65s ease-in-out both}
.freeman-intro img{width:clamp(88px,11vw,145px);height:auto;display:block}
@keyframes freeman-intro-out{0%,41%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.freeman-intro{display:none;animation:none}}

/* V5 navigation refinement: shared interior shell, × CLOSE states, FREEMAN GC register. */
#site{height:100%;height:100dvh}
#main{height:100%}
.panel-head h1[tabindex="-1"]:focus,.fw-crumb[tabindex="-1"]:focus{outline:none}
.panel-head .close:disabled{color:var(--muted);opacity:.55;cursor:var(--cursor-crosshair)}
.panel-head .close:disabled:hover{background:none;color:var(--muted)}
.panel-head .crumb{position:relative}
.sheet-controls .section-link:empty{min-width:1px}
@media (pointer:coarse){
  .close:after,.sheet-controls button:after,.sheet-controls .section-link:after{inset:-15px -8px}
  .panel-head .crumb:after{content:"";position:absolute;inset:-15px -6px}
  .index-row{min-height:48px}
}
/* Fix: only the label column of a data row is muted (word spans inherit the value colour). */
:root .reading .data > span + span .hover-word:first-child:not(:hover){color:var(--ink)}
@media (pointer:coarse){
  .close:after,.sheet-controls button:after,.sheet-controls .section-link:after,.panel-head .crumb:after{inset:-17px -8px}
  .center a:after{content:"";position:absolute;inset:-14px -6px}
}

/* Contact: information left, one bordered message box right. */
body[data-route="contact"] .viewport{display:flex}
.contact-layout{min-height:0;width:min(940px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.contact-label{display:block;margin:0 0 22px;font:10px/1.5 var(--mono);color:var(--muted);letter-spacing:.035em;text-transform:uppercase}
.contact-layout .contact-sheet{margin:0;width:100%;height:auto;justify-content:flex-start;gap:22px}
.contact-layout .contact-sheet .contact-label{margin-bottom:0}
.contact-layout .contact-sheet>a{align-self:flex-start}
.contact-inquiry{display:flex;flex-direction:column;min-width:0;margin:0}
.contact-inquiry textarea{display:block;width:100%;height:clamp(180px,32vh,300px);min-height:120px;resize:none;border:1px solid var(--hair);border-radius:0;background:#fff;color:#292927;padding:16px;font:12px/1.7 var(--mono);outline:none;cursor:text;-webkit-appearance:none;appearance:none}
.contact-inquiry textarea:focus{border-color:var(--orange)}
.contact-inquiry textarea::placeholder{color:var(--muted);opacity:1}
.contact-inquiry button{align-self:flex-start;margin-top:16px;padding:8px 0;border:0;background:transparent;color:var(--ink);font:11px var(--mono);letter-spacing:.035em;position:relative}
.contact-inquiry button:hover{background:var(--orange);color:var(--paper)}
.contact-disclaimer{margin:8px 0 0;font:9px/1.5 var(--mono);color:var(--muted);text-transform:uppercase}
@media(max-width:760px){
 .contact-layout{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(28px,5vh,44px);max-width:480px}
 .contact-label{margin-bottom:14px}
 .contact-layout .contact-sheet{gap:14px}
 .contact-inquiry textarea{height:clamp(120px,22dvh,210px);font-size:16px;line-height:1.5;padding:12px}
 .contact-inquiry button{min-height:44px;margin-top:6px;font-size:12px}
 .contact-disclaimer{margin-top:0}
}
@media(max-height:600px) and (orientation:landscape){
 .contact-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:28px;max-width:none;align-items:start}
 .contact-label{margin-bottom:8px}
 .contact-layout .contact-sheet{gap:9px}
 .contact-layout .contact-sheet>a{font-size:14px}
 .contact-inquiry textarea{height:clamp(80px,34dvh,150px);min-height:70px;font-size:16px;padding:10px}
 .contact-inquiry button{min-height:44px;margin-top:2px}
 .contact-disclaimer{display:none}
}

/* White writing surface remains white across all three site palettes. */
.contact-inquiry textarea{background:#fff;color:#292927}
.contact-inquiry textarea::placeholder{color:#868580}

/* Section line: the same four destinations on every interior page; current section in orange. */
.site-nav{display:flex;align-items:center;min-width:0;white-space:nowrap;text-transform:uppercase;letter-spacing:.035em}
.site-nav .sep{padding:0 10px}
.site-nav a{position:relative}
.site-nav .brand{font-weight:700}
.site-nav .is-current{color:var(--orange)}
.site-nav a:hover{background:var(--orange);color:var(--paper)}
.fw-close[hidden]{display:none}
@media(max-width:760px){.site-nav .sep{padding:0 7px}}
@media(max-width:360px){.site-nav .sep{padding:0 5px}}
@media(pointer:coarse){.site-nav a::after{content:"";position:absolute;inset:-17px -5px}}
.sheet-controls nav[hidden]{display:none}
/* Entrance brand: orange FREEMAN GC in the navigation's own Monaco, size and baseline; not a link.
   It is an item of the centred group, so brand and navigation centre as one. */
.brand-id{color:var(--orange);pointer-events:none;user-select:none;white-space:nowrap;font:inherit;letter-spacing:inherit;text-transform:uppercase}
.center .brand-id{margin-right:30px}
.mobile-home-nav .brand-id{display:flex;align-items:center;justify-content:center;min-height:44px;margin-bottom:22px}

/* Projects index: one full-width table — NO. / PROJECT / CLIENT / ARCHITECT / DATE; each row one link. */
.pi{height:100%;display:flex;flex-direction:column}
.pi-head,.pi-link{display:grid;grid-template-columns:96px minmax(0,1.9fr) minmax(0,1.15fr) minmax(0,.95fr) 96px;column-gap:24px;align-items:baseline}
.pi-head{padding:0 0 12px;font-size:9px;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pi-scroller{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--hair) transparent;border-top:1px solid var(--hair)}
.pi-list{list-style:none;margin:0;padding:0}
.pi-row{border-bottom:1px solid var(--hair)}
.pi-link{padding:18px 0;color:var(--ink);outline:none}
.pi-no{font-size:11px;color:var(--muted);letter-spacing:.04em}
.pi-name{justify-self:start;font-size:13px;line-height:1.45;text-transform:uppercase;letter-spacing:.04em}
.pi-client,.pi-arch,.pi-date{min-width:0;font-size:11px;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
.pi-date,.pi-head-date{text-align:right}
.pi-link:hover .pi-name,.pi-link:focus-visible .pi-name{background:var(--orange);color:var(--paper)}
.pi-link:hover .pi-no,.pi-link:focus-visible .pi-no,.pi-row.is-current .pi-no{color:var(--orange)}
@media(pointer:coarse){
 .pi-link:hover .pi-name{background:transparent;color:var(--ink)}
 .pi-link:hover .pi-no{color:var(--muted)}
 .pi-link:active .pi-name{background:var(--orange);color:var(--paper)}
}
@media(max-width:760px){
 .pi-head{display:none}
 .pi-link{grid-template-columns:40px minmax(0,1fr);row-gap:5px;padding:16px 0}
 .pi-no{font-size:10px}
 .pi-name{font-size:14px}
 .pi-client,.pi-arch,.pi-date{grid-column:2;text-align:left;font-size:10px}
 .pi-empty{display:none}
}

/* Project gallery: one photograph at a time beside the name, place and verified credits. */
.pg{height:100%;display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:clamp(32px,4vw,64px)}
.pg-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.pg-name{font-size:13px;line-height:1.45;text-transform:uppercase;letter-spacing:.04em;font-weight:400}
.pg-place{font-size:10px;line-height:1.5;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 14px}
.pg-credits{margin:0;font-size:10px;line-height:1.5}
.pg-credits div{border-top:1px solid var(--hair);padding:8px 0}
.pg-credits dt{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:9px}
.pg-credits dd{margin:2px 0 0}
.pg-related{align-self:flex-start;margin-top:12px;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.pg-stage{min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px}
.pg-frame{flex:1;min-height:0;overflow:hidden;outline:none;touch-action:pan-y pinch-zoom}
.pg-frame:focus-visible{outline:1px solid var(--orange);outline-offset:4px}
.pg-track{height:100%;display:flex;transition:transform 280ms cubic-bezier(.25,.1,.25,1);will-change:transform}
.pg-slide{flex:0 0 100%;height:100%;margin:0;display:flex;align-items:flex-start;justify-content:flex-start}
/* Never stretched or enlarged: shown at most at natural size, scaled down to fit. */
.pg-slide img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;background:var(--hair)}
.pg-frame[data-side="next"]:not([data-last="true"]) img,.pg-frame[data-side="prev"]:not([data-first="true"]) img{cursor:var(--cursor-orange)}
/* One compact group centred under the gallery frame: ← 01 / 03 →. Fixed position as photos change. */
.pg-controls{display:flex;justify-content:center;align-items:center;gap:22px;flex-shrink:0;height:17px}
.pg-arrow{position:relative;font:15px/1 var(--mono);color:var(--ink);padding:2px 0;cursor:var(--cursor-orange)}
.pg-arrow:hover:not(:disabled),.pg-arrow:focus-visible{color:var(--orange);outline:none}
.pg-arrow:disabled{opacity:.25;cursor:var(--cursor-crosshair)}
@media(pointer:coarse){.pg-arrow::after{content:"";position:absolute;inset:-14px -18px}.pg-arrow:hover:not(:disabled){color:var(--ink)}.pg-arrow:active:not(:disabled){color:var(--orange)}}
.pg-count{margin:0;font-size:11px;line-height:1.5;color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;min-width:7ch;text-align:center}
@media(prefers-reduced-motion:reduce){.pg-track{transition:none}}
@media(max-width:760px){
 .pg{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);row-gap:18px}
 .pg-info{gap:3px}
 .pg-place{margin:0 0 6px}
 .pg-credits{display:flex;flex-wrap:wrap;column-gap:16px}
 .pg-credits div{border-top:0;padding:2px 0}
 .pg-related{margin-top:6px}
 .pg-slide{align-items:center}
}
@media(max-width:760px) and (orientation:landscape){
 .pg{grid-template-columns:150px minmax(0,1fr);grid-template-rows:none;column-gap:22px}
 .pg-credits{display:block}
}

/* Contact relay: quiet email field, same typography and geometry. */
.contact-inquiry .contact-email-label{margin-top:12px;margin-bottom:6px;font:10px/1.3 var(--mono);letter-spacing:.06em;color:var(--muted)}
.contact-inquiry input[type="email"]{width:100%;border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;color:var(--ink);padding:8px 0;font:12px/1.5 var(--mono);outline:none;cursor:text}
.contact-inquiry input[type="email"]:focus{border-color:var(--orange)}
.contact-inquiry input[type="email"]::placeholder{color:var(--muted)}
.contact-inquiry .contact-honeypot{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;left:-9999px!important}
.contact-inquiry button:disabled{opacity:.55;cursor:wait}
@media(max-width:760px){.contact-inquiry input[type="email"]{font-size:16px}}

/* Client Access: discreet perimeter navigation on entrance only. */
.client-access-entry{position:absolute;right:30px;top:29px;z-index:12;font-size:10px;line-height:1.5;letter-spacing:.035em;color:var(--orange);white-space:nowrap;text-transform:uppercase}
.client-access-entry:hover,.client-access-entry:focus-visible{background:var(--orange);color:var(--paper)}
@media(max-width:760px){.client-access-entry{top:max(20px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));font-size:10px}}

/* Current work is a quiet editorial register, not a gallery of unfinished projects. */
.pi-section-label{font-size:9px;line-height:1.5;letter-spacing:.06em;color:var(--muted);padding:15px 0 9px;text-transform:uppercase}
.pi-completed-label{margin-top:17px;border-top:1px solid var(--hair)}
.pi-progress-line{cursor:default}
.pi-progress .pi-name{font-weight:400}
.pi-progress .pi-date{font-size:9px;color:var(--muted);white-space:nowrap}
.pi-progress .pi-link:hover .pi-name{background:transparent;color:var(--ink)}
@media(max-width:760px){.pi-progress .pi-date{grid-column:2;text-align:left}.pi-section-label{padding-top:12px}}

/* Project collaborators: independent external links, same quiet register typography. */
.pi-project-link,.pi-client.credit-external,.pi-arch.credit-external{justify-self:start;min-width:0;max-width:100%;text-decoration:none}
.pi-project-link:hover,.pi-project-link:focus-visible,
.credit-external:hover,.credit-external:focus-visible{background:var(--orange);color:var(--paper);outline-offset:3px}
.pi-link:hover .pi-name{background:transparent;color:var(--ink)}
.pi-link:hover .pi-no{color:var(--muted)}
.pi-project-link:hover,.pi-project-link:focus-visible{background:var(--orange)!important;color:var(--paper)!important}
.pi-row.is-current .pi-no{color:var(--orange)}
.credit-external .credit-arrow{font-size:.85em;white-space:nowrap}
.pg-credits .credit-external{display:inline-block;overflow-wrap:anywhere}
.pg-credits .credit-external:hover,.pg-credits .credit-external:focus-visible{background:var(--orange);color:var(--paper)}
@media(pointer:coarse){.credit-external{min-height:28px}.pi-project-link{min-height:28px}}

/* Phone usability (fix/freeman-mobile). Touch and phone widths only; the desktop reference is unchanged. */
/* Contact: when the form cannot fit (short phones, Safari toolbars showing), the page area scrolls
   like Company instead of cutting off the email field and SEND. Auto margins keep the top in view. */
@media(max-width:760px){body[data-route="contact"] .viewport{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}body[data-route="contact"] .viewport::-webkit-scrollbar{display:none}}
/* The label span inside credit links keeps the link colour (".reading .data span:first-child" mutes label cells). */
.reading .data a .tap-label{color:inherit}
@media(pointer:coarse){
 /* Highlights hug the label as on desktop. Boxes keep their size (44px entrance rows, 28px project and
    credit links); the pressed highlight paints the inline label inside them, and ::after adds hit area. */
 .pi-project-link,.credit-external{position:relative}
 .pi-project-link::after{content:"";position:absolute;inset:-16px -8px -2px}
 .credit-external::after{content:"";position:absolute;inset:-2px -4px}
 /* Small controls: larger invisible hit areas, same drawing. */
 .client-access-entry::after{content:"";position:absolute;inset:-15px -8px}
 .contact-sheet>a{position:relative}.contact-sheet>a::after{content:"";position:absolute;inset:-7px -4px}
 /* A tap must not leave a sticky hover highlight (iOS keeps :hover until the next tap); show it while pressed. */
 .credit-external:hover,.credit-external:active{background:transparent;color:inherit}
 .mobile-home-nav a:hover,.mobile-home-nav a:active,.site-nav a:hover,.contact-inquiry button:hover,.pg-credits .credit-external:hover,.pg-credits .credit-external:active{background:transparent;color:var(--ink)}
 .site-nav a.is-current:hover{color:var(--orange)}
 .client-access-entry:hover,.pi-client.credit-external:hover,.pi-arch.credit-external:hover,.pi-client.credit-external:active,.pi-arch.credit-external:active{background:transparent;color:var(--muted)}
 .pi-project-link:hover,.pi-project-link:active{background:transparent!important;color:var(--ink)!important}
 .site-nav a:active,.client-access-entry:active,.contact-inquiry button:active{background:var(--orange)!important;color:var(--paper)!important}
 .mobile-home-nav a:active .hover-word,.pi-project-link:active .tap-label,.credit-external:active .tap-label{background:var(--orange);color:var(--paper)}
}

/* FREEMANGC V4 / COMPANY: original centered 2-column editorial composition.
   Text left; fixed, uncropped photograph frame right. No page-wide scaffolding. */
body[data-route="company"] .viewport{overflow:hidden}
.co4{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.co4-stage{width:min(1160px,calc(100% - 48px));height:min(540px,100%);min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:clamp(64px,5.5vw,86px);align-items:start}
.co4-editorial{height:100%;min-width:0;min-height:0;overflow:hidden;scrollbar-width:thin;scrollbar-color:var(--hair) transparent;display:flex;flex-direction:column;justify-content:flex-start}
.co4-nav{display:flex;gap:clamp(17px,2vw,33px);align-items:center;justify-content:flex-start;flex-wrap:wrap;margin:0 0 24px;padding-bottom:17px;border-bottom:1px solid var(--hair)}
.co4-nav button{font:10px/1.5 var(--mono);color:var(--muted);letter-spacing:.02em;white-space:nowrap;text-transform:uppercase}
.co4-nav button[aria-selected="true"],.co4-nav button:hover{color:var(--orange)}
.co4-copy{width:100%;min-width:0;max-width:520px}
.co4-copy h2{font:400 clamp(25px,2.3vw,33px)/1.28 var(--mono);letter-spacing:0;margin:0 0 25px}
.co4-copy p{font:13px/1.75 var(--mono);max-width:520px;margin:0 0 17px}
.co4-accent{color:var(--orange)}
.co4-visual{min-width:0;min-height:0;margin:0;align-self:start;justify-self:center;width:min(100%,290px,31dvh);display:flex;flex-direction:column;gap:9px}
.co4-media{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;flex:none}
.co4-media>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.co4-media>img[hidden],.co4-media>.co4-portrait[hidden]{display:none!important}
.co4-portrait{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--hair);background:color-mix(in srgb,var(--ink) 2%,var(--paper));gap:28px}
.co4-portrait>span{font:clamp(64px,9vw,140px)/1 var(--mono);letter-spacing:-.12em;color:var(--ink)}
.co4-portrait>small{font:10px/1.5 var(--mono);color:var(--muted)}
.co4-visual figcaption{font:9px/1.5 var(--mono);color:var(--muted);letter-spacing:.025em}
.co4-menu,.co4-people{border-top:1px solid var(--hair)}
.co4-choice{width:100%;display:grid;grid-template-columns:28px minmax(0,1fr) 18px;gap:10px;align-items:center;text-align:left;border-bottom:1px solid var(--hair);padding:10px 0;font:12px/1.5 var(--mono);min-height:40px}
.co4-choice>span:first-child{font-size:10px;color:var(--muted)}
.co4-choice strong{font-weight:400}
.co4-choice>span:last-child{justify-self:end;color:var(--muted)}
.co4-choice[aria-pressed="true"] strong,.co4-choice:hover strong,.co4-choice[aria-pressed="true"]>span:last-child{color:var(--orange)}
.co4-description{margin-top:17px;padding-top:9px;border-top:1px solid var(--hair)}
.co4-description>span{font:10px/1.5 var(--mono);color:var(--muted)}
.co4-description p{font:12px/1.65 var(--mono);margin:7px 0 0}
.co4-description small{display:block;color:var(--muted);font:10px/1.5 var(--mono);margin-top:8px}
.co4[data-co4-view="people"] .co4-choice{padding:8px 0}
@media(max-width:760px){
  .co4{align-items:stretch}
  .co4-stage{width:100%;height:100%;grid-template-columns:1fr;grid-template-rows:minmax(130px,.73fr) minmax(0,1fr);gap:15px}
  .co4-visual{grid-column:1;grid-row:1;align-self:stretch;justify-self:center;height:100%;width:auto;max-width:100%;gap:5px;overflow:hidden}
  .co4-media{flex:none;height:calc(100% - 17px);width:auto;max-width:100%;max-height:256px;aspect-ratio:4/5}
  .co4-visual figcaption{width:0;min-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .co4-media>img{object-fit:contain}
  .co4-visual figcaption{font-size:8px}
  .co4-editorial{grid-column:1;grid-row:2;overflow:hidden;justify-content:flex-start}
  .co4-nav{gap:17px;margin:0 0 19px;padding-bottom:12px}
  .co4-nav button{font-size:10px}
  .co4-copy h2{font-size:clamp(23px,6vw,29px);margin-bottom:15px}
  .co4-copy p{font-size:11px;line-height:1.62;margin-bottom:12px}
  .co4-choice{padding:7px 0;min-height:35px;font-size:11px}
  .co4-description{margin-top:10px}
  .co4-description p{font-size:11px}
  .co4-portrait{gap:5px}
  .co4-portrait>span{font-size:62px}
  .co4-portrait>small{font-size:8px}
}
@media(max-width:760px) and (max-height:730px){
  .co4-stage{grid-template-rows:minmax(100px,.51fr) minmax(0,1fr);gap:10px}
  .co4-nav{margin-bottom:8px}
  .co4-copy h2{font-size:23px;margin-bottom:9px}
  .co4-copy p{font-size:10px}
}
@media(max-width:760px) and (orientation:landscape){
  .co4-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:25px;align-items:center}
  .co4-editorial{grid-column:1;grid-row:1;justify-content:center}
  .co4-visual{grid-column:2;grid-row:1;align-self:center}
}

/* FREEMANGC V4 / PROJECTS — Freeman work index.
   Personal Work Index informs the proportions and interaction, not the branding.
   Full-size, uncropped photos always displayed with object-fit:contain. */
body[data-route="projects"] .viewport{overflow:hidden}
.pi4{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,2.05fr) minmax(260px,1fr);gap:0}
.pi4-register{min-width:0;min-height:0;display:flex;flex-direction:column;padding-right:clamp(26px,3.8vw,58px)}
.pi4-heading{height:54px;min-height:54px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;font:13px/1.5 var(--mono);letter-spacing:0;color:var(--ink)}
.pi4-heading span:last-child{font:10px/1.5 var(--mono);letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.pi4-scroll{min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.pi4-columns,.pi4-work-row{display:grid;grid-template-columns:43px minmax(0,1.65fr) minmax(0,1.18fr) minmax(0,1.05fr);gap:0 13px;align-items:center}
.pi4-columns{height:34px;align-items:start;padding-top:4px;border-bottom:1px solid var(--hair);font:9px/1.5 var(--mono);color:var(--muted);letter-spacing:.035em;text-transform:uppercase}
.pi4-section{font:9px/1.5 var(--mono);color:var(--muted);letter-spacing:.04em;padding:13px 0 8px}
.pi4-completed{margin-top:14px}
.pi4-current,.pi4-items{list-style:none;padding:0;margin:0}
.pi4-work-row{min-height:58px;border-top:1px solid var(--hair)}
.pi4-current .pi4-work-row:first-child,.pi4-items .pi4-work-row:first-child{border-top:0}
.pi4-current li:last-child,.pi4-items li:last-child{border-bottom:1px solid var(--hair)}
.pi4-in-progress{padding:9px 0;min-height:55px}
.pi4-no{font:11px/1.5 var(--mono);color:var(--muted);white-space:nowrap}
.pi4-in-progress .pi4-no{color:var(--orange)}
.pi4-item-name{font:12px/1.5 var(--mono);min-width:0;overflow-wrap:anywhere}
.pi4-in-progress .pi4-item-name{font-size:11px}
.pi4-select{grid-column:span 2;display:grid;grid-template-columns:43px 13px minmax(0,1fr);gap:0 13px;min-width:0;width:100%;align-items:center;text-align:left;padding:16px 0;font:12px/1.5 var(--mono);letter-spacing:0;min-height:58px}
.pi4-select .pi4-item-name{justify-self:start;text-align:left}
.pi4-indicator{grid-column:2;grid-row:1;color:var(--orange);font:14px/1 var(--mono)}
.pi4-select>.pi4-item-name{grid-column:3;grid-row:1}
.pi4-select[aria-pressed=true] .pi4-no,.pi4-select[aria-pressed=true] .pi4-item-name{color:var(--orange)}
.pi4-select[aria-pressed=true] .pi4-indicator{color:var(--orange)}
.pi4-select:hover .pi4-item-name,.pi4-select:focus-visible .pi4-item-name{background:var(--orange);color:var(--paper)}
.pi4-client,.pi4-designer{font:11px/1.5 var(--mono);min-width:0;color:var(--muted);overflow-wrap:anywhere}
.pi4-client>.pi-client,.pi4-designer>.pi-arch{display:inline;color:inherit;font:inherit;text-transform:none;letter-spacing:inherit}
.pi4-client a,.pi4-designer a{color:inherit}
.pi4-client a:hover,.pi4-designer a:hover{background:var(--orange);color:var(--paper)}
.pi4-stage{height:100%;min-width:0;min-height:0;border-left:1px solid var(--hair);padding:clamp(0px,1vw,16px) 0 0 clamp(24px,2.4vw,38px);display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0}
.pi4-preview-head{height:48px;flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font:10px/1.5 var(--mono);color:var(--muted);letter-spacing:.025em;text-transform:uppercase}
.pi4-preview-head button{font:10px/1.5 var(--mono);color:var(--muted);white-space:nowrap}
.pi4-preview-head button:hover{color:var(--orange)}
.pi4-preview-title{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:22px;flex:none}
.pi4-preview-title h2{font:400 clamp(18px,1.75vw,26px)/1.2 var(--mono);letter-spacing:-.04em}
.pi4-preview-title p{font:10px/1.6 var(--mono);color:var(--muted);margin-top:6px}
.pi4-preview-title a{font:9px/1.5 var(--mono);white-space:nowrap;align-self:end}
.pi4-preview-title a:hover{background:var(--orange);color:var(--paper)}
.pi4-preview-image{width:100%;height:auto;min-height:0;max-height:none;overflow:visible;flex:none;display:flex;justify-content:center;align-items:flex-start;background:transparent;border:0}
.pi4-image-link{display:block;width:fit-content;max-width:100%;height:auto;overflow:visible;cursor:var(--cursor-orange);line-height:0}
.pi4-image-link img{display:block;width:auto;height:auto;max-width:100%;max-height:46dvh;object-fit:contain;object-position:center}
.pi4-no-image{font:10px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}
.pi4-image-caption{font:9px/1.6 var(--mono);color:var(--muted);margin-top:12px;flex:none;text-transform:uppercase}
.pi4-preview-bottom{border-top:1px solid var(--hair);padding-top:11px;margin-top:22px;display:flex;justify-content:space-between;gap:14px;align-items:baseline;font:9px/1.5 var(--mono);color:var(--muted);text-transform:uppercase;flex:none}
.pi4-arrows{display:flex;align-items:center;gap:12px;white-space:nowrap;color:var(--ink);font:10px/1.5 var(--mono)}
.pi4-arrows button{font:15px/1 var(--mono);min-width:20px;text-align:center}
.pi4-arrows button:hover:not(:disabled){color:var(--orange)}
.pi4-arrows button:disabled{opacity:.25;cursor:default}
.pi4-empty-selection{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;font:10px/1.5 var(--mono);color:var(--muted);letter-spacing:.04em}
.pi4-original-mobile{display:none!important}
@media(max-width:760px){
  .pi4{display:none!important}
  .pi4-original-mobile{display:flex!important}
}
@media(min-width:761px) and (max-width:1130px){
  .pi4{grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr)}
  .pi4-register{padding-right:20px}
  .pi4-stage{padding-left:20px}
  .pi4-columns,.pi4-work-row{grid-template-columns:32px minmax(0,1.3fr) minmax(0,1fr) minmax(0,.85fr);gap:0 8px}
  .pi4-select{grid-template-columns:32px 12px minmax(0,1fr);gap:0 8px}
  .pi4-item-name,.pi4-select{font-size:10px}
  .pi4-client,.pi4-designer{font-size:9px}
  .pi4-heading span:last-child{font-size:9px;white-space:normal;text-align:right}
}
@media(min-width:761px) and (max-height:690px){
  .pi4-heading{height:40px;min-height:40px}
  .pi4-work-row,.pi4-select{min-height:44px}
  .pi4-select{padding:8px 0}
  .pi4-in-progress{min-height:42px;padding:7px 0}
  .pi4-preview-title{margin-bottom:12px}
  .pi4-preview-head{height:33px}
  .pi4-image-link img{max-height:38dvh}
  .pi4-preview-bottom{margin-top:10px}
}

/* V4 ENTRANCE — the live entrance, with the original Freeman script as its identity.
   ACCESS, the corner notes (.legal / .mark) and the three squares keep the live entrance's
   positions and type. The script and the navigation centre as one group, spaced in bitmap
   pixels: --px is one pixel of the 160×61 script, a whole number of device pixels (app.js). */
:root{--mark:#332e20}
:root[data-palette="umber"]{--mark:#fff9f1}
:root[data-palette="sand"]{--mark:#f93822}
body[data-route="entrance"] #main{height:100%;width:100%}
.v4-home{--px:3px;position:relative;height:100%;width:100%}
.v4-home-identity{position:absolute;left:var(--x,0);top:var(--y,0);width:calc(var(--px) * 160);display:flex;flex-direction:column;align-items:center;gap:max(calc(var(--px) * 12),18px)}
.v4-home-mark{display:block;padding:0;line-height:0;cursor:var(--cursor-orange)}
.v4-home-mark:disabled{cursor:var(--cursor-crosshair)}
.v4-home-mark:focus-visible{outline-offset:8px}
#v4-pixel-mark{display:block;width:calc(var(--px) * 160);height:calc(var(--px) * 61);image-rendering:pixelated}
.v4-home-nav{display:flex;align-items:center;white-space:nowrap;font-size:12px;line-height:1.5;letter-spacing:.035em;text-transform:uppercase}
.v4-home-nav .sep{padding:0 12px}
.v4-home-nav a{position:relative}
.v4-home-nav a:hover,.v4-home-nav a:focus-visible{background:var(--orange);color:var(--paper)}
.v4-colorways{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:9px;z-index:20}
.v4-way{position:relative;display:block;width:16px;height:16px;padding:0;border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);border-radius:0;touch-action:manipulation;cursor:pointer}
.v4-way-chalk{background:#fff9f1}.v4-way-umber{background:#332e20}.v4-way-sand{background:#f93822}
.v4-way[aria-pressed="true"]{outline:none}
.v4-way:hover:not([aria-pressed="true"]){outline:none}.v4-way:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
@media(max-width:760px){
 .v4-home-nav{font-size:11px}
 .v4-home-nav .sep{padding:0 9px}
 .v4-colorways{bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px))}
}
@media(pointer:coarse){
 .v4-colorways{gap:20px}
 .v4-way{width:24px;height:24px}
 .v4-way::after{content:"";position:absolute;inset:-11px}
 .v4-way:hover:not([aria-pressed="true"]):not(:focus-visible){outline:none}
 .v4-home-nav a::after{content:"";position:absolute;inset:-14px -6px}
 .v4-home-nav a:hover{background:transparent;color:inherit}
 .v4-home-nav a:active{background:var(--orange);color:var(--paper)}
}


/* iPad Safari: pin the document to the visible viewport while preserving
   intentional scrolling inside project and editorial panels. */
html{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
#site{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
#main{height:100%;overflow:hidden}

/* Mobile hit areas only: retain the visible labels, baselines and layout boxes. */
@media(max-width:760px){
 .site-nav a,.panel-head .close,.co4-nav button,.pg-arrow{position:relative}
 .site-nav a::after,.panel-head .close::after,.co4-nav button::after,.pg-arrow::after{
  content:"";position:absolute;inset:auto;left:50%;top:50%;
  width:max(44px,100%);height:44px;transform:translate(-50%,-50%);
 }
 /* The first tab sits at the scrollport's top. Extend that scrollport upward,
    then pad it back down so its text, rule and copy stay in exactly the same place. */
 body[data-route="company"] .viewport{overflow:visible}
 .co4-editorial{margin-top:-15px;padding-top:15px;height:calc(100% + 15px)}
 .co4-nav button::after{left:0;transform:translateY(-50%)}
 /* Keep image clipping in .pg-frame; let the controls reach into the blank
    footer margin. Their hit areas start below the frame, not over the image. */
 .viewport:has(>.pg){overflow:visible}
 .pg-arrow::after{top:-10px;transform:translateX(-50%)}
}


/* ETCETERA — a two-column index with shared image and caption baselines. */
body[data-route="etcetera"] .viewport{overflow:hidden;min-height:0}
.etc-canvas{position:absolute;inset:0;width:min(860px,86%);margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));column-gap:clamp(40px,8vw,120px);row-gap:36px;padding-block:12px;overflow:hidden}
.etc-object{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;min-width:0;min-height:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit;padding:0}
.etc-object-body{display:flex;min-width:0;min-height:0;align-items:flex-end;justify-content:flex-start}
.etc-object-body img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:left bottom;filter:none}
.etc-caption{font:9px/1.5 Monaco,"Courier New",monospace;color:var(--muted);display:block}
.etc-type{flex-direction:column;align-items:flex-start;justify-content:flex-end}
.etc-heading{display:block;font:normal clamp(22px,2.3vw,32px)/1.2 Monaco,"Courier New",monospace;letter-spacing:-.05em;max-width:18ch}
.etc-open{display:block;margin-top:20px;color:var(--red);font:9px/1.5 Monaco,"Courier New",monospace}
.etc-number{display:block;color:var(--red);font:10px/1.4 Monaco,"Courier New",monospace}
.etc-object:focus-visible{outline:1px solid var(--red);outline-offset:5px}
.etc-dialog{border:1px solid var(--ink);background:var(--paper);color:var(--ink);width:min(810px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 28px);padding:0}
.etc-dialog::backdrop{background:#181714a8}
.etc-dialog-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--ink);font:11px Monaco,"Courier New",monospace}
.etc-dialog-body{padding:clamp(18px,4vw,43px);max-height:calc(100dvh - 100px);overflow:auto}
.etc-dialog-body h2{font:normal clamp(26px,3.5vw,47px)/1.1 Monaco,"Courier New",monospace;letter-spacing:-.05em;max-width:18ch}
.etc-dialog-body p{font:normal clamp(14px,1.4vw,18px)/1.65 Monaco,"Courier New",monospace;max-width:62ch}
.etc-dialog-body small{font:10px/1.5 Monaco,"Courier New",monospace;color:var(--muted)}
.etc-detail-photo{max-width:100%;max-height:calc(100dvh - 150px);display:block;object-fit:contain;margin:auto}
.etc-dialog-artwork{width:min(1200px,calc(100vw - 28px))}
.etc-dialog-artwork .etc-dialog-body{padding:16px;overscroll-behavior:contain}
.etc-dialog-artwork .etc-detail-photo{width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 115px)}
.etc-dialog-bar button{min-height:44px;flex-shrink:0}
@media(max-width:760px){
 .etc-canvas{width:100%;column-gap:24px;row-gap:32px;padding-block:12px}
 .etc-object{gap:10px}
 .etc-caption{font-size:9px;min-height:27px}
 .etc-heading{font-size:clamp(16px,4.2vw,24px);line-height:1.22;letter-spacing:-.045em}
 .etc-open{margin-top:16px;font-size:9px}
 .etc-dialog-bar{padding:4px 12px;gap:12px;font-size:10px}
}
@media(max-height:500px) and (min-width:600px){
 .etc-canvas{width:min(860px,90%);row-gap:16px;padding-block:0}
 .etc-object{gap:6px}
 .etc-heading{font-size:16px;line-height:1.12;max-width:27ch}
 .etc-open{margin-top:8px;font-size:8px}
 .etc-caption{font-size:8px;min-height:0}
}

/* Contact: eagle below the left-column copy, aligned with its left edge. */
.contact-layout{position:relative}
.contact-eagle{position:absolute;left:0;bottom:52px;display:block;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
:root[data-palette="sand"] .contact-eagle{color:var(--orange)}
.contact-eagle[hidden]{display:none}
@media(max-width:760px){.contact-eagle{position:static;align-self:flex-start;flex-shrink:0;margin-top:12px}}

/* NOTES / Editorial index study — existing palette and monospace system */
.fw-editorial{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(24px,4vw,64px);padding:clamp(18px,3vw,38px) clamp(18px,4vw,60px);min-height:0;overflow:hidden}
.fw-lead{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0;min-height:0;text-align:left;padding:clamp(16px,2.3vw,32px);border:1px solid var(--hair);background:color-mix(in srgb,var(--ink) 5%,var(--paper));color:var(--ink);font-family:var(--mono);cursor:var(--cursor-orange)}
.fw-eyebrow,.fw-foot,.fw-entry-caption{font:9px/1.5 var(--mono);letter-spacing:.035em;color:var(--muted)}
.fw-lead-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(15px,2.4vh,28px);width:100%}
.fw-title{font:400 clamp(22px,3.2vw,48px)/1.05 var(--mono);letter-spacing:-.065em}
.fw-deck{font:clamp(11px,1vw,14px)/1.65 var(--mono);max-width:38ch}
.fw-read,.fw-entry-action{font:10px/1.5 var(--mono);color:var(--orange)}
.fw-register{min-height:0;display:grid;grid-template-rows:1fr 1fr;gap:clamp(14px,3vh,28px)}
.fw-entry{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:9px;min-height:0;min-width:0;padding:0;text-align:left;color:var(--ink);background:transparent;border:0;cursor:var(--cursor-orange)}
.fw-entry-visual{min-height:0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;overflow:hidden}
.fw-entry-visual img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:left bottom}
.fw-entry-heading{font:400 clamp(17px,2.1vw,30px)/1.2 var(--mono);letter-spacing:-.045em;max-width:25ch}
.fw-entry-action{margin-top:clamp(10px,2vh,20px)}
.fw-lead:hover .fw-read,.fw-entry:hover .fw-entry-caption{background:var(--orange);color:var(--paper)}
.fw-lead:focus-visible,.fw-entry:focus-visible{outline:1px solid var(--orange);outline-offset:3px}
@media(max-width:760px){.fw-editorial{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px}.fw-lead{padding:12px}.fw-title{font-size:clamp(17px,4.3vw,28px)}.fw-deck{font-size:10px;line-height:1.5}.fw-eyebrow,.fw-foot,.fw-entry-caption{font-size:8px}.fw-entry-heading{font-size:clamp(13px,3.4vw,19px)}.fw-read,.fw-entry-action{font-size:9px}.fw-register{gap:12px}}
@media(max-height:590px){.fw-editorial{padding-block:9px}.fw-lead{padding:12px}.fw-lead-copy{gap:10px}.fw-title{font-size:clamp(19px,2.5vw,32px)}.fw-deck{font-size:10px}.fw-register{gap:12px}}

/* NOTES / full essay present in the left-hand editorial sheet */
.fw-lead{cursor:default;gap:12px;overflow:hidden}
.fw-lead:hover .fw-read{background:none;color:var(--orange)}
.fw-essay{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;width:100%;padding:clamp(7px,1.4vh,18px) 4px 8px 0}
.fw-essay h2{font:400 clamp(19px,2.25vw,33px)/1.14 var(--mono);letter-spacing:-.055em;margin:0 0 clamp(15px,2vh,25px)}
.fw-essay p{font:400 clamp(11px,.9vw,13px)/1.57 var(--mono);margin:0 0 1.05em;max-width:65ch}
.fw-essay p:last-child{margin-bottom:0}
.fw-foot{flex-shrink:0}
@media(max-width:760px){.fw-essay h2{font-size:clamp(15px,3.5vw,23px)}.fw-essay p{font-size:clamp(9px,2.4vw,11px);line-height:1.45}.fw-lead{gap:6px}}

/* NOTES: single right-hand editorial item after removing Ruskin. */
.fw-register{grid-template-rows:minmax(0,1fr)}

/* NOTES: featured Optimist photograph, original aspect ratio and no card treatment. */
.fw-entry-note{display:flex;flex-direction:column;justify-content:center;gap:12px}
.fw-entry-note .fw-entry-visual{width:100%;height:auto;max-height:65vh;display:block;overflow:hidden}
.fw-entry-note .fw-entry-visual img{display:block;width:100%;height:auto;max-width:100%;max-height:65vh;object-fit:contain;object-position:left center}
.fw-entry-note .fw-entry-caption{flex-shrink:0}
@media(max-width:760px){.fw-entry-note{justify-content:center;gap:8px}.fw-entry-note .fw-entry-visual,.fw-entry-note .fw-entry-visual img{max-height:48vh}}

/* COMPANY / reserved visual space with a future image slot */
.co4-image-placeholder{width:100%;height:100%;display:grid;place-items:center;border:1px solid var(--hair);font:10px/1.5 var(--mono);color:var(--muted);letter-spacing:.035em;text-align:center;padding:12px}
.co4-stage{grid-template-columns:minmax(0,1fr) minmax(0,.84fr)}
.co4-editorial{min-width:0}
.co4-nav{max-width:100%}
@media(max-width:760px){
.co4-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(130px,.73fr) minmax(0,1fr)}
}
@media(max-width:760px) and (orientation:landscape){
.co4-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
}

/* COMPANY / keep the tab rule confined to copy column; preserve natural images */
.co4-stage{grid-template-columns:minmax(0,1fr) minmax(0,.84fr);column-gap:clamp(64px,5.5vw,86px)}
.co4-editorial,.co4-nav{width:100%;max-width:100%;min-width:0}
.co4-visual{grid-column:2;grid-row:1;max-width:100%}
.co4-media:has(>img:not([hidden])){aspect-ratio:auto;overflow:visible}
.co4-media>img:not([hidden]){position:static;width:auto;height:auto;max-width:100%;max-height:min(540px,64dvh);object-fit:contain;object-position:center;display:block}
.co4-media:has(>img:not([hidden])) .co4-image-placeholder{display:none}
@media(max-width:760px){
 .co4-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(130px,.73fr) minmax(0,1fr);column-gap:0}
 .co4-visual{grid-column:1;grid-row:1}
 .co4-media>img:not([hidden]){max-height:100%;max-width:100%}
}
@media(max-width:760px) and (orientation:landscape){
 .co4-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:25px}
 .co4-visual{grid-column:2;grid-row:1}
}

/* COMPANY / composition study: compact, centered editorial pair */
@media(min-width:761px){
 .co4-stage{width:min(990px,calc(100% - 64px));grid-template-columns:minmax(0,560px) minmax(0,240px);column-gap:clamp(34px,4vw,64px);justify-content:center;align-items:start}
 .co4-visual{width:min(100%,220px,26dvh);justify-self:center}
 .co4-copy{max-width:520px}
}

/* COMPANY: no public placeholder; retain responsive portrait area for future assets. */
.co4[data-co4-view="philosophy"] .co4-visual,
.co4[data-co4-view="services"] .co4-visual,
.co4[data-co4-view="people"] .co4-visual{display:none}
@media(min-width:761px){
 .co4-stage{width:min(700px,calc(100% - 64px));grid-template-columns:minmax(0,1fr);column-gap:0;justify-content:center}
 .co4-editorial{grid-column:1;grid-row:1}
 .co4-nav{width:100%}
}
@media(max-width:760px){
 .co4-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0}
 .co4-editorial{grid-column:1;grid-row:1}
}

/* COMPANY / centered column, left-aligned copy (approved composition). */
@media (min-width:761px){
 body[data-route="company"] .co4-stage{width:min(590px,calc(100% - 64px));margin-inline:auto;grid-template-columns:minmax(0,1fr);justify-content:stretch}
 body[data-route="company"] .co4-editorial,body[data-route="company"] .co4-copy{width:100%;max-width:none;text-align:left}
 body[data-route="company"] .co4-copy p{max-width:none;text-align:left}
}

/* Company is one sheet per tab; center the actual mobile editorial block. */
body[data-route="company"] .sheet-controls{display:none}
@media(max-width:760px){
 body[data-route="company"] .viewport{top:70px;bottom:70px}
 body[data-route="company"] .co4{align-items:center}
 body[data-route="company"] .co4-stage{width:100%;height:auto;display:block}
 body[data-route="company"] .co4-editorial{height:auto;margin:0;padding:0;overflow:visible}
 body[data-route="company"] .co4-copy p:last-child{margin-bottom:0}
}

/* Public Record launch: keep the four-section navigation legible on narrow phones. */
@media(max-width:760px){
  .site-nav{font-size:9px;letter-spacing:0}
  .site-nav .sep{padding:0 4px}
  .v4-home-nav{font-size:10px;letter-spacing:0}
  .v4-home-nav .sep{padding:0 5px}
}
@media(max-width:360px){
  .panel-head{gap:8px}
  .site-nav{font-size:8px}
  .site-nav .sep{padding:0 3px}
}


/* ==========================================================================================
   MONACO LINEAGE — the phone typography (≤760px), approved in study/mobile-type-001.
   One face, one weight. Menlo is Apple's own system monospace, Monaco's successor, on every
   iPhone (Monaco is not installed on iOS and cannot be licensed for the web). Phones without Menlo
   get DejaVu Sans Mono, Menlo's open-source parent, self-hosted; Apple devices never download it.
   Scale: entrance 17 · project title 18 · index title 15 · body 12.5 · interface 11 ·
   secondary 11 · label 10 · micro 9.5. Secondary text sits at 78% ink; labels use the palette's
   muted colour (a 76% mix on Sand, where muted is too faint for small type). Desktop is untouched.
   ========================================================================================== */
@font-face{font-family:"Freeman Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dejavu-sans-mono-latin.woff2) format("woff2")}
@media(max-width:760px){
  :root{--mono:Menlo,Monaco,"Freeman Mono",monospace;--meta:color-mix(in srgb,var(--ink) 78%,var(--paper));--quiet:var(--muted)}
  :root[data-palette="sand"]{--quiet:color-mix(in srgb,var(--ink) 76%,var(--paper))}
  .etc-caption,.etc-heading,.etc-open,.etc-number,.etc-dialog-bar,.etc-dialog-body h2,.etc-dialog-body p,.etc-dialog-body small{font-family:var(--mono)}

  /* Entrance: the script, then the four sections stacked beneath it. */
  .v4-home-identity{gap:max(calc(var(--px) * 9),12px)}
  .v4-home-nav{flex-direction:column;align-items:center;gap:18px;font-size:17px;line-height:1.2;letter-spacing:.07em;color:var(--ink)}
  /* Portrait phones: 24px more air between the script and the sections. Padding counts in the
     group's measured height, so app.js keeps the whole group centred at 48% (script up 12px,
     sections down 12px). Landscape phones keep the original spacing: no room above the colorways. */
  @media(orientation:portrait){.v4-home-nav{padding-top:24px}}
  .v4-home-nav .sep{display:none}
  .v4-home-nav a::after{inset:-10px -16px}
  .client-access-entry{font-size:11px;letter-spacing:.05em}

  /* Section line, CLOSE and sheet controls: the interface size. */
  .site-nav{font-size:11px;letter-spacing:.05em}
  .site-nav .sep{padding:0 6px}
  .panel-head .close{font-size:11px;letter-spacing:.05em}
  .sheet-controls{font-size:11px;letter-spacing:.05em}
  .sheet-controls .count{font-size:10px;color:var(--quiet)}

  /* Projects index: names as titles, credits as quiet secondary lines. */
  .pi-section-label{font-size:10px;letter-spacing:.1em;color:var(--quiet)}
  .pi-scroller{overflow-x:hidden}
  .pi-link{grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:5px;padding:19px 0}
  .pi-no{font-size:11px;letter-spacing:.02em}
  .pi-name,.pi-progress .pi-name{font-size:15px;letter-spacing:.03em;line-height:1.4}
  .pi-client,.pi-arch,.pi-date,.pi-progress .pi-date{font-size:11px;letter-spacing:.04em;line-height:1.55;color:var(--meta)}
  .pi-progress .pi-date{color:var(--quiet)}
  .pi-name + .pi-client{margin-top:3px}
  .pi-client.credit-external:hover,.pi-arch.credit-external:hover,.pi-client.credit-external:active,.pi-arch.credit-external:active{color:var(--meta)}

  /* Project page: the name is the page's title; credits in the index's capitals. */
  .pg-info{gap:4px}
  .pg-name{font-size:18px;line-height:1.3;letter-spacing:.03em}
  .pg-place{font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--meta);margin:0 0 10px}
  .pg-credits{column-gap:22px;row-gap:6px;font-size:11px;line-height:1.5}
  .pg-credits dt{font-size:10px;letter-spacing:.1em;color:var(--quiet)}
  .pg-credits dd{margin:3px 0 0;text-transform:uppercase;letter-spacing:.04em}
  .pg-related{font-size:11px;letter-spacing:.05em}
  .pg-count{font-size:11px;color:var(--quiet)}

  /* Company */
  .co4-nav{gap:20px}
  .co4-nav button{font-size:11px;letter-spacing:.05em;color:var(--quiet)}
  .co4-copy h2{font-size:24px;line-height:1.25;letter-spacing:-.01em}
  .co4-copy p,.co4-description p{font-size:12.5px;line-height:1.7}
  .co4-choice{font-size:12.5px}
  .co4-choice>span:first-child{font-size:11px;color:var(--quiet)}
  .co4-description>span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
  .co4-description small{font-size:11px;line-height:1.6;letter-spacing:0;color:var(--quiet)}
  .co4-visual figcaption,.co4-portrait>small{font-size:9.5px;letter-spacing:.04em;color:var(--quiet)}

  /* Contact */
  .contact-label,.contact-inquiry .contact-email-label{font-size:10px;letter-spacing:.1em;color:var(--quiet)}
  :root[data-palette] .contact-sheet .subtle{font-size:12.5px;line-height:1.6;color:var(--meta)}
  :root[data-palette] .contact-sheet .subtle:last-child{font-size:11px;letter-spacing:.04em}
  .contact-sheet>a,.contact-layout .contact-sheet>a{font-size:15px;letter-spacing:0}
  .contact-inquiry button{font-size:12px;letter-spacing:.05em}
  .contact-disclaimer{font-size:9.5px;letter-spacing:.04em;color:var(--quiet)}

  /* Project pages without a gallery: the reading record, set like the gallery pages. */
  body[data-route="project"] .reading h1{font-size:18px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase}
  body[data-route="project"] .reading h1 + .micro{font-size:11px;letter-spacing:.04em;color:var(--meta)}
  body[data-route="project"] .reading p:not(.micro){font-size:12.5px;line-height:1.7}
  body[data-route="project"] .reading h2{font-size:10px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:8px}
  body[data-route="project"] .reading .data{grid-template-columns:118px minmax(0,1fr);gap:14px;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
  :root[data-palette] body[data-route="project"] .reading .data > span:first-child{font-size:10px;letter-spacing:.1em;color:var(--quiet)}
  :root[data-palette] body[data-route="project"] .reading .data > span + span,:root[data-palette] body[data-route="project"] .reading .data > span + span span:not(:hover){color:var(--ink)}
  :root[data-palette] .project-plate-caption{color:var(--ink)}
  .project-plate-name{font-size:18px;line-height:1.3;letter-spacing:.03em}
  .project-plate-meta{font-size:10.5px;letter-spacing:.05em;color:var(--meta)}

  /* Reading pages (Record not found, Notes) */
  .reading .micro,.index-title{font-size:10px;letter-spacing:.1em;color:var(--quiet)}
  .text-link{font-size:11px;letter-spacing:.05em}
}


/* Architectural White 001 — approved 8 Nov 2026.
   Homepage-only treatment. Interior pages, photos, map and navigation stay intact.
   The existing original Freeman signature bitmap remains the identity. */
:root[data-palette="chalk"] body[data-route="entrance"],
:root[data-palette="chalk"] body[data-route="entrance"] #site,
:root[data-palette="chalk"] body[data-route="entrance"] #main,
:root[data-palette="chalk"] body[data-route="entrance"] .v4-home {
  background:#fff;
}
body[data-route="entrance"] .v4-home-nav {
  letter-spacing:.105em;
}
body[data-route="entrance"] .v4-home-nav .sep {
  color:#d2d2cd;
}
body[data-route="entrance"] .legal,
body[data-route="entrance"] .mark {
  font-size:10px;
  letter-spacing:.06em;
  line-height:1.65;
  color:#77736c;
}
body[data-route="entrance"] .client-access-entry {
  font-size:11px;
  letter-spacing:.06em;
}
:root[data-palette="chalk"] body[data-route="entrance"] .v4-way-chalk {
  background:#fff;
}
@media(max-width:760px){
  body[data-route="entrance"] .v4-home-nav{
    letter-spacing:.07em;
  }
  body[data-route="entrance"] .client-access-entry{
    font-size:11px;
  }
}


/* Small grey Instagram glyph beside the Freeman motto. */
body[data-route="entrance"] .v4-home .mark{
  display:flex;
  align-items:center;
  gap:13px;
  white-space:nowrap;
}
body[data-route="entrance"] .v4-home .mark-divider{display:none}
body[data-route="entrance"] .v4-home .instagram-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:#898781;
  line-height:0;
}
body[data-route="entrance"] .v4-home .instagram-link svg{display:block;width:16px;height:16px}
body[data-route="entrance"] .v4-home .instagram-link:hover,
body[data-route="entrance"] .v4-home .instagram-link:focus-visible{
  background:transparent;
  color:var(--ink);
}
@media(max-width:760px){
  body[data-route="entrance"] .v4-home .mark{
    display:flex;
    right:18px;
    bottom:max(18px,env(safe-area-inset-bottom));
  }
  body[data-route="entrance"] .v4-home .mark-tagline{display:none}
  body[data-route="entrance"] .v4-home .instagram-link{
    width:32px;
    height:32px;
  }
}


/* COMPANY / Gabe portrait: retain Freeman's editorial text and a quiet right-hand plate. */
@media(min-width:761px){
  body[data-route="company"] .co4-stage{
    width:min(1050px,calc(100% - 64px));
    grid-template-columns:minmax(0,560px) minmax(0,340px);
    column-gap:clamp(42px,5vw,86px);
    align-items:center;
  }
  body[data-route="company"] .co4-visual{
    display:flex;
    grid-column:2;
    grid-row:1;
    width:min(100%,340px);
    justify-self:end;
    align-self:center;
  }
  body[data-route="company"] .co4-editorial{grid-column:1;grid-row:1}
}
body[data-route="company"] .co4-media>.co4-gabe-photo:not([hidden]){
  display:block;
  position:static;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:min(530px,66dvh);
  object-fit:contain;
}
body[data-route="company"] .co4-media>.co4-image-placeholder[hidden]{display:none!important}
body[data-route="company"] .co4-visual figcaption{
  color:var(--muted);
  text-align:left;
}
body[data-route="company"] .co4[data-co4-view="services"] .co4-visual,
body[data-route="company"] .co4[data-co4-view="people"] .co4-visual{display:none}
@media(min-width:761px){
  body[data-route="company"] .co4[data-co4-view="services"] .co4-stage,
  body[data-route="company"] .co4[data-co4-view="people"] .co4-stage{
    width:min(700px,calc(100% - 64px));
    grid-template-columns:minmax(0,1fr);
  }
}
@media(max-width:760px){
  body[data-route="company"] .viewport{overflow-y:auto}
  body[data-route="company"] .co4{min-height:100%;height:auto}
  body[data-route="company"] .co4-stage{
    display:flex;
    flex-direction:column-reverse;
    align-items:stretch;
    gap:20px;
    width:100%;
    height:auto;
    padding-bottom:20px;
  }
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-visual{
    display:flex;
    width:min(100%,210px);
    height:auto;
    align-self:center;
    flex:none;
  }
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-media{
    width:100%;
    height:auto;
    max-height:none;
  }
  body[data-route="company"] .co4-media>.co4-gabe-photo:not([hidden]){
    max-height:250px;
    width:100%;
    object-fit:contain;
  }
  body[data-route="company"] .co4-editorial{width:100%;flex:none}
  body[data-route="company"] .co4[data-co4-view="services"] .co4-stage,
  body[data-route="company"] .co4[data-co4-view="people"] .co4-stage{display:block}
}


/* Company portrait visibility correction: overrides legacy no-placeholder rule. */
body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-visual{
  display:flex;
  visibility:visible;
  opacity:1;
}
@media(min-width:761px){
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-stage{
    width:min(1050px,calc(100% - 64px));
    grid-template-columns:minmax(0,560px) minmax(0,340px);
    gap:clamp(42px,5vw,86px);
    justify-content:center;
    align-items:center;
  }
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-visual{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:340px;
    justify-self:end;
    align-self:center;
  }
}
body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-media{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
}
body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-media>.co4-gabe-photo{
  display:block!important;
  position:relative;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:center 42%;
}
@media(max-width:760px){
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-visual{
    display:flex;
    width:min(60vw,250px);
    margin:0 auto 22px;
  }
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-stage{
    display:flex;
    flex-direction:column-reverse;
  }
}


/* Company tabs: retain the exact same editorial grid across every view.
   Hide the portrait on Services/People but reserve its column, so the
   navigation, rule, heading and copy never reposition on tab changes. */
@media(min-width:761px){
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-stage,
  body[data-route="company"] .co4[data-co4-view="services"] .co4-stage,
  body[data-route="company"] .co4[data-co4-view="people"] .co4-stage{
    width:min(1050px,calc(100% - 64px));
    height:min(540px,100%);
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,560px) minmax(0,340px);
    grid-template-rows:minmax(0,1fr);
    column-gap:clamp(42px,5vw,86px);
    justify-content:center;
    align-items:center;
  }
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-editorial,
  body[data-route="company"] .co4[data-co4-view="services"] .co4-editorial,
  body[data-route="company"] .co4[data-co4-view="people"] .co4-editorial{
    grid-column:1;
    grid-row:1;
    align-self:stretch;
    height:100%;
  }
  body[data-route="company"] .co4[data-co4-view="services"] .co4-visual,
  body[data-route="company"] .co4[data-co4-view="people"] .co4-visual{
    display:none;
  }
}


/* Gabe portrait: show the entire original photograph, never crop. */
body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-media{
  width:100%;
  aspect-ratio:auto;
  height:auto;
  overflow:visible;
}
body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-media>.co4-gabe-photo{
  position:static!important;
  display:block!important;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:min(540px,66dvh);
  object-fit:contain!important;
  object-position:center center;
}
@media(max-width:760px){
  body[data-route="company"] .co4[data-co4-view="philosophy"] .co4-media>.co4-gabe-photo{
    max-height:250px;
    width:100%;
    height:auto;
    object-fit:contain!important;
  }
}