*,*::before,*::after {
  margin:0;
  padding:0;
  box-sizing:border-box
}

:root {
  
  --ivory:#F5F0E8;
  --ivory-d:#EDEAD2;
  --warm-dk:#343231;
  --charcoal:#2A2A2A;
  --charcoal-m:#383838;
  --charcoal-s:#4E4E4E;
  
  --olive:#7A8B6F;
  --olive-l:#8A9A7F;
  --rule:rgba(42,42,42,.1);
  
  --serif:'Cormorant Garamond','Georgia',serif;
  --sans:'DM Sans','Helvetica Neue',sans-serif;
  
  --nav-h:54px;
  --pad:clamp(1.5rem,6vw,5.5rem);
  --col:840px;
  --col-w:1020px;

}

html {
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

body {
  font-family:var(--sans);
  font-weight:400;
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.75;
  font-size:16px
}

::selection {
  background:var(--olive);
  color:var(--ivory)
}

.k-rule {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  max-width:var(--col);
  margin:0 auto;
  padding:0 var(--pad)
}

.k-rule::before,.k-rule::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--rule)
}

.k-rule .dot {
  width:3.5px;
  height:3.5px;
  border-radius:50%;
  background:var(--olive-l);
  flex-shrink:0
}

nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  padding:0 var(--pad);
  background:rgba(245,240,232,.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:box-shadow .5s ease
}

nav.scrolled {
  box-shadow:0 1px 0 var(--rule)
}

.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:var(--col-w);
  margin:0 auto
}

.wordmark {
  text-decoration:none;
  display:flex;
  align-items:center
}

.wordmark-k {
  font-family:var(--serif);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.02em;
  color:var(--charcoal);
  line-height:1
}

.wordmark-text {
  font-family:var(--serif);
  font-weight:400;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--charcoal-s);
  margin-left:.55rem;
  position:relative;
  top:.5px
}

.wordmark-line {
  width:16px;
  height:1px;
  background:var(--olive);
  margin-left:.45rem;
  position:relative;
  top:.5px
}

.nav-links {
  display:flex;
  align-items:center;
  gap:1.8rem;
  list-style:none
}

.nav-links a {
  font-family:var(--serif);
  font-size:.88rem;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--charcoal-s);
  text-decoration:none;
  transition:color .3s ease
}

.nav-links a:hover {
  color:var(--charcoal)
}

.nav-links .nav-cta {
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--charcoal);
  padding:.42rem 1.1rem;
  border:1px solid rgba(42,42,42,.18);
  margin-left:.4rem;
  transition:all .3s ease
}

.nav-links .nav-cta:hover {
  background:var(--charcoal);
  color:var(--ivory);
  border-color:var(--charcoal)
}

.nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:4px
}

.nav-toggle span {
  display:block;
  width:20px;
  height:1.5px;
  background:var(--charcoal);
  transition:all .3s ease;
  transform-origin:center
}

section {
  padding:clamp(4.5rem,10vw,8rem) var(--pad)
}

.si {
  max-width:var(--col);
  margin:0 auto
}

.sw {
  max-width:var(--col-w);
  margin:0 auto
}

.label {
  font-family:var(--serif);
  font-size:.85rem;
  font-weight:500;
  font-style:italic;
  color:var(--olive);
  margin-bottom:2.25rem;
  letter-spacing:.01em
}

.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.25,1,.5,1),transform .8s cubic-bezier(.25,1,.5,1)
}

.reveal.v {
  opacity:1;
  transform:translateY(0)
}

.cascade>* {
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1)
}

.cascade.v>* {
  opacity:1;
  transform:translateY(0)
}

.cascade.v>*:nth-child(1) {
  transition-delay:0s
}
.cascade.v>*:nth-child(2) {
  transition-delay:.1s
}
.cascade.v>*:nth-child(3) {
  transition-delay:.2s
}
.cascade.v>*:nth-child(4) {
  transition-delay:.3s
}
.cascade.v>*:nth-child(5) {
  transition-delay:.4s
}
.cascade.v>*:nth-child(6) {
  transition-delay:.5s
}

