/* ===== Design Tokens ===== */
:root { --ink:#102236; --muted:#617083; --line:#dbe3e9; --paper:#f7f9fb; --white:#fff; --blue:#086b87; --blue-deep:#064e66; --aqua:#a7e5dd; --gold:#dcad46; --radius:18px; }

/* ===== Reset & Base ===== */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.6 "DM Sans",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }

/* ===== Skip Link ===== */
.skip-link { position:absolute; left:16px; top:-100px; z-index:100; padding:10px 14px; background:var(--ink); color:#fff; border-radius:7px; font-weight:700; font-size:.88rem; }
.skip-link:focus { top:16px; }

/* ===== Focus Visible ===== */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* ===== Layout ===== */
.wrap { max-width:1160px; margin:auto; padding:0 28px; }

/* ===== Nav ===== */
.nav { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(16,34,54,.10); }
.brand { font-weight:700; letter-spacing:-.03em; font-size:1.18rem; }
.brand i { color:var(--blue); font-style:normal; }
.navlinks { display:flex; gap:25px; align-items:center; font-size:.9rem; color:#475769; }
.navlinks a:hover { color:var(--blue); }
.navlinks .contact { background:var(--ink); color:#fff; padding:9px 15px; border-radius:7px; }

/* ===== Eyebrow ===== */
.eyebrow { color:var(--blue); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; display:flex; align-items:center; gap:10px; }
.eyebrow:before { content:""; width:29px; height:2px; background:var(--gold); }

/* ===== Typography ===== */
h1,h2,h3,p { margin-top:0; }
h1 { max-width:840px; margin:18px 0 22px; font:700 clamp(2.7rem,6.2vw,5.65rem)/.98 "Source Serif 4",Georgia,serif; letter-spacing:-.055em; }
h2 { font:700 clamp(2rem,3.4vw,3.1rem)/1.05 "Source Serif 4",Georgia,serif; letter-spacing:-.04em; margin:9px 0 0; }

/* ===== Hero ===== */
.hero { min-height:622px; padding:96px 0 76px; position:relative; overflow:hidden; background:linear-gradient(115deg,#f7f9fb 0%,#eaf5f5 75%,#d5edeb 100%); }
.hero:after { content:""; position:absolute; width:610px; height:610px; right:-230px; top:-170px; border:1px solid rgba(8,107,135,.16); border-radius:50%; box-shadow:0 0 0 64px rgba(8,107,135,.05),0 0 0 128px rgba(8,107,135,.035); }
.hero h1 em { color:var(--blue); font-style:normal; }
.lede { max-width:620px; font-size:1.15rem; color:#475769; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-note { margin-top:70px; display:flex; gap:16px; align-items:center; color:#526579; font-size:.88rem; }
.hero-note b { color:var(--ink); }

/* ===== Buttons ===== */
.button { display:inline-flex; min-height:46px; align-items:center; padding:0 19px; border-radius:7px; font-weight:700; font-size:.92rem; transition:.18s; border:none; cursor:pointer; }
.button.primary { background:var(--blue); color:#fff; }
.button.primary:hover { background:var(--blue-deep); transform:translateY(-1px); }
.button.secondary { border:1px solid #aebdc7; color:var(--ink); background:transparent; }
.button.secondary:hover { background:#fff; }

/* ===== Sections ===== */
.section { padding:92px 0; }
.section.white { background:#fff; }
.section-title { display:grid; grid-template-columns:1fr 1.2fr; gap:45px; margin-bottom:44px; }
.intro { color:var(--muted); font-size:1.06rem; padding-top:11px; }

/* ===== Principles ===== */
.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.principle { padding:26px 27px 22px 0; border-right:1px solid var(--line); margin-right:27px; }
.principle:last-child { border:0; margin:0; }
.number { color:var(--blue); font-weight:700; font-size:.75rem; letter-spacing:.11em; }
.principle h3 { margin:10px 0 8px; font-size:1rem; }
.principle p { color:var(--muted); font-size:.91rem; margin:0; }

/* ===== Work List ===== */
.work-list { border-top:1px solid var(--line); }
.work { display:grid; grid-template-columns:90px minmax(180px,.92fr) 1.45fr 30px; gap:25px; align-items:start; padding:33px 0; border-bottom:1px solid var(--line); transition:.18s; }
.work:hover { padding-left:12px; background:#fbfcfd; }
.work-id { color:var(--blue); font-weight:700; font-size:.78rem; letter-spacing:.08em; padding-top:4px; }
.work h3 { margin:0; font-size:1.1rem; line-height:1.3; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.tag { background:#e6f3f2; color:#07627b; padding:3px 8px; border-radius:4px; font-size:.7rem; font-weight:700; }
.work p { margin:0; color:var(--muted); font-size:.94rem; }
.work-toggle { background:none; border:none; color:var(--blue); font-size:1.4rem; cursor:pointer; padding:0; line-height:1; transition:.18s; }
.project-detail { display:none; grid-column:2/-1; padding:4px 0 10px; color:#425467; font-size:.9rem; }
.work.open .project-detail { display:block; }
.work.open .work-toggle { transform:rotate(45deg); }
.detail-link { display:inline-flex; align-items:center; gap:4px; margin-top:10px; color:#086b87; font-weight:700; font-size:.88rem; }

/* ===== Method ===== */
.method { background:var(--ink); color:#edf5f5; }
.method .eyebrow { color:var(--aqua); }
.method .intro { color:#b4c4cd; }
.method-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; }
.method h2 { color:#fff; }
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:grid; grid-template-columns:44px 1fr; gap:15px; border-top:1px solid rgba(255,255,255,.17); padding:19px 0; }
.steps b { color:var(--aqua); font-size:.8rem; }
.steps h3 { margin:0 0 3px; color:#fff; font-size:1rem; }
.steps p { margin:0; color:#b4c4cd; font-size:.9rem; }

/* ===== About ===== */
.about { display:grid; grid-template-columns:1fr 1.25fr; gap:70px; }
.about-copy { color:var(--muted); font-size:1.04rem; }
.about-copy strong { color:var(--ink); }

/* ===== Contact ===== */
.contact-panel { background:#e3f1ef; padding:40px; border-radius:var(--radius); }
.contact-panel h2 { font-size:2.5rem; }
.contact-panel p { color:#46616a; max-width:500px; }
.contact-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }

/* ===== Footer ===== */
.share-container { max-width:720px; margin:0 auto 32px; text-align:center; }
.share-container p { margin:0 0 12px; color:var(--muted); font-size:.9rem; }
.share-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.share-native, .share-copy { display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--line); border-radius:6px; background:var(--white); color:var(--blue-deep); font:600 .84rem inherit; cursor:pointer; transition:.18s; }
.share-native { background:var(--blue); border-color:var(--blue); color:#fff; }
.share-native:hover, .share-native:focus-visible { background:var(--blue-deep); border-color:var(--blue-deep); }
.share-copy:hover, .share-copy:focus-visible { border-color:var(--blue); background:#eef7f6; }
.support-link { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.support-link:hover, .support-link:focus-visible { color:var(--blue-deep); }

.footer { padding:27px 0; background:#fff; border-top:1px solid var(--line); color:#718090; font-size:.82rem; }
.footer .wrap { display:flex; justify-content:space-between; gap:16px; }

/* ===== Back Link ===== */
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-weight:600; font-size:.9rem; transition:.18s; }
.back-link:hover { color:var(--blue-deep); gap:10px; }

/* ===== Responsive ===== */
@media(max-width:700px){
  .wrap { padding:0 20px; }
  .navlinks a:not(.contact):not(.back-link) { display:none; }
  .navlinks .back-link { display:inline-flex !important; }
  .navlinks { gap:12px; }
  .navlinks .contact { padding:8px 10px; font-size:.8rem; }
  .hero { min-height:auto; padding:73px 0 62px; }
  .hero-note { margin-top:55px; }
  .section { padding:64px 0; }
  .section-title, .method-grid, .about { grid-template-columns:1fr; gap:20px; }
  .principles { grid-template-columns:1fr; }
  .principle { border-right:0; border-bottom:1px solid var(--line); margin:0; padding-right:0; }
  .work { grid-template-columns:55px 1fr 22px; gap:12px; }
  .work p { grid-column:2/-1; }
  .project-detail { grid-column:2/-1; }
  .contact-panel { padding:28px; }
  .footer .wrap { display:block; }
  .footer .wrap span { display:block; margin-top:5px; }
}
@media(prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .button, .work { transition:none; }
}

.cookie-consent { position:fixed; z-index:1000; right:20px; bottom:20px; width:min(640px,calc(100% - 40px)); padding:22px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 55px rgba(16,34,54,.22); }
.cookie-consent__content { display:flex; gap:20px; align-items:flex-end; justify-content:space-between; }
.cookie-consent h2 { margin:0 0 5px; font:700 1.18rem/1.2 "Source Serif 4",Georgia,serif; }
.cookie-consent p { margin:0; max-width:400px; color:var(--muted); font-size:.88rem; line-height:1.5; }
.cookie-consent p a { color:var(--blue); font-weight:700; text-decoration:underline; }
.cookie-consent__actions { display:flex; flex-shrink:0; gap:8px; }
.cookie-consent__actions .button { min-height:42px; padding:0 13px; white-space:nowrap; }
@media(max-width:700px){
  .cookie-consent { right:12px; bottom:12px; width:calc(100% - 24px); padding:18px; }
  .cookie-consent__content { display:block; }
  .cookie-consent__actions { margin-top:16px; display:grid; grid-template-columns:1fr 1fr; }
  .cookie-consent__actions .button { justify-content:center; font-size:.78rem; padding:0 8px; }
}