/* Common Signal — C / Luminous signal on dark navy (selected on LLC-7, built on CS-103).
   Ported from design/brand-directions/study.fragment.html, direction C.
   Section backgrounds run edge to edge; content stays within 1280px. */
:root{
  --bg:#132a3c;--ink:#e8decd;--amber:#e3b573;--muted:#bfcccf;--line:#3c5160;
  --sand:#e8decd;--navy:#253f56;--sand-rule:#a39780;
  --gutter:max(5.5%,calc((100% - 1280px)/2 + 70px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 'DM Sans',Arial,sans-serif}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
h1,h2,h3,p{margin:0;font-weight:400}
.skip-link{position:absolute;left:16px;top:-100px;padding:12px;background:var(--sand);color:var(--bg);z-index:5}
.skip-link:focus{top:16px}

.cs-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 var(--gutter);padding:28px 0;border-bottom:1px solid var(--line)}
.cs-logo{display:block;line-height:0}
.cs-logo img{display:block;width:176px;max-width:100%;height:auto}
.cs-header nav{display:flex;align-items:baseline;gap:26px;font-size:.875rem;line-height:1.5}
/* Every link carries the 1px rule so "Contact" sits on the same baseline as the rest (CS-97). */
.cs-header nav a{padding:8px 0;border-bottom:1px solid transparent}
.cs-header nav a:last-child{border-bottom-color:var(--amber)}

.cs-hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:5%;padding:66px var(--gutter) 72px}
.cs-eyebrow{font-size:.75rem;line-height:1.5;letter-spacing:.11em;text-transform:uppercase;font-weight:500}
h1{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(2.25rem,5.45vw,4.25rem);line-height:1.04;letter-spacing:-.035em;margin:22px 0}
h1 span{display:block}
.cs-hero-copy>p{line-height:1.65;max-width:420px;color:var(--muted)}
.cs-hero-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:28px;font-size:.875rem}
.cs-primary{display:flex;gap:28px;align-items:center;min-height:44px;background:var(--ink);color:var(--bg);padding:13px 19px;border-radius:3px}
.cs-secondary{display:flex;gap:15px;align-items:center;padding:13px 0}
.cs-hero-art{margin:0;aspect-ratio:1;overflow:hidden;background:#0e2130}
.cs-hero-art picture{display:block;height:100%}
.cs-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:52% 50%}

.cs-section{padding:64px var(--gutter);border-top:1px solid var(--line)}
h2{font-family:'DM Serif Display',Georgia,serif;font-size:clamp(2rem,4vw,3rem);line-height:1.09;letter-spacing:-.025em;margin-top:13px}
.cs-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px}
.cs-project-art{height:238px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
/* The inset rule keeps the navy panel distinct from the darker page. */
.cs-map-art{background:var(--navy);color:var(--sand);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.cs-hh-art{background:var(--sand);color:var(--navy)}
.cs-project-top{display:flex;justify-content:space-between;font-size:.75rem;letter-spacing:.12em;z-index:1}
.cs-project-title{font-family:'DM Serif Display',Georgia,serif;font-size:2.375rem;line-height:1.02;z-index:1}
.cs-project-title em{font-style:normal}
.cs-project-bottom{font-size:.75rem;z-index:1}
.cs-contours{position:absolute;width:260px;height:260px;border:1px solid #81939c;opacity:.4;border-radius:48% 52% 62% 38%;top:-65px;right:-85px;transform:rotate(20deg);box-shadow:0 0 0 23px #253f56,0 0 0 24px #81939c,0 0 0 47px #253f56,0 0 0 48px #81939c,0 0 0 72px #253f56,0 0 0 73px #81939c,0 0 0 97px #253f56,0 0 0 98px #81939c}
.cs-project-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:21px}
h3{font-size:1.0625rem;font-weight:500;line-height:1.25}
.cs-status{font-size:.75rem;line-height:1.4;padding:5px 9px;border:1px solid var(--line);border-radius:20px;white-space:nowrap}
.cs-project-info p{font-size:.875rem;color:var(--muted);margin:9px 0 13px}
.cs-domain{font-size:.8125rem;color:var(--muted)}

.cs-expertise{display:grid;grid-template-columns:1fr 1fr;gap:10%}
.cs-expertise-intro>p{font-size:.875rem;line-height:1.65;max-width:360px;color:var(--muted);margin-top:20px}
.cs-services>div{display:grid;grid-template-columns:30px 1fr;gap:0 15px;padding:24px 0;border-bottom:1px solid var(--line)}
.cs-services>div:first-child{padding-top:0}
.cs-services span{font-size:.75rem;color:var(--amber);grid-row:span 2}
.cs-services p{font-size:.875rem;color:var(--muted);margin-top:10px}

.cs-contact{background:var(--sand);color:var(--navy);display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.cs-contact h2{font-size:clamp(2.375rem,5.2vw,3.625rem)}
.cs-contact-details{min-width:0;font-size:.75rem;line-height:1.7}
.cs-email{display:block;font-size:1rem;border-bottom:1px solid var(--sand-rule);padding-bottom:10px;overflow-wrap:anywhere}
.cs-contact-meta{display:flex;align-items:center;justify-content:space-between;gap:28px}
#copy-email{font:inherit;color:inherit;background:none;border:0;min-height:44px;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--sand-rule);text-underline-offset:4px}
#copy-status{display:block;max-width:300px}

.cs-footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:23px var(--gutter);font-size:.75rem;color:var(--muted)}

.not-found{max-width:650px;margin:15vh auto;padding:32px;text-align:center}
.not-found img{width:176px;height:auto}
.not-found p{margin-top:36px;font-size:.875rem;color:var(--muted)}
.not-found h1{font-size:clamp(2rem,5vw,3rem);margin:12px 0 28px}
.not-found a{display:inline-block;padding:8px 0;border-bottom:1px solid var(--amber)}

@media(max-width:760px){
  .cs-header{padding:22px 0}
  .cs-header nav{gap:18px}
  .cs-hero{gap:4%;padding-top:44px;padding-bottom:50px}
  .cs-hero-copy>p{font-size:.875rem}
  .cs-hero-actions{gap:15px;font-size:.8125rem}
  .cs-section{padding-top:44px;padding-bottom:44px}
  .cs-project-art{height:215px}
  .cs-project-heading{display:block}
  .cs-status{display:inline-block;margin-top:9px}
}
@media(max-width:600px){
  .cs-header{gap:10px}
  .cs-logo img{width:158px}
  .cs-header nav a:not(:last-child){display:none}
  .cs-hero{grid-template-columns:1fr;padding-top:36px;gap:30px}
  h1{font-size:clamp(2.25rem,10.5vw,3.625rem);margin:20px 0}
  .cs-hero-copy>p{font-size:.9375rem;max-width:470px}
  .cs-hero-actions{margin-top:24px}
  .cs-hero-art{aspect-ratio:1.23}
  .cs-project-grid,.cs-expertise{grid-template-columns:1fr;gap:32px}
  .cs-project-art{height:245px}
  .cs-project-heading{display:flex}
  .cs-status{margin-top:0}
  .cs-contact{align-items:flex-start;flex-direction:column;gap:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}