.cta {
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--charcoal);
  text-decoration:none;
  cursor:pointer;
  padding:0;
  border:none;
  background:none;
  transition:gap .35s ease
}

.cta:hover {
  gap:1.2rem
}

.cta-line {
  width:28px;
  height:1px;
  background:var(--charcoal);
  transition:width .35s ease;
  position:relative
}

.cta-line::after {
  content:'';
  position:absolute;
  right:-1px;
  top:-2px;
  width:5px;
  height:5px;
  border-right:1px solid var(--charcoal);
  border-top:1px solid var(--charcoal);
  transform:rotate(45deg)
}

.cta:hover .cta-line {
  width:36px
}

.hero {
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:var(--nav-h);
  position:relative;
  overflow:hidden
}

.hero-frame-t,.hero-frame-b {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  background:var(--olive);
  opacity:0
}

.hero-frame-t {
  top:calc(var(--nav-h) + 2.5rem);
  height:clamp(40px,6vh,70px);
  animation:frameDraw 1s .4s cubic-bezier(.25,1,.5,1) forwards
}

.hero-frame-b {
  bottom:2.5rem;
  height:clamp(30px,4.5vh,50px);
  animation:frameDraw 1s .6s cubic-bezier(.25,1,.5,1) forwards
}

@keyframes frameDraw {
  0% {
  opacity:0;
  transform:translateX(-50%) scaleY(0)
}
100% {
  opacity:.18;
  transform:translateX(-50%) scaleY(1)
}

}

.hero-ghost {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-55%);
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(7rem,18vw,15rem);
  color:var(--olive);
  opacity:.04;
  letter-spacing:.05em;
  white-space:nowrap;
  pointer-events:none;
  user-select:none
}

.hero-content {
  position:relative;
  z-index:1;
  max-width:640px
}

.hero .label {
  margin-bottom:2.75rem
}

.hero h1 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.7rem,5.8vw,4.4rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--charcoal)
}

.hero-ornament {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin:2.75rem auto
}

.hero-ornament .ho-line {
  width:20px;
  height:1px;
  background:var(--olive)
}

.hero-ornament .ho-dot {
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--olive-l)
}

.hero-body {
  font-size:1rem;
  line-height:1.9;
  color:var(--charcoal-m);
  max-width:460px;
  margin:0 auto 3.5rem
}

.intro {
  padding-top:clamp(5rem,11vw,8.5rem);
  padding-bottom:clamp(4rem,8vw,6rem)
}

.intro-grid {
  display:grid;
  grid-template-columns:.75fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:baseline
}

.intro h2 {
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(2rem,3.4vw,2.6rem);
  line-height:1.25;
  color:var(--charcoal)
}

.intro h2::after {
  content:'';
  display:block;
  width:22px;
  height:1px;
  background:var(--olive);
  margin-top:1.25rem
}

.intro p {
  font-size:1rem;
  line-height:1.9;
  color:var(--charcoal-m);
  max-width:480px
}

.services {
  background:var(--ivory-d);
  padding-top:clamp(4.5rem,9vw,7.5rem);
  padding-bottom:clamp(4.5rem,9vw,7.5rem)
}

.svc-header {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:2.75rem;
  padding-bottom:1.15rem;
  border-bottom:1px solid var(--rule)
}

.svc-header .label {
  margin-bottom:0
}

.svc-aside {
  font-family:var(--serif);
  font-size:.78rem;
  color:var(--charcoal-s);
  font-style:italic
}

.svc-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0
}

.svc {
  padding:2.25rem 2.25rem 0;
  position:relative
}

.svc:first-child {
  padding-left:0
}
.svc:last-child {
  padding-right:0
}

.svc:not(:last-child)::after {
  content:'';
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:1px;
  background:var(--rule)
}

