:root{--accent:#39c6f4}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The supplied logo is cropped in CSS for the small navigation mark. */
.wordmark-symbol.logo-symbol{background:#020912 url('assets/bryce-n-logo.png') center 43%/225% no-repeat;border-color:#517ca6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.wordmark:hover .logo-symbol{border-color:var(--accent)}
.eyebrow-rule,.small-mark,.label-dot{background:var(--accent)}
.header-cta:hover,.button:hover{box-shadow:0 8px 22px rgba(4,18,38,.22)}

/* One quiet depth system carries the hero and live work previews. */
.project-card{box-shadow:0 18px 36px rgba(0,0,0,.14);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.project-card:hover{transform:translateY(-2px);border-color:#45678b;box-shadow:0 23px 43px rgba(0,0,0,.2)}
.browser-frame{box-shadow:0 28px 62px rgba(0,0,0,.38),0 0 0 1px rgba(167,199,235,.18),0 0 0 9px rgba(167,199,235,.035)}
@media(min-width:851px){
  .stage-back{transform:translate3d(var(--stage-back-x,0px),var(--stage-back-y,0px),0) rotateY(-12deg) rotateZ(-8deg)}
  .stage-front{transform:translate3d(var(--stage-front-x,0px),var(--stage-front-y,0px),0) rotateY(-10deg) rotateZ(6deg)}
}

/* Live before/after comparison: left endpoint is Before, right is After. */
.comparison{--reveal:50%;position:relative}
.compare-surface{position:relative;isolation:isolate;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;border:1px solid #507095;border-radius:8px;box-shadow:8px 10px 0 #0a1b32,12px 14px 0 #1f3a59}
.compare-layer{position:absolute;inset:0;overflow:hidden;background:#e8e9e9;pointer-events:none}
.compare-after{clip-path:inset(0 calc(100% - var(--reveal)) 0 0)}
.compare-layer iframe{display:block;border:0;pointer-events:none;max-width:none}
.compare-divider{position:absolute;z-index:2;top:0;bottom:0;left:var(--reveal);width:2px;transform:translateX(-50%);background:#f5f8fc;box-shadow:0 0 0 1px rgba(8,23,45,.3);pointer-events:none}
.compare-grip{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:48px;height:48px;transform:translate(-50%,-50%);border:2px solid var(--accent);border-radius:50%;background:var(--text);color:var(--bg);font:700 1.2rem 'Open Sans',Arial,sans-serif;box-shadow:0 7px 18px rgba(0,0,0,.28)}
.compare-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding-top:23px}
.compare-controls button{min-width:70px;min-height:42px;padding:8px 12px;border:1px solid #6683a3;border-radius:5px;background:#10243f;color:var(--text);font-size:.83rem;font-weight:700}
.compare-controls button:hover{border-color:var(--accent);background:#1b3b5b}
.compare-range{width:100%;height:32px;margin:0;appearance:none;background:transparent;cursor:ew-resize;accent-color:var(--accent)}
.compare-range::-webkit-slider-runnable-track{height:5px;border-radius:100px;background:#7293b3}
.compare-range::-webkit-slider-thumb{appearance:none;width:23px;height:23px;margin-top:-9px;border:4px solid var(--bg);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--focus)}
.compare-range::-moz-range-track{height:5px;border-radius:100px;background:#7293b3}
.compare-range::-moz-range-thumb{width:16px;height:16px;border:4px solid var(--bg);border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--focus)}
.compare-range:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:5px}
.compare-hint{margin:8px 0 0;color:var(--caption);font-size:.8rem}
.project-comparison .project-viewport{height:360px}
.project-comparison iframe{width:1120px;height:660px;transform:scale(var(--preview-scale,.56));transform-origin:top left}
@media(min-width:851px) and (max-width:1100px){.project-comparison .project-viewport{height:300px}}
@media(min-width:651px) and (max-width:850px){.project-comparison .project-viewport{height:340px}}

/* Portrait and the full supplied logo keep the About section personal. */
.about-layout{grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:9%}
.about-portrait{position:relative;isolation:isolate;min-width:0;padding:0 22px 22px 0}
.portrait-depth{position:absolute;z-index:-1;inset:22px 0 0 22px;border:1px solid #476d91;background:#10243f;box-shadow:0 28px 55px rgba(0,0,0,.28)}
.portrait-frame{position:relative;height:540px;margin:0;overflow:hidden;border:1px solid #496c8d;background:#1b304b}
.portrait-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.portrait-frame:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,rgba(4,15,32,.82));pointer-events:none}
.portrait-frame figcaption{position:absolute;z-index:1;left:25px;bottom:22px;display:grid;gap:2px;color:var(--text)}
.portrait-frame figcaption strong{font:600 1.2rem Poppins,Arial,sans-serif}
.portrait-frame figcaption span{font-size:.84rem;color:var(--muted)}
.logo-plaque{position:absolute;right:0;bottom:0;width:136px;height:136px;padding:5px;border:1px solid #5c8cbd;background:#020912;box-shadow:0 14px 32px rgba(0,0,0,.4);transform:translate3d(6px,7px,0)}
.logo-plaque img{display:block;width:100%;height:100%;object-fit:cover}
.about-copy{max-width:660px}
.about-copy p:not(.eyebrow){font-size:1rem;line-height:1.72}
.about-copy .text-link{margin-top:7px}

@media(max-width:850px){.about-layout{grid-template-columns:1fr;gap:48px}.about-portrait{max-width:540px}.portrait-frame{height:520px}}
@media(max-width:650px){
  .project-card:hover{transform:none}
  .project-comparison .project-viewport{height:390px}
  .project-comparison iframe{width:100%;height:100%;transform:none;max-width:100%}
  .compare-surface{box-shadow:5px 7px 0 #0a1b32,8px 10px 0 #1f3a59}
  .compare-grip{width:42px;height:42px}
  .compare-controls{gap:7px;padding-top:20px}.compare-controls button{min-width:62px;padding:7px 8px}
  .compare-hint{font-size:.76rem}
  .about-portrait{padding:0 14px 14px 0}.portrait-depth{inset:14px 0 0 14px}
  .portrait-frame{height:460px}.logo-plaque{width:112px;height:112px}
}
@media(max-width:360px){.project-comparison .project-viewport{height:355px}.portrait-frame{height:405px}}
@media(prefers-reduced-motion:reduce){
  .project-card,.browser-frame{transition:none}
  .stage-back{transform:rotateZ(-8deg)}.stage-front{transform:rotateZ(6deg)}
}