/* BeachBox: ocean-blue tokens shared by the home and inner-page headers. */
:root {
  --navy: #123e70;
  --deep: #082a50;
  --ocean: #176aab;
  --cyan: #43c5e8;
  --sea: #d8eeff;
  --paper: #f5faff;
  --ink: #163b5c;
  --muted: #516c85;
  --line: #c8dfee;
  --white: #fff;
  --primary: #b8dcfa;
  --secondary: #dcf3ff;
  --gradient-primary: linear-gradient(125deg, #c9eaff 0%, #a9d2f5 55%, #c1eafa 100%);
  --gradient-secondary: linear-gradient(135deg, #f1f9ff 0%, #dfedff 55%, #dcf6fb 100%);
  --gradient-deep: linear-gradient(120deg, #0c3059, #185487 65%, #216e99);
  --radius: 12px;
  --font: Inter, "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--ocean);outline-offset:6px}::selection{background:var(--cyan);color:var(--navy)}.wrap{width:min(1200px,calc(100% - 96px));margin:auto}.header{height:112px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;font-size:25px;font-weight:750;letter-spacing:-1px;gap:11px}.brand img{object-fit:contain}.brand-dot{color:var(--ocean);margin-left:-11px}.header nav{display:flex;gap:34px;align-items:center;font-size:14px;font-weight:550}.header nav a{padding:10px 0}.header nav a:hover,.text-link:hover{color:var(--ocean)}.header .nav-contact{border-bottom:1px solid var(--navy);margin-left:20px}.nav-contact span{margin-left:17px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:55px;align-items:center;padding-top:45px;padding-bottom:70px}.eyebrow,.section-label>span,.small-note,.company,.art-label,.art-bottom,.hero-note,.profile-details span,.project-status,.contact-card>span{font-size:10px;letter-spacing:1.8px;font-weight:650}.eyebrow{display:flex;gap:9px;align-items:center;color:var(--ocean);margin:0 0 26px}.eyebrow>span{width:7px;height:7px;background:var(--ocean);border-radius:50%}h1{font-size:clamp(44px,5.1vw,70px);line-height:1.08;letter-spacing:-3.5px;font-weight:600;margin:0 0 26px}em{font-family:Georgia,"Times New Roman",serif;font-weight:400}h1 em{color:var(--ocean)}.intro{max-width:405px;font-size:17px;line-height:1.8;color:var(--muted)}.hero-actions{display:flex;gap:29px;align-items:center;margin-top:31px;font-size:13px;font-weight:600}.button{display:inline-flex;padding:17px 21px;border-radius:var(--radius);gap:23px;align-items:center;transition:background .2s,transform .2s}.primary{background:var(--gradient-primary);color:var(--deep);border:1px solid #8dbde4;box-shadow:0 5px 16px #1d689d14}.primary:hover{background:linear-gradient(125deg,#b9e0ff,#99c8ef,#a9e5f4);transform:translateY(-2px)}.text-link span{margin-left:10px}.hero-note{margin-top:46px;font-size:9px;color:var(--muted)}.hero-note span{padding:0 13px;color:#8aa6ae}.hero-art{isolation:isolate;position:relative;min-height:490px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:170px 170px 10px 10px;overflow:hidden;background:radial-gradient(ellipse at 48% 30%,#f6fdff 5%,#d9efff 60%,#b9dafa)}.hero-emblem{width:76%;height:auto;position:relative;filter:drop-shadow(0 22px 19px #06466d24);transform:rotate(-5deg);z-index:2}.art-label{position:absolute;top:33px;font-size:8px;color:#387183;letter-spacing:2.5px;z-index:3}.orbit{position:absolute;width:125%;height:46%;border:1px solid #68b0bc55;border-radius:50%;transform:rotate(-28deg);z-index:1}.orbit-two{width:150%;height:66%;transform:rotate(-28deg)}.art-bottom{position:absolute;bottom:25px;left:22px;right:22px;display:flex;justify-content:space-between;gap:15px;font-size:7px;letter-spacing:1px;color:#276779;z-index:3}.horizon{height:65px;overflow:hidden}.horizon svg{height:100%;width:100%;display:block}.section{padding-top:90px;padding-bottom:90px}.section-label>span{color:var(--ocean)}h2{font-size:35px;font-weight:550;letter-spacing:-1.4px;line-height:1.2;margin:18px 0 0}h3{font-size:24px;letter-spacing:-.7px;font-weight:550;line-height:1.35;margin:10px 0 13px}.about{display:grid;grid-template-columns:1fr 1.5fr;gap:65px;border-bottom:1px solid var(--line)}.large-copy{font-size:34px;letter-spacing:-1px;line-height:1.35;margin:0 0 22px}.large-copy em{color:var(--ocean)}.placeholder{font-size:14px;line-height:1.85;color:var(--muted);max-width:570px}.profile-details{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:20px;margin-top:32px;padding-top:25px;border-top:1px solid var(--line)}.profile-details span{font-size:8px;color:var(--ocean)}.profile-details p{font-size:13px;margin-bottom:0}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:45px}.small-note{font-size:8px;color:var(--muted);letter-spacing:1.5px;line-height:1.8}.experience-row{display:grid;grid-template-columns:240px 1fr 30px;gap:32px;border-top:1px solid var(--line);padding:35px 0}.experience-row:last-child{padding-bottom:0}.period{font-size:12px;color:var(--muted);padding-top:4px}.company{font-size:9px;color:var(--ocean);margin:0;line-height:1.8}.row-number{font-family:Georgia,serif;color:#a3bdc3;font-size:22px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.tags span{font-size:10px;padding:7px 10px;border:1px solid var(--line);border-radius:20px;color:var(--ink);background:var(--gradient-secondary)}.projects-section{background:var(--gradient-secondary);border-top:1px solid #d7e7e7;border-bottom:1px solid #d7e7e7}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}.project-visual{height:235px;position:relative;overflow:hidden;border-radius:7px;display:grid;place-items:center}.visual-one{background:var(--navy);background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:30px 30px}.project-visual>span{position:absolute;bottom:17px;left:20px;color:#d1e7eb;font-size:8px;letter-spacing:2px}.diagram-box{width:128px;height:128px;display:grid;grid-template-columns:1fr 1fr;gap:7px;transform:rotate(-24deg) skew(10deg)}.diagram-box i{border:1px solid #00c5de88;background:linear-gradient(135deg,#09adc966,#08c4d309);border-radius:5px}.diagram-box i:nth-child(2){transform:translateY(-14px)}.diagram-box i:nth-child(3){transform:translateY(14px)}.visual-two{background:linear-gradient(135deg,#529bd3,#236195)}.contour{width:300px;height:145px;border:1px solid #67e6e2;border-radius:50%;transform:rotate(-28deg);box-shadow:0 0 0 13px #087e9d,0 0 0 14px #67e6e280,0 0 0 28px #087e9d,0 0 0 29px #67e6e250,0 0 0 44px #087e9d,0 0 0 45px #67e6e230}.project-body{padding:25px 0 0}.project-body h3{margin-top:8px}.project-status{display:inline-block;font-size:8px;margin-top:14px;color:var(--muted);border-top:1px solid #c9dadd;width:100%;padding-top:17px}.credentials{display:grid;grid-template-columns:1fr 1.5fr;gap:65px}.credential{padding:0 0 25px}.credential+.credential{border-top:1px solid var(--line);padding-top:25px}.credential p{margin-bottom:0}.contact-section{background:var(--gradient-deep);color:#f3f9fa;position:relative;overflow:hidden}.contact-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:center;padding-top:75px;padding-bottom:75px}.contact-section .eyebrow{color:#67dbe1;margin-bottom:20px}.contact-section h2{font-size:44px;line-height:1.15;margin:0}.contact-section h2 em{color:#6cdce3}.contact-section p{font-size:13px;line-height:1.9;color:#a9c5d3;margin-top:22px}.contact-card{border-left:1px solid #456179;padding:10px 0 10px 35px}.contact-card>span{color:#78c5d1;font-size:8px}.contact-card .contact-placeholder{font-size:20px;color:#fff;margin-bottom:0}.contact-card .contact-note{font-size:11px;margin:6px 0 26px}.contact-card a{font-size:12px;display:flex;justify-content:space-between;border-bottom:1px solid #527086;padding-bottom:12px}.footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-top:28px;padding-bottom:90px}.footer .brand{font-size:19px}.footer p,.footer>a:last-child{font-size:11px;color:var(--muted)}.draft-notice{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:15px;align-items:center;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 4px 25px #06244214;padding:12px 16px;border-radius:6px;z-index:10;font-size:9px;letter-spacing:1px;white-space:nowrap}.draft-notice span{font-size:11px;letter-spacing:0;color:var(--muted)}.draft-notice button{background:transparent;border:0;padding:0 3px;color:var(--muted);font-size:21px;cursor:pointer}.skip{position:absolute;left:15px;top:-90px;background:var(--navy);color:white;padding:14px;z-index:20}.skip:focus{top:15px}
@media(min-width:1500px){.hero{gap:85px;padding-top:60px}.hero-art{min-height:520px}}
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.hero{gap:30px}h1{font-size:54px;letter-spacing:-2.6px}.hero-art{min-height:410px}.art-bottom{font-size:6px}.hero-actions{gap:20px}.button{gap:15px;padding:16px}.experience-row{grid-template-columns:180px 1fr 25px}.about,.credentials{gap:35px;grid-template-columns:1fr 1.6fr}.contact-inner{gap:40px}.contact-section h2{font-size:36px}.small-note{max-width:150px}}
@media(max-width:720px){.wrap{width:calc(100% - 40px)}.header{height:88px}.brand{font-size:22px}.header nav{gap:17px;font-size:12px}.header nav a:nth-child(1),.header nav a:nth-child(2){display:none}.header .nav-contact{margin-left:0}.hero{grid-template-columns:1fr;padding-top:27px;padding-bottom:30px;gap:30px}.hero-copy{max-width:500px}h1{font-size:clamp(43px,9vw,62px)}.intro{font-size:15px;max-width:360px}.hero-note{margin-top:30px}.hero-art{min-height:370px;width:100%;max-width:470px;margin:auto;border-radius:150px 150px 8px 8px}.hero-emblem{width:65%;max-width:305px}.art-label{top:25px}.art-bottom{font-size:7px}.section{padding-top:55px;padding-bottom:55px}.about,.credentials{grid-template-columns:1fr;gap:32px}h2{font-size:29px}.large-copy{font-size:29px}.profile-details{grid-template-columns:1fr 1fr;gap:20px}.section-heading{align-items:flex-start;margin-bottom:30px}.small-note{display:none}.experience-row{grid-template-columns:1fr;gap:12px;padding:28px 0}.experience-row .row-number{display:none}.period{font-size:11px}.company{font-size:8px}.project-grid{grid-template-columns:1fr;gap:40px}.project-visual{height:230px}.contact-inner{grid-template-columns:1fr;gap:35px;padding-top:55px;padding-bottom:55px}.contact-section h2{font-size:35px}.contact-card{padding-left:22px}.footer{flex-wrap:wrap;gap:15px;padding-bottom:110px}.footer p{display:none}.draft-notice{width:calc(100% - 24px);gap:10px;padding:10px 12px;font-size:8px;white-space:normal}.draft-notice span{font-size:10px;line-height:1.4;flex:1}.desktop-break{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media print{.header nav,.hero-art,.horizon,.draft-notice,.hero-actions,.project-visual,.footer{display:none}.wrap{width:100%}.hero,.about,.credentials,.contact-inner{display:block}.section{padding:25px 0}.contact-section{background:white;color:var(--ink)}.contact-section p,.contact-section h2 em{color:var(--ink)}.experience-row,.project{break-inside:avoid}.projects-section{background:white}.hero h1{font-size:36px}.contact-card{border:0;padding:10px 0}}


/* Full homepage wordmark; the supplied emblem is the initial B. */
.brand-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 276px;
  padding: 30px 20px 54px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #ffffffb3, transparent 65%), var(--gradient-primary);
}
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 1;
  gap: 2px;
  color: var(--navy);
  white-space: nowrap;
}
.brand-wordmark img {
  width: clamp(92px, 13vw, 180px);
  height: auto;
  filter: drop-shadow(0 8px 10px #155f9520);
}
.brand-wordmark > span {
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
  padding-bottom: .04em;
}
.wordmark-box { color: #246eaa; font-weight: 350; }
.banner-waves { position: absolute; bottom: -1px; width: 100%; height: 62px; z-index: -1; }
.banner-waves path:first-child { fill: #e6f5ff; fill-opacity: .75; }
.banner-waves path:last-child { fill: var(--paper); }
.home-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 40px;
  min-height: 70px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 550;
}
.home-nav a { padding: 14px 0; }
.home-nav a:hover { color: var(--ocean); }
.home-nav .nav-contact { color: var(--ocean); }
.hero { padding-top: 58px; }
.hero-art { border-radius: 48% 48% 22px 22px; }
.hero-emblem { transform: none; }
.text-link { border-bottom: 1px solid #8eb8da; padding: 10px 0; }
.horizon { height: 76px; background: linear-gradient(180deg, transparent, #e8f4ff); }
.projects-section { position: relative; isolation: isolate; overflow: hidden; }
.projects-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 130%;
  height: 240px;
  left: -15%;
  top: -175px;
  border: 1px solid #8ac8ee66;
  border-radius: 50%;
  transform: rotate(-5deg);
  box-shadow: 0 18px 0 #78c9ed0c, 0 19px 0 #8ac8ee33, 0 38px 0 #78c9ed0a, 0 39px 0 #8ac8ee22;
}
.contact-inner { position: relative; }
/* Other pages use only the emblem in the top-left header. */
.header { border-bottom: 1px solid var(--line); }
.brand-emblem { display: inline-flex; flex-shrink: 0; border-radius: 10px; }
.brand-emblem img { display: block; width: 60px; height: 60px; object-fit: contain; }
.page-header { background: var(--gradient-secondary); }
.page-header .header { min-height: 100px; height: auto; gap: 24px; padding-block: 18px; }
.page-header nav { flex-wrap: wrap; }
.inner-page { min-height: 55vh; }
.inner-page h1 { max-width: 18ch; }
.inner-page .intro { max-width: 60ch; }
@media (max-width: 720px) {
  .brand-banner { min-height: 196px; padding: 30px 16px 42px; }
  .banner-waves { height: 40px; }
  .home-nav { gap: 0 22px; min-height: 68px; font-size: 12px; }
  .hero { padding-top: 36px; }
  .page-header .header { gap: 16px; }
  .page-header .header nav { gap: 4px 16px; justify-content: flex-end; }
  .page-header .header nav a:nth-child(1),
  .page-header .header nav a:nth-child(2) { display: inline-block; }
  .brand-emblem img { width: 48px; height: 48px; }
}
@media print {
  .brand-banner { min-height: auto; padding: 10px 0 24px; background: none; }
  .brand-wordmark img { width: 70px; }
  .brand-wordmark > span { font-size: 42px; }
  .banner-waves, .home-nav, .projects-section::before, .contact-section::before { display: none; }
  .contact-section { background: white; }
}

/* Consolidated portfolio: retain the BeachBox theme across five real pages. */
.site-page .hero { grid-template-columns: 1.12fr 1fr; align-items: center; }
.site-page .hero h1 { font-size: clamp(38px, 4.2vw, 60px); letter-spacing: -.045em; line-height: 1.12; }
.site-page .hero .intro { max-width: 52ch; font-size: 16px; }
.site-page .hero-actions { flex-wrap: wrap; }
.specialties { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 24px 0; }
.specialties li { font-size: 11px; font-weight: 550; color: var(--navy); background: var(--gradient-secondary); border: 1px solid var(--line); padding: 8px 10px; border-radius: 20px; }
.home-nav a[aria-current="page"], .page-header nav a[aria-current="page"] { color: var(--ocean); box-shadow: inset 0 -2px var(--ocean); }
.home-story, .reading-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; }
.reading-copy { min-width: 0; }
.reading-copy p { max-width: 66ch; font-size: 16px; line-height: 1.9; color: var(--muted); margin: 0 0 22px; }
.reading-copy p:last-child { margin-bottom: 0; }
.home-story .text-link { display: inline-block; margin-top: 22px; font-size: 14px; }
.work-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-preview { padding: 28px 24px; border-top: 2px solid #8fc8ec; background: #ffffff80; border-radius: 4px 4px 24px 4px; }
.work-preview h3 { font-size: 23px; line-height: 1.4; margin-bottom: 0; }
.work-preview h3 a:hover { color: var(--ocean); }
.work-number { display: block; color: #487ba5; font-size: 32px; font-weight: 300; margin-bottom: 24px; }
.site-page .contact-section .hero-actions { margin-top: 22px; }
.site-page .footer { padding-bottom: 32px; border-top: 1px solid var(--line); }
.page-header .header { gap: 32px; }
.page-header nav { justify-content: flex-end; }
.page-intro { max-width: 880px; margin-bottom: 72px; }
.page-intro h1 { font-size: clamp(38px, 4.5vw, 62px); letter-spacing: -.045em; line-height: 1.15; max-width: 23ch; }
.page-intro .reading-copy { max-width: 760px; }
.reading-section { border-top: 1px solid var(--line); padding: 52px 0; scroll-margin-top: 24px; }
.reading-section h2 { font-size: 29px; letter-spacing: -.03em; line-height: 1.3; }
.maturity-label { display: inline-block; margin-top: 24px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--gradient-secondary); font-size: 11px; line-height: 1.5; color: var(--navy); }
.page-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 14px; }
.page-about .page-intro, .page-contact .page-intro { margin-inline: auto; }
.page-contact .inner-page { background: radial-gradient(ellipse at 90% 80%, #d9efff77, transparent 65%); }
.site-page .header nav a:nth-child(1), .site-page .header nav a:nth-child(2) { display: inline-block; }
@media (max-width: 1000px) {
  .home-story, .reading-section { gap: 36px; }
  .work-preview-grid { gap: 16px; }
  .work-preview { padding: 22px 18px; }
  .work-preview h3 { font-size: 20px; }
  .page-header nav { gap: 20px; }
}
@media (max-width: 720px) {
  .site-page .hero, .home-story, .reading-section, .work-preview-grid { grid-template-columns: 1fr; }
  .site-page .hero { gap: 36px; }
  .home-nav { gap: 0 20px; padding-block: 6px; }
  .page-header .header { gap: 18px; }
  .page-header .header nav { gap: 0 16px; font-size: 12px; }
  .home-story, .reading-section { gap: 26px; }
  .reading-copy p { font-size: 15px; }
  .page-intro { margin-bottom: 48px; }
  .reading-section { padding-block: 36px; }
  .reading-section h2 { font-size: 27px; }
  .work-preview h3 { font-size: 23px; }
  .work-number { margin-bottom: 14px; }
  .site-page .footer p { display: block; font-size: 11px; }
}
@media print {
  .page-header nav, .page-next { display: none; }
  .home-story, .reading-section { display: block; }
  .reading-section { break-inside: avoid; }
}