.svc-num {
  font-family:var(--serif);
  font-size:.82rem;
  font-weight:500;
  color:var(--olive);
  display:block;
  margin-bottom:1.5rem;
  letter-spacing:.02em
}

.svc h3 {
  font-family:var(--serif);
  font-weight:400;
  font-size:1.4rem;
  line-height:1.2;
  margin-bottom:.9rem
}

.svc p {
  font-size:.92rem;
  line-height:1.85;
  color:var(--charcoal-m)
}

.audience {
  padding-top:clamp(5rem,11vw,9rem);
  padding-bottom:clamp(5rem,11vw,9rem)
}

.audience-text {
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.6;
  max-width:580px;
  color:var(--charcoal)
}

.audience-credibility {
  font-size:.9rem;
  line-height:1.8;
  color:var(--charcoal-s);
  margin-top:1.5rem;
  max-width:520px
}

.logo-row {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  margin-top:3rem;
  padding-top:2.5rem;
  border-top:1px solid var(--rule)
}

.logo-slot {
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 clamp(0.2rem,.8vw,0.6rem)
}

.logo-slot img {
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain
}

/* Targeted per-logo sizing — changes marked */
.logo-slot.sl-my img {
  max-height:52px
}
  /* increased from 48 */
.logo-slot.sl-os img {
  max-height:26px
}

.logo-slot.sl-sn img {
  max-height:18px
}
  /* Sony uploaded file */
.logo-slot.sl-hk img {
  max-height:48px
}

.logo-slot.sl-ef img {
  max-height:22px
}

.philosophy {
  background:var(--warm-dk);
  color:var(--ivory);
  position:relative;
  overflow:hidden
}

.philosophy .label {
  color:var(--olive-l)
}

.philosophy-q {
  position:relative;
  padding-left:2rem
}

.philosophy-q::before {
  content:'';
  position:absolute;
  left:0;
  top:.3rem;
  bottom:.3rem;
  width:2px;
  background:var(--olive)
}

.philosophy blockquote {
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.65;
  max-width:560px;
  color:rgba(245,240,232,.84)
}

.founder {
  padding-top:clamp(5rem,11vw,8.5rem);
  padding-bottom:clamp(5rem,11vw,8.5rem)
}

.founder-grid {
  display:grid;
  grid-template-columns:72px 1fr;
  gap:2rem;
  align-items:start
}

.founder-photo {
  width:72px;
  height:72px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  margin-top:.2rem;
  border:1px solid rgba(122,139,111,.12)
}

.founder-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  display:block
}

.founder-text {
  padding-top:.15rem
}

.founder h2 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.4rem,2.2vw,1.75rem);
  line-height:1.25;
  margin-bottom:.85rem
}

.founder p {
  font-size:.98rem;
  line-height:1.9;
  color:var(--charcoal-m);
  max-width:480px
}

.contact {
  background:var(--ivory-d);
  padding-top:clamp(5rem,11vw,8.5rem);
  padding-bottom:clamp(5rem,11vw,8.5rem)
}

.contact h2 {
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem,3.6vw,2.8rem);
  line-height:1.15;
  margin-bottom:1.25rem
}

.contact p {
  font-size:.98rem;
  line-height:1.9;
  color:var(--charcoal-m);
  max-width:420px
}

.contact p a {
  color:var(--charcoal);
  text-decoration:none;
  border-bottom:1px solid rgba(42,42,42,.2);
  transition:border-color .3s ease
}

.contact p a:hover {
  border-color:var(--charcoal)
}

.contact .cta {
  margin-top:2.25rem
}

footer {
  background:var(--warm-dk);
  padding:0 var(--pad)
}

.footer-top {
  max-width:var(--col);
  margin:0 auto;
  padding:2.75rem 0 1.75rem;
  display:flex;
  justify-content:center
}

.footer-wordmark {
  display:flex;
  align-items:center
}

