:root{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:clamp(14px,1.15vw,19px);color:#0e1922;
  --title:clamp(2.45rem,4.3vw,5rem);--subtitle:clamp(1.25rem,1.75vw,2rem);
  --gutter:clamp(20px,4vw,72px);--rim:inset 0 0 0 2px #effdff91,inset 0 0 0 6px #c9f5ff41,inset 0 5px 10px #fffbd9,inset 0 -6px 16px #b1f7ffbd,0 12px 32px #21649236;
  scroll-behavior:smooth;scrollbar-width:none;background:#cbe7f7;
}
::-webkit-scrollbar{display:none}
*{box-sizing:border-box}body{margin:0}h1,h2,h3,p,figure,ul{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}img{display:block}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #003982;outline-offset:4px}
.skip{position:fixed;top:4px;left:12px;z-index:9;background:white;padding:8px;transform:translateY(-150%)}.skip:focus{transform:none}
header{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px var(--gutter);pointer-events:none}
header a{pointer-events:auto}.brand{font-weight:650;font-size:var(--subtitle);letter-spacing:-.045em;white-space:nowrap}header .brand{color:white;text-shadow:0 1px 8px #174064,0 0 19px #174064}
nav{display:flex;gap:4px;padding:4px;border-radius:99px;border:1px solid #e5faffb8;background:linear-gradient(180deg,#537a9cd9,#315774dc);backdrop-filter:blur(12px);box-shadow:inset 0 1px 5px #ffffffaa,inset 0 -2px 5px #b6f4ff90,0 6px 18px #2b618958;color:white}
nav a{padding:8px clamp(8px,1.5vw,24px);border-radius:99px;white-space:nowrap}nav a:hover{background:#ffffff26}
.chapter{min-height:100svh;position:relative;padding:clamp(92px,11vh,124px) var(--gutter) 30px;isolation:isolate;overflow:clip}
.chapter::before{content:"";position:absolute;inset:-35% -10%;z-index:-1;pointer-events:none;transform:rotate(-18deg);background:linear-gradient(177deg,transparent 39%,#fff0 42%,#effeff70 45%,#e9faff9c 45.3%,#a7f8fc78 45.8%,#fff0 46.8%,transparent 54%,#eefaffad 55%,#c8deff54 55.5%,transparent 59%);opacity:.72}
.hero{display:grid;grid-template-columns:36% 64%;align-items:center;background:radial-gradient(ellipse at 9% 48%,#ecf6ff 0%,transparent 57%),linear-gradient(135deg,#d8edfb,#94c9e7 73%,#cbe8f8)}
.hero-copy{position:relative;z-index:1}.hero h1,h2{font-size:var(--title);line-height:1.05;letter-spacing:-.055em;font-weight:540}.hero-copy p,.chapter>p{font-size:var(--subtitle);line-height:1.25;margin-top:12px;letter-spacing:-.025em}.hero-copy p{margin-block:clamp(22px,4vh,46px)}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;padding:.65em 1.15em;color:#fff;border:1px solid #b3f8ff;border-radius:99px;background:linear-gradient(#159cf2,#0067ed 54%,#0557cb);box-shadow:inset 0 2px 3px #d0fbffed,inset 0 -2px 4px #52efffd1,0 5px 15px #0065bb52;white-space:nowrap;cursor:pointer;transition:transform .2s,filter .2s}.cta:hover{transform:translateY(-2px);filter:brightness(1.08)}.cta:active{transform:scale(.98)}.hero .cta,.services .cta{font-size:var(--subtitle)}
.video-slot{position:relative;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 94%,transparent);mask-composite:intersect}
.video-slot img{width:100%;max-width:none;position:absolute}
.hero-visual{aspect-ratio:1.25;margin-inline:-1.5vw calc(-1 * var(--gutter));align-self:center}.hero-visual img{width:148%;left:-46%;top:-8%}
.services{text-align:center;background:radial-gradient(ellipse at 49% 25%,#f0f9ff,transparent 63%),linear-gradient(150deg,#cbe8f8,#a7d6ed 72%,#c1e3f4);display:grid;justify-items:center;align-content:center}.services-visual{width:min(100%,1500px);aspect-ratio:2.87;margin-block:clamp(10px,2vh,24px)}.services-visual img{top:-46%;left:0}.capabilities,.values{display:flex;justify-content:center;flex-wrap:wrap;list-style:none;padding:0;gap:12px 25px;margin-top:16px}.capabilities li+li::before{content:"·";margin-right:25px;color:#4c7897}
.work{background:radial-gradient(ellipse at 12% 15%,#e7f5ff,transparent 60%),linear-gradient(135deg,#c1e3f4,#a2d6ed 75%,#cfe9f8)}.work>p{margin-bottom:22px}.portfolio{display:grid;grid-template-columns:1.24fr 1fr 1.1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:clamp(460px,64vh,720px)}.glass{border:1px solid #eaffffeb;border-radius:clamp(20px,2vw,36px);background:linear-gradient(146deg,#ebfaff80,#aaddf144 54%,#e3f9ff8f);box-shadow:var(--rim)}.project{display:grid;grid-template-rows:minmax(0,1fr) auto;min-width:0;padding:clamp(10px,1.2vw,20px);gap:7px}.rona,.lightson{grid-row:span 2}.project-preview{min-height:0;border:1px solid #f2feffae;overflow:hidden;border-radius:clamp(10px,1vw,20px);background:#d9edf7}.project-preview img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .35s}.project:hover img{transform:scale(1.025)}.project-caption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:6px}.project h3,.end-card h3{font-size:var(--subtitle);font-weight:550;letter-spacing:-.045em;line-height:1.1}.project-caption p{line-height:1.2}
.contact{display:flex;flex-direction:column;background:radial-gradient(ellipse at 8% 15%,#f0f7ff,transparent 65%),linear-gradient(147deg,#cfe9f8,#a5d4ed 73%,#d6ecfa)}.end-grid{display:grid;grid-template-columns:1fr 1fr 1.11fr;gap:12px;margin-block:25px}.end-card{padding:clamp(16px,2.1vw,34px);min-width:0}.end-card h3{margin:12px 0 18px}.end-card p{line-height:1.4}.values{justify-content:flex-start;gap:7px}.values li,details,input,textarea{border:1px solid #f0fcffb8;border-radius:15px;background:#eefaff69;box-shadow:inset 0 2px 4px #ffffff9c,inset 0 -2px 4px #b8eefd9e}.values li{padding:7px 10px}details{padding:9px 12px;margin-top:8px}summary{cursor:pointer}details p{margin-top:8px}form{display:grid;gap:7px}input,textarea{width:100%;padding:9px 12px;color:inherit}textarea{resize:vertical}form .cta{margin-top:4px}.form-note{color:#304e62}footer{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:auto;padding-block:12px}footer span{height:1px;flex:1;background:#6898b86b}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-visual{width:min(100%,760px);margin:0;justify-self:center}.portfolio{grid-template-columns:1fr 1fr;grid-template-rows:auto}.rona,.lightson{grid-row:auto}.project-preview{aspect-ratio:1.65}.end-grid{grid-template-columns:1fr 1fr}.end-card:last-child{grid-column:span 2}}
@media(max-width:570px){header{flex-wrap:wrap;justify-content:center;padding-block:9px}.chapter{padding-top:104px}.hero-visual{margin-top:14px}.services-visual{aspect-ratio:2.48}.services-visual img{top:-34%}.portfolio,.end-grid{grid-template-columns:1fr}.end-card:last-child{grid-column:auto}.desktop{display:none}.capabilities{gap:5px 14px}.capabilities li+li::before{content:none}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.hero-visual{mask-image:linear-gradient(90deg,transparent 7.5%,#000 13%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 94%,transparent)}
.services-visual{aspect-ratio:3.15}.services-visual img{top:auto;transform:translateY(-28.6%)}

/* One continuous blue surface, with light passing behind section boundaries. */
main {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 7% 10%, #eef8ff, transparent 35%),
    radial-gradient(ellipse at 84% 34%, #a7d9f0, transparent 40%),
    radial-gradient(ellipse at 12% 66%, #edf8ff, transparent 38%),
    linear-gradient(165deg, #d8edfb 3%, #9dcde9 27%, #cce9fa 49%, #a8d9ef 68%, #e6f4ff 100%);
}
main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(155deg,
    transparent 0 40svh, #a4effb29 48svh,
    #efffff85 50svh, #ccfffc3d 50.3svh, transparent 54svh 99svh);
}
.chapter { background: transparent; }
.chapter::before { content: none; }
.work > p { margin-bottom: clamp(12px, 2.5svh, 24px); }
.project {
  position: relative;
  isolation: isolate;
  padding: clamp(12px, 1.35vw, 24px);
  gap: clamp(7px, 1.4vh, 14px);
  border: 1px solid #eaffffe8;
  border-radius: clamp(20px, 2vw, 36px);
  background: linear-gradient(155deg, #deffff89, #a3d7f249 46%, #bdeaff9e);
  box-shadow:
    inset 0 0 0 2px #d4fbffd9,
    inset 0 0 0 7px #ecfcff48,
    inset 0 0 0 10px #508cc422,
    inset 0 5px 15px #ffffffd6,
    inset 0 -7px 15px #a0f6ffcf,
    0 8px 24px #19649145;
}
.project::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 9px;
  background:
    radial-gradient(ellipse 75px 15px at 16% 0%, #fff, #81f5ffc9 46%, transparent 95%),
    radial-gradient(ellipse 70px 15px at 82% 1%, #fffbd9, #f5a4fa9c 42%, transparent 94%),
    radial-gradient(ellipse 15px 80px at 100% 63%, #fffae9, #86ffdf9e 44%, transparent 95%),
    radial-gradient(ellipse 95px 16px at 22% 100%, #fff, #7bffedaa 42%, transparent 94%),
    radial-gradient(ellipse 70px 14px at 87% 100%, #ffffde, #f9bcf596 45%, transparent 96%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .82;
  transition: opacity .25s ease;
}
.project:hover::before, .project:focus-within::before { opacity: 1; }
.project-preview { border-radius: clamp(12px, 1.1vw, 20px); box-shadow: 0 0 0 1px #ffffff60; }
.project-caption { align-items: center; }
.project-caption .cta { font-size: .87rem; padding: .56em 1em; }
.project-caption p { color: #26465c; }
@media (min-width: 901px) {
  .chapter { padding-block: clamp(76px, 10.8svh, 120px) clamp(20px, 4svh, 44px); }
  .hero-visual { width: min(calc(100% + var(--gutter)), 104svh); justify-self: end; }
  .services-visual { width: min(100%, 1500px, 170svh); margin-block: clamp(8px, 1.7svh, 20px); }
  .services .capabilities { margin-top: clamp(8px, 1.7svh, 16px); }
  .work { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
  .portfolio { min-height: clamp(300px, 55svh, 530px); grid-template-columns: 1.25fr 1fr 1.12fr; gap: clamp(8px, .65vw, 14px); }
  .project-preview img { object-fit: cover; }
  .contact h2 { max-width: 15ch; }
  .end-grid { flex: 1; align-items: stretch; margin-block: clamp(12px, 2.6svh, 26px); }
  .end-card { padding: clamp(14px, 2.65svh, 34px); }
  .end-card h3 { margin-block: clamp(7px, 1.2svh, 16px); }
  footer { padding-block: clamp(4px, 1svh, 12px); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .chapter { --title: clamp(2.2rem, min(4.3vw, 7svh), 4.2rem); --subtitle: clamp(1.1rem, 2.8svh, 1.65rem); }
  .contact .end-grid { font-size: .94rem; }
  .end-card textarea { min-height: 0; }
}
@media (min-width: 901px) and (min-height: 570px) { .work { height: 100svh; } .portfolio { min-height: 0; } }

/* Fade the artwork before its source image ends, including the floor reflection. */
.hero-visual {
  mask-image:
    linear-gradient(90deg, transparent 6%, #000 14%, #000 91%, transparent 99%),
    linear-gradient(180deg, transparent, #000 10%, #000 81%,
      rgb(0 0 0 / 78%) 87%, rgb(0 0 0 / 32%) 92%, transparent 97%);
}
@media (min-width: 901px) {
  header .brand, .hero-copy { transform: translateX(48px); }
  .hero-visual { transform: translateX(-48px); }
}


.hero-copy .cta {
  font-size: calc(var(--subtitle) * .75);
  gap: 10.5px;
}
@media (min-width: 901px) {
  .hero-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 3rem;
  }
  .hero-copy .cta {
    position: absolute;
    bottom: 12%;
    left: 0;
  }
}