.footer-wordmark .fk {
  font-family:var(--serif);
  font-weight:500;
  font-size:1.4rem;
  color:rgba(245,240,232,.18);
  line-height:1
}

.footer-wordmark .ft {
  font-family:var(--serif);
  font-weight:400;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(245,240,232,.12);
  margin-left:.5rem;
  position:relative;
  top:.5px
}

.footer-wordmark .fl {
  width:14px;
  height:1px;
  background:rgba(122,139,111,.22);
  margin-left:.4rem;
  position:relative;
  top:.5px
}

.footer-bottom {
  max-width:var(--col);
  margin:0 auto;
  padding:1.25rem 0 2.75rem;
  border-top:1px solid rgba(245,240,232,.06);
  display:flex;
  justify-content:space-between;
  align-items:center
}

.footer-bottom span {
  font-size:.72rem;
  color:rgba(245,240,232,.25);
  letter-spacing:.02em
}

.footer-bottom a {
  font-family:var(--serif);
  font-size:.82rem;
  color:rgba(245,240,232,.3);
  text-decoration:none;
  transition:color .3s ease
}

.footer-bottom a:hover {
  color:rgba(245,240,232,.5)
}

@media(max-width:768px) {
  
  .nav-links {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(245,240,232,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease
}

  .nav-links.open {
  opacity:1;
  pointer-events:all
}

  .nav-links a {
  font-size:1.1rem
}

  .nav-links .nav-cta {
  font-size:.78rem;
  margin-left:0;
  margin-top:.5rem
}

  .nav-toggle {
  display:flex;
  z-index:101
}

  .nav-toggle.active span:nth-child(1) {
  transform:rotate(45deg) translate(4.5px,4.5px)
}

  .nav-toggle.active span:nth-child(2) {
  opacity:0
}

  .nav-toggle.active span:nth-child(3) {
  transform:rotate(-45deg) translate(4.5px,-4.5px)
}

  .hero-ghost {
  font-size:clamp(5rem,22vw,8rem)
}

  .hero-frame-t,.hero-frame-b {
  display:none
}

  .intro-grid {
  grid-template-columns:1fr;
  gap:1.25rem
}

  .intro h2::after {
  margin-top:1rem
}

  .svc-header {
  flex-direction:column;
  gap:.5rem
}

  .svc-grid {
  grid-template-columns:1fr
}

  .svc {
  padding:2rem 0;
  border-top:1px solid var(--rule)
}

  .svc:first-child {
  padding-left:0
}

  .svc:not(:last-child)::after {
  display:none
}

  .logo-slot {
  height:42px;
  padding:0 .15rem
}

  .logo-slot.sl-my img {
  max-height:42px
}

  .logo-slot.sl-os img {
  max-height:20px
}

  .logo-slot.sl-sn img {
  max-height:14px
}

  .logo-slot.sl-hk img {
  max-height:38px
}

  .logo-slot.sl-ef img {
  max-height:17px
}

  .philosophy-q {
  padding-left:1.25rem
}

  .founder-grid {
  grid-template-columns:1fr;
  gap:1.25rem
}

  .founder-photo {
  width:64px;
  height:64px
}

  .footer-top {
  padding:2.25rem 0 1.5rem
}

  .footer-bottom {
  flex-direction:column;
  gap:.75rem;
  text-align:center
}

}

@media(max-width:480px) {
  
  .hero h1 {
  font-size:2.3rem
}

  .wordmark-text,.wordmark-line {
  display:none
}

  .logo-slot {
  height:34px;
  padding:0 .1rem
}

  .logo-slot.sl-my img {
  max-height:34px
}

  .logo-slot.sl-os img {
  max-height:16px
}

  .logo-slot.sl-sn img {
  max-height:11px
}

  .logo-slot.sl-hk img {
  max-height:32px
}

  .logo-slot.sl-ef img {
  max-height:14px
}

}