:root{
  --bg:#f5f5f7; --surface:#fff; --text:#1d1d1f; --muted:#6e6e73;
  --line:#d2d2d7; --ink:#000; --max:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img{width:100%;display:block}
.site-header{height:54px;display:flex;align-items:center;position:sticky;top:0;z-index:50;background:rgba(245,245,247,.86);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.05)}
.nav{width:min(var(--max),calc(100% - 48px));margin:auto;display:flex;justify-content:space-between;align-items:center;font-size:13px}
.brand{font-weight:700}.nav-links{display:flex;gap:28px;color:#424245}.nav-links a:hover{color:#000}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}.page{overflow:hidden}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hero{min-height:650px;display:grid;place-items:center;text-align:center;background:#fff;padding:90px 0 76px}
.hero h1{font-size:clamp(58px,8.2vw,110px);line-height:.9;letter-spacing:-.06em;margin:16px auto 30px;max-width:1050px}
.hero .sub{font-size:clamp(23px,2.6vw,34px);line-height:1.18;letter-spacing:-.03em;max-width:850px;margin:auto;color:#424245;font-weight:500}
.hero .location{margin-top:28px;color:var(--muted);font-size:16px}.arrow{display:inline-block;margin-top:42px;font-size:16px;font-weight:650}
.section{padding:118px 0}.section.surface{background:#fff}.section.dark{background:#000;color:#fff}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:42px}
.section h2,.page-hero h1{font-size:clamp(44px,5.4vw,72px);letter-spacing:-.05em;line-height:.96;margin:0}
.section-head p{max-width:510px;margin:0;color:var(--muted);font-size:18px;line-height:1.5}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.card{background:#fff;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(0,0,0,.025)}
.card-media{height:390px;overflow:hidden;background:#e8e8ed}.card-media img{height:100%;object-fit:cover;transition:transform .65s ease}.card:hover .card-media img{transform:scale(1.018)}
.card.placeholder .card-media{display:flex;align-items:center;justify-content:center;color:#8a8a90;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(145deg,#dedee3,#f1f1f3)}
.card .meta{padding:26px 28px 30px}.card h3{font-size:28px;letter-spacing:-.03em;margin:0 0 8px}.tags{color:var(--muted);font-size:14px}.wide-card{grid-column:1/-1}.wide-card .card-media{height:570px}
.intro-copy{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.big-copy{font-size:clamp(38px,4.6vw,66px);line-height:1.03;letter-spacing:-.05em;margin:0;font-weight:680}.body-copy{font-size:20px;line-height:1.58;color:#424245;max-width:570px}
.expertise{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.expertise-item{background:#fff;padding:38px;min-height:250px}.expertise-item .num{font-size:12px;color:var(--muted);margin-bottom:62px}.expertise-item h3{font-size:25px;letter-spacing:-.03em;margin:0 0 15px}.expertise-item p{color:var(--muted);line-height:1.48;margin:0}
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.logo-wall div{min-height:126px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:680;background:#fff;text-align:center;padding:18px}
.cta{text-align:center;padding:150px 0;background:#000;color:#fff}.cta h2{font-size:clamp(58px,8vw,106px);letter-spacing:-.06em;margin:0 0 28px}.cta p{font-size:20px;color:#b9b9bd}.cta-links{display:flex;justify-content:center;gap:28px;margin-top:34px;font-weight:650}
.footer{padding:26px 0 36px;font-size:12px;color:#8a8a90;background:#000}.footer .container{border-top:1px solid #333;padding-top:20px;display:flex;justify-content:space-between;gap:20px}
.portfolio-note{font-size:12px;color:#86868b;line-height:1.5;margin-top:28px}
.page-hero{background:#fff;padding:112px 0 76px}.page-hero h1{font-size:clamp(64px,8vw,110px);margin:14px 0 28px}.page-hero p{font-size:25px;color:#424245;max-width:820px;line-height:1.35;margin:0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 46px}.pill{border:1px solid var(--line);padding:10px 15px;border-radius:999px;background:#fff;font-size:13px}.pill.active{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.about-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:74px;align-items:start}.portrait{overflow:hidden;border-radius:28px;background:#eee}.portrait img{aspect-ratio:1/1;object-fit:cover}
.timeline{border-top:1px solid var(--line)}.timeline-item{display:grid;grid-template-columns:190px 1fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--line)}.timeline-item h3{margin:0 0 8px;font-size:23px}.timeline-item p{margin:0;color:var(--muted);line-height:1.5}
.expertise-list{border-top:1px solid var(--line)}.expertise-row{display:grid;grid-template-columns:80px 1fr 1fr;gap:30px;align-items:start;padding:46px 0;border-bottom:1px solid var(--line)}.expertise-row h3{font-size:34px;letter-spacing:-.035em;margin:0}.expertise-row p{margin:0;color:var(--muted);font-size:18px;line-height:1.52}
.contact-page{min-height:calc(100vh - 54px);display:grid;align-items:center;background:#000;color:#fff}.contact-page h1{font-size:clamp(72px,10vw,130px);letter-spacing:-.065em;line-height:.88;margin:0 0 38px}.contact-page p{font-size:24px;color:#bcbcc0;max-width:680px;line-height:1.4}.contact-detail{display:flex;gap:30px;margin-top:45px;font-size:18px;font-weight:650}
/* case studies */
.case-header{background:#fff;padding:104px 0 0}.case-header h1{font-size:clamp(66px,9vw,124px);letter-spacing:-.065em;line-height:.88;margin:16px 0 30px}.case-deck{font-size:clamp(24px,2.5vw,34px);line-height:1.25;letter-spacing:-.03em;color:#424245;max-width:860px;margin:0}.case-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:58px}.case-meta>div{padding:22px 22px 22px 0}.label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:7px}.value{font-size:16px;font-weight:650}
.hero-image{width:100%;height:min(76vw,820px);object-fit:cover}.editorial{width:min(820px,calc(100% - 48px));margin:auto;padding:106px 0}.editorial .eyebrow{margin-bottom:16px}.editorial h2{font-size:clamp(39px,4.8vw,58px);letter-spacing:-.045em;line-height:1.02;margin:0 0 28px}.editorial p{font-size:21px;line-height:1.58;color:#424245;margin:0 0 24px}.editorial strong{color:#1d1d1f}
.feature-media{width:min(1380px,calc(100% - 28px));margin:auto}.feature-media img{min-height:520px;max-height:800px;object-fit:cover;border-radius:28px}.feature-caption{width:min(1180px,calc(100% - 48px));margin:14px auto 0;color:#86868b;font-size:12px}
.media-pair{width:min(var(--max),calc(100% - 48px));margin:26px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:26px}.media-pair img{height:560px;object-fit:cover;border-radius:26px}
.quote-block{background:#000;color:#fff;padding:130px 0}.quote-inner{width:min(980px,calc(100% - 48px));margin:auto}.quote-mark{font-size:14px;color:#86868b;text-transform:uppercase;letter-spacing:.1em;margin-bottom:26px}.quote-block blockquote{font-size:clamp(42px,5.7vw,76px);line-height:1.02;letter-spacing:-.05em;margin:0}.quote-source{margin-top:28px;color:#a1a1a6;font-size:14px}.quote-source a{text-decoration:underline;text-underline-offset:3px}
.scope-band{background:#fff;padding:92px 0}.scope-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.scope-card{padding:34px;border:1px solid var(--line);border-radius:22px}.scope-card strong{display:block;font-size:54px;letter-spacing:-.055em;margin-bottom:8px}.scope-card span{color:var(--muted);line-height:1.4}
.asset-section{padding:110px 0;background:#fff}.asset-title{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:34px}.asset-title h2{font-size:clamp(40px,4.7vw,62px);letter-spacing:-.05em;line-height:1;margin:0}.asset-title p{margin:0;color:#6e6e73;font-size:18px;line-height:1.5}.asset-media{border-radius:28px;overflow:hidden;background:#e9e9ed}.asset-media img{height:min(64vw,720px);object-fit:cover}.remote-note{font-size:11px;color:#9a9aa0;margin-top:10px}
.next-project{padding:124px 0;background:#fff;text-align:center}.next-project .small{color:#86868b;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.next-project h2{font-size:clamp(58px,7vw,98px);letter-spacing:-.055em;margin:16px 0}.next-project a:hover{text-decoration:underline;text-underline-offset:7px}
@media(max-width:850px){
  .nav-links{gap:14px;font-size:11px}.project-grid,.intro-copy,.about-grid,.media-pair,.asset-title{grid-template-columns:1fr}.wide-card{grid-column:auto}.wide-card .card-media,.card-media{height:360px}.expertise{grid-template-columns:1fr}.logo-wall{grid-template-columns:repeat(2,1fr)}.case-meta{grid-template-columns:repeat(2,1fr)}.media-pair img{height:430px}.scope-grid{grid-template-columns:1fr}.expertise-row{grid-template-columns:50px 1fr}.expertise-row p{grid-column:2}.timeline-item{grid-template-columns:1fr}.footer .container{flex-direction:column}.asset-section{padding:82px 0}.hero-image{height:62vh;min-height:460px}
}

/* v4 refinements */
.card .summary{font-size:15px;line-height:1.5;color:#424245;margin:15px 0 0;max-width:640px}
.home-about{display:grid;grid-template-columns:1.05fr .78fr;gap:82px;align-items:center}
.home-about .portrait img{aspect-ratio:1/1.05;object-position:center 36%}
.case-meta.long-market{grid-template-columns:1.65fr .65fr 1.05fr 1fr}
.value{line-height:1.42;overflow-wrap:anywhere}
.placeholder-media{width:min(1380px,calc(100% - 28px));height:min(60vw,660px);margin:auto;border-radius:28px;background:linear-gradient(145deg,#dedee3,#f1f1f3);display:flex;align-items:center;justify-content:center;text-align:center;color:#8a8a90;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:24px}
.supporting-media{padding:72px 0;background:#fff}.supporting-media .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.media-quote{border-top:1px solid var(--line);padding:28px 0 10px}.media-quote blockquote{font-size:26px;line-height:1.28;letter-spacing:-.025em;margin:0 0 20px}.media-quote .source{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#86868b;line-height:1.5}
.proof-band{padding:84px 0;background:#f5f5f7}.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.proof{background:#fff;border-radius:22px;padding:32px;min-height:190px}.proof strong{display:block;font-size:50px;letter-spacing:-.055em;margin-bottom:10px}.proof span{color:#6e6e73;line-height:1.45}
.recognition{padding:92px 0;background:#fff}.award-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.award{border-top:1px solid var(--line);padding:28px 0}.award .year{font-size:12px;color:#86868b;margin-bottom:18px}.award h3{font-size:24px;letter-spacing:-.025em;margin:0 0 8px}.award p{color:#6e6e73;margin:0;line-height:1.45}
.text-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;font-weight:650}
@media(max-width:850px){.home-about{grid-template-columns:1fr}.case-meta.long-market{grid-template-columns:1fr 1fr}.supporting-media .grid,.proof-grid,.award-grid{grid-template-columns:1fr}.placeholder-media{height:420px}}

/* v6 wireframe: earlier personal introduction + stronger portrait */
.home-about{padding-top:96px;padding-bottom:96px}
.home-about .portrait{border-radius:32px;box-shadow:0 24px 60px rgba(0,0,0,.08)}
.home-about .portrait img{aspect-ratio:4/5;object-position:center 34%}
.home-about .big-copy{max-width:680px}
.remote-image-note{font-size:11px;color:#9a9aa0;margin-top:10px}
@media(max-width:850px){.home-about{padding-top:76px;padding-bottom:76px}}

/* Portfolio content update — October 2026 */
.new-hero{min-height:710px}
.new-hero .sub{font-size:clamp(24px,3.25vw,44px);color:#1d1d1f;max-width:980px}
.hero-caption{max-width:700px;margin:27px auto 0;font-size:19px;line-height:1.55;color:#6e6e73}
.card-link{display:inline-block;margin-top:23px;font-size:13px;font-weight:650}
.card .tags{margin-bottom:10px}.card h3{margin-top:6px}
.card-media .editorial-art{height:100%;width:100%}
.editorial-art{background:linear-gradient(145deg,#dedee3,#f1f1f3);color:#171719;padding:36px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.editorial-art:after{content:'';width:65%;aspect-ratio:1;position:absolute;right:-16%;top:20%;border-radius:50%;border:32px solid rgba(255,255,255,.28)}
.editorial-art span{font-size:11px;letter-spacing:.13em;font-weight:700;position:relative;z-index:1}
.editorial-art strong{font-size:clamp(38px,5vw,86px);letter-spacing:-.065em;line-height:.96;max-width:780px;position:relative;z-index:1}
.editorial-art small{font-size:15px;font-weight:600;position:relative;z-index:1}
.art-saudi-pro-league{background:linear-gradient(130deg,#e5eee5,#c1d6c4)}
.art-viya{background:linear-gradient(135deg,#e0e4f1,#b9c7e0)}
.art-wta-finals{background:linear-gradient(130deg,#eee2ed,#d7bed4)}
.art-alula{background:linear-gradient(130deg,#e9dfd4,#c9a78c)}
.art-topgolf{background:linear-gradient(135deg,#dae9eb,#a8c6ca)}
.art-ministry-of-sport{background:linear-gradient(130deg,#dfe8dd,#acbea7)}
.case-art-wide{height:min(68vw,740px);min-height:420px}.case-art-wide .editorial-art{height:100%;padding:max(48px,5vw)}
.case-art-wide .editorial-art strong{font-size:clamp(58px,9vw,148px)}
.proof{min-height:150px;display:flex;align-items:flex-end}.proof span{font-size:23px;line-height:1.25;font-weight:650;color:#1d1d1f;letter-spacing:-.03em}
.return-work{display:inline-block;margin-top:26px;font-weight:650}
.contact-detail{flex-wrap:wrap}.contact-location{font-size:16px!important}
@media(max-width:850px){.new-hero{min-height:650px}.editorial-art{padding:28px}.editorial-art strong{font-size:52px}.case-art-wide .editorial-art strong{font-size:64px}.card-media .editorial-art strong{font-size:45px}.hero-caption{font-size:17px}}


/* Mobile layout refinement — October 2026
   Preserve desktop art direction while removing oversized vertical gaps. */
@media (max-width: 850px) {
  .container {width:calc(100% - 36px)}
  .section {padding:56px 0}
  .section-head {flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:28px}
  .section-head p {max-width:100%;font-size:17px;line-height:1.48}
  .section h2,.page-hero h1 {font-size:clamp(38px,9.5vw,56px);line-height:1.02}

  /* Homepage: less empty space before and after the introductory copy */
  .hero.new-hero {min-height:0;padding:72px 0 54px}
  .hero h1 {font-size:clamp(48px,12vw,76px);line-height:.98;margin:13px auto 19px}
  .new-hero .sub {font-size:clamp(21px,5.7vw,29px);line-height:1.26}
  .hero-caption {font-size:16px;line-height:1.47;margin-top:18px}
  .hero .location {font-size:14px;margin-top:18px}
  .arrow {margin-top:25px}
  .home-about {padding-top:50px;padding-bottom:50px;gap:28px}
  .home-about .big-copy {font-size:clamp(36px,9.4vw,54px);line-height:1.06}
  .home-about .portrait {border-radius:22px}
  .body-copy {font-size:17px;line-height:1.54}
  .intro-copy {gap:24px}
  .project-grid {gap:16px}
  .wide-card .card-media,.card-media {height:275px}
  .card .meta {padding:20px 22px 23px}
  .card h3 {font-size:25px}
  .card .summary {font-size:14px;line-height:1.5;margin-top:10px}
  .card-link {margin-top:15px}
  .expertise-item {min-height:0;padding:26px}
  .expertise-item .num {margin-bottom:20px}
  .logo-wall div {min-height:88px}

  /* Page and case-study headers */
  .page-hero {padding:66px 0 43px}
  .page-hero h1 {margin:14px 0 20px}
  .page-hero p {font-size:19px;line-height:1.45}
  .case-header {padding:62px 0 0}
  .case-header h1 {font-size:clamp(49px,12.8vw,82px);line-height:.98;margin:13px 0 20px}
  .case-deck {font-size:21px;line-height:1.32}
  .case-meta {margin-top:30px}
  .case-meta>div {padding:16px 14px 17px 0}
  .label {font-size:10px;margin-bottom:6px}
  .value {font-size:14px;line-height:1.4}
  .hero-image {height:auto;min-height:0;max-height:450px;aspect-ratio:16 / 11;object-fit:cover}
  .case-art-wide {height:320px;min-height:0}
  .case-art-wide .editorial-art {padding:26px}
  .case-art-wide .editorial-art strong {font-size:clamp(46px,11vw,70px)}

  /* Case study reading rhythm: remove ~200px gaps between copy blocks */
  .editorial {padding:43px 0}
  .editorial .eyebrow {margin-bottom:11px}
  .editorial h2 {font-size:clamp(34px,9vw,48px);line-height:1.07;margin-bottom:18px}
  .editorial p {font-size:18px;line-height:1.55;margin:0 0 17px}
  .feature-media img {height:auto;min-height:0;max-height:450px;aspect-ratio:4 / 3;object-fit:cover;border-radius:20px}
  .feature-caption {margin-top:9px}
  .media-pair {gap:14px;margin-top:16px}
  .media-pair img {height:auto;aspect-ratio:4 / 3;border-radius:18px}
  .placeholder-media {height:290px;border-radius:20px}
  .asset-section {padding:55px 0}
  .asset-title {gap:16px;margin-bottom:22px}
  .asset-title h2 {font-size:clamp(36px,9vw,48px)}
  .asset-title p {font-size:16px;line-height:1.5}
  .asset-media {border-radius:20px}
  .asset-media img {height:auto;aspect-ratio:4 / 3;object-fit:cover}
  .quote-block {padding:65px 0}
  .quote-block blockquote {font-size:clamp(32px,8.5vw,50px);line-height:1.08}
  .quote-mark {margin-bottom:16px}
  .quote-source {margin-top:20px}

  /* Summary cards: content-sized, not large blank white rectangles */
  .scope-band,.proof-band {padding:46px 0}
  .scope-grid,.proof-grid {gap:12px}
  .scope-card {padding:24px}
  .proof {min-height:0;padding:26px 25px;align-items:center}
  .proof span {font-size:21px;line-height:1.28}
  .proof strong {font-size:40px}
  .next-project {padding:70px 0}
  .next-project h2 {font-size:clamp(46px,11vw,68px);margin:14px 0}

  /* Supporting sections */
  .supporting-media {padding:50px 0}
  .recognition {padding:54px 0}
  .award-grid {gap:10px}
  .award {padding:21px 0}
  .timeline-item {gap:12px;padding:25px 0}
  .timeline-item h3 {font-size:21px}
  .expertise-row {gap:12px;padding:28px 0}
  .expertise-row h3 {font-size:27px}
  .expertise-row p {font-size:16px}
  .about-grid {gap:28px}
  .cta {padding:76px 0}
  .cta h2 {font-size:clamp(52px,12vw,76px);margin-bottom:18px}
  .cta p {font-size:17px}
  .cta-links {margin-top:24px}
}
@media (max-width:480px) {
  .nav {width:calc(100% - 26px)}
  .brand {font-size:12px;white-space:nowrap}
  .nav-links {font-size:10px;gap:10px}
  .hero.new-hero {padding:59px 0 43px}
  .hero h1 {font-size:clamp(46px,11.5vw,58px)}
  .section {padding:48px 0}
  .home-about {padding-top:43px;padding-bottom:43px}
  .editorial {padding:37px 0}
  .proof-band,.scope-band {padding:39px 0}
  .proof {padding:23px 22px}
  .case-header {padding-top:52px}
  .case-meta {margin-top:26px}
  .next-project {padding:56px 0}
}


/* Saudi Pro League editorial imagery */
.project-hero-media {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px 8px;
}
.project-hero-media__image {
  margin-bottom: 20px;
}
.project-hero-media__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}
.project-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.project-gallery__item {
  margin: 0;
}
.project-gallery__item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
@media (max-width: 1024px) {
  .project-hero-media {
    padding: 20px 24px 4px;
  }
  .project-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .project-gallery__item img {
    height: 180px;
  }
}
@media (max-width: 640px) {
  .project-hero-media {
    padding: 16px 16px 0;
  }
  .project-hero-media__image {
    margin-bottom: 12px;
  }
  .project-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .project-gallery__item img {
    height: 132px;
    border-radius: 14px;
  }
}


/* Surf Abu Dhabi case study — sourced editorial photography with graceful fallbacks */
.surf-card-media,.surf-photo{background:linear-gradient(145deg,#177c90 0%,#5ac6c3 46%,#d0e9e5 100%);position:relative;overflow:hidden}
.surf-card-media img,.surf-photo img{width:100%;height:100%;object-fit:cover;display:block}
.surf-card-media::before,.surf-photo::before{content:"SURF ABU DHABI";position:absolute;left:8%;bottom:11%;color:rgba(255,255,255,.82);font-size:clamp(24px,4vw,60px);font-weight:800;letter-spacing:-.05em;z-index:0}
.surf-card-media img,.surf-photo img{position:relative;z-index:1}
.surf-hero-wrap{width:min(1380px,calc(100% - 28px));margin:24px auto 0}
.surf-hero-wrap .surf-photo{height:clamp(340px,54vw,710px);border-radius:24px}
.surf-photo-credit{font-size:12px;line-height:1.5;color:#77777d;margin:11px 0 0;padding:0 5px}
.surf-photo-credit a{text-decoration:underline;text-underline-offset:2px}
.surf-photo-secondary{width:min(1100px,calc(100% - 48px));margin:12px auto 0}
.surf-photo--secondary{height:clamp(300px,45vw,590px);border-radius:22px}
.project-gallery--five{align-items:stretch}
.project-hero-media{margin-top:20px}
.project-hero-media__image img{max-height:700px;object-fit:cover}
.spl-credit{margin:12px 0 0}
@media(max-width:850px){
 .surf-hero-wrap{margin:16px auto 0}
 .surf-hero-wrap .surf-photo{height:clamp(260px,62vw,480px);border-radius:18px}
 .surf-photo-secondary{margin:8px auto 0}
 .surf-photo--secondary{height:clamp(260px,64vw,430px);border-radius:18px}
}
@media(max-width:480px){
 .surf-hero-wrap .surf-photo{height:260px}
 .surf-photo--secondary{height:260px}
 .surf-photo-credit{font-size:11px}
 .project-gallery__item img{height:112px}
}


/* Coverage-led editorial quotes — Apple New York (2019) on Apple WebKit.
   CSS ui-serif maps to the New York system typeface in Safari.
   Non-WebKit browsers use local serif fallbacks; no Apple font files bundled. */
.quote-block.editorial-quote {
  background: #050505;
  color: #fff;
  padding: clamp(66px, 8.5vw, 116px) 0;
  margin: 0;
  border-radius: 0;
}
.quote-block.editorial-quote .quote-inner {
  width: min(1030px, calc(100% - 64px));
  margin: 0 auto;
}
.quote-block.editorial-quote .quote-mark {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  line-height: 1.5;
  color: #a3a3a8;
  text-transform: uppercase;
  font-weight: 650;
  margin-bottom: 24px;
}
.quote-block.editorial-quote blockquote {
  max-width: 970px;
  font-family: -apple-system-ui-serif, ui-serif, "New York", "New York Large", "Iowan Old Style", Baskerville, Georgia, serif;
  font-size: clamp(34px, 4.6vw, 68px);
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 1.13;
  letter-spacing: -.02em;
  color: #f6f6f7;
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.quote-block.editorial-quote .quote-source {
  margin-top: 26px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: #ededed;
  text-transform: uppercase;
  letter-spacing: .105em;
  line-height: 1.65;
}
.quote-block.editorial-quote .quote-source a {
  color: inherit;
  text-decoration: none;
  display: inline;
  border-bottom: 1px solid rgba(255,255,255,.48);
  padding-bottom: 4px;
  text-underline-offset: 4px;
  transition: border-color .2s ease;
}
.quote-block.editorial-quote .quote-source a:hover,
.quote-block.editorial-quote .quote-source a:focus-visible {
  border-color: #fff;
}
.quote-block.editorial-quote .quote-date { color: #aaaab0; }
.quote-block.editorial-quote .quote-arrow { display: inline; margin-left: 2px; }
@media(max-width:640px) {
  .quote-block.editorial-quote { padding: 52px 0 58px; }
  .quote-block.editorial-quote .quote-inner { width: calc(100% - 40px); }
  .quote-block.editorial-quote .quote-mark { margin-bottom: 18px; font-size: 10px; }
  .quote-block.editorial-quote blockquote { font-size: clamp(29px, 7.7vw, 42px); line-height: 1.17; letter-spacing: -.035em; }
  .quote-block.editorial-quote .quote-source { margin-top: 23px; font-size: 11px; }
}


/* Viya's leisure portfolio — compact editorial image gallery. The images are
   externally hosted and should be replaced with approved local copies. */
.viya-showcase{width:min(1320px,calc(100% - 40px));margin:30px auto 12px}
.viya-showcase-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 0 22px}
.viya-showcase-intro p{max-width:620px;font-size:18px;line-height:1.45;color:#55555a;margin:0}
.viya-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.viya-showcase-item{margin:0;min-width:0}
.viya-showcase-media{aspect-ratio:16/10;overflow:hidden;border-radius:22px;background:#dfe2e5}
.viya-showcase-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.viya-showcase-item:hover img{transform:scale(1.025)}
.viya-showcase-item figcaption{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:12px 3px 3px}
.viya-showcase-item figcaption strong{font-size:15px;letter-spacing:-.02em}
.viya-showcase-item figcaption span{font-size:11px;color:#86868b;text-align:right}
.viya-visual-note{font-size:12px;line-height:1.55;color:#8b8b90;margin:22px 2px 0}
.viya-visual-note a{text-decoration:underline;text-underline-offset:3px}
.viya-card-mosaic{height:100%;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;background:#f4f4f6}
.viya-card-mosaic img{min-width:0;min-height:0;width:100%;height:100%;object-fit:cover}
@media(max-width:850px){
  .viya-showcase{width:calc(100% - 32px);margin:16px auto 4px}
  .viya-showcase-intro{display:block;margin-bottom:16px}
  .viya-showcase-intro p{margin-top:9px;font-size:16px}
  .viya-showcase-grid{gap:16px}
  .viya-showcase-media{aspect-ratio:4/5;border-radius:16px}
  .viya-showcase-item figcaption{display:block;padding:10px 1px 0}
  .viya-showcase-item figcaption strong{font-size:13px;display:block;line-height:1.35}
  .viya-showcase-item figcaption span{font-size:10px;display:block;text-align:left;margin-top:4px;line-height:1.3}
  .viya-visual-note{margin-top:14px}
}
@media(max-width:430px){.viya-showcase-grid{gap:12px}.viya-showcase-item figcaption strong{font-size:12px}.viya-showcase-media{border-radius:12px}}


/* October 2026: organisation-first case studies and Aldar portfolio transition */
.case-header h1.title-long{font-size:clamp(46px,7vw,100px);line-height:1;letter-spacing:-.055em;max-width:1120px;overflow-wrap:normal}
.aldar-photo-section{width:min(1320px,calc(100% - 40px));margin:28px auto 8px}
.aldar-photo-primary{border-radius:22px;overflow:hidden;background:#dce5e8}
.aldar-photo-primary img{height:clamp(320px,50vw,620px);width:100%;object-fit:cover;display:block}
.aldar-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.aldar-photo-grid figure{margin:0;min-width:0}
.aldar-photo-grid img{height:clamp(240px,30vw,370px);width:100%;object-fit:cover;border-radius:20px}
.aldar-photo-grid figcaption{font-size:14px;font-weight:600;letter-spacing:-.02em;color:#57575c;padding:11px 2px 0}
@media(max-width:850px){
 .case-header h1.title-long{font-size:clamp(40px,8.5vw,67px);line-height:1.06}
 .aldar-photo-section{width:calc(100% - 32px);margin:16px auto 0}
 .aldar-photo-primary img{height:clamp(240px,53vw,440px)}
 .aldar-photo-grid{gap:12px;margin-top:12px}
 .aldar-photo-grid img{height:clamp(160px,35vw,260px);border-radius:14px}
 .aldar-photo-grid figcaption{font-size:12px;line-height:1.35}
}
@media(max-width:480px){
 .case-header h1.title-long{font-size:clamp(37px,9vw,48px)}
 .aldar-photo-primary{border-radius:15px}
 .aldar-photo-grid img{height:160px}
}


/* October 2026 typography refresh: Arial Nova Light across interface and editorial copy.
   Use locally installed Arial Nova Light when available; neutral light-sans fallbacks
   allow the website to work on devices without a licensed Arial Nova installation. */
:root {
  --portfolio-sans: "Arial Nova Light", "Arial Nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --portfolio-serif-quote: Baskerville, "Baskerville Old Face", "Libre Baskerville", Georgia, serif;
}
body, button, input, textarea, select {
  font-family: var(--portfolio-sans);
  font-weight: 300;
}
h1, h2, h3, h4, h5, h6,
.brand, .big-copy, .cta h2,
.case-header h1, .card h3,
.logo-wall div, .scope-card strong,
.expertise-item h3, .expertise-row h3,
.aldar-photo-grid figcaption strong {
  font-family: var(--portfolio-sans);
  font-weight: 300;
}
/* Keep readable distinction between navigation/metadata and prominent editorial titles. */
.nav, .eyebrow, .label, .value,
.quote-block.editorial-quote .quote-mark,
.quote-block.editorial-quote .quote-source {
  font-family: var(--portfolio-sans);
}
.quote-block blockquote,
.quote-block.editorial-quote blockquote,
.media-quote blockquote {
  font-family: var(--portfolio-serif-quote);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
}
/* Simple credentials without fields of study, grades or date columns. */
.education-list .timeline-item {
  display: block;
  padding: 23px 0;
}
.education-list .timeline-item h3 { margin-bottom: 5px; }
@media (max-width: 640px) {
  .education-list .timeline-item { padding: 18px 0; }
  .quote-block.editorial-quote blockquote { letter-spacing: -.012em; }
}


/* Image-led case study refresh: 30 October 2026 */
.image-gallery { width:min(var(--max),calc(100% - 48px)); margin:10px auto 28px; display:grid; gap:16px; }
.image-gallery--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.image-gallery--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.image-gallery--four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.image-gallery__figure { padding:0;margin:0;min-width:0; overflow:hidden;border-radius:18px;background:#e8e8eb; }
.image-gallery__figure img { width:100%;height:100%;min-height:240px;max-height:410px;aspect-ratio:1.34;object-fit:cover;display:block; }
.image-gallery--three .image-gallery__figure img {aspect-ratio:1.22;min-height:220px;}
.image-gallery--four .image-gallery__figure img {aspect-ratio:1.08;min-height:175px;}
/* Readable, compact evidence rather than oversized white cards. */
.proof-band {padding:44px 0;background:#f5f5f7;}
.proof-band .eyebrow {margin-bottom:15px;}
.proof-grid {gap:18px;}
.proof {background:transparent;min-height:0;padding:18px 0 4px;border-top:1px solid #c7c7cc;border-radius:0;}
.proof strong {font-size:clamp(24px,3vw,39px);margin-bottom:6px;line-height:1.08;}
.proof span {font-size:15px;line-height:1.38;color:#55565b;}
@media(max-width:850px){
 .image-gallery{width:calc(100% - 32px);gap:10px;margin:8px auto 22px;}
 .image-gallery--three,.image-gallery--four{grid-template-columns:repeat(2,minmax(0,1fr));}
 .image-gallery__figure{border-radius:13px;}
 .image-gallery__figure img,.image-gallery--three .image-gallery__figure img,.image-gallery--four .image-gallery__figure img{min-height:150px;max-height:260px;aspect-ratio:1.15;}
 .proof-grid{gap:10px;}.proof{padding:13px 0 1px;}.proof strong{font-size:25px;}
}
@media(max-width:480px){
 .image-gallery--two,.image-gallery--three,.image-gallery--four{grid-template-columns:repeat(2,minmax(0,1fr));}
 .image-gallery__figure img,.image-gallery--three .image-gallery__figure img,.image-gallery--four .image-gallery__figure img{min-height:130px;max-height:220px;aspect-ratio:1;}
 .proof-band{padding:28px 0;}.proof-grid{gap:8px;}.proof strong{font-size:22px;}
}

/* Topgolf / LIV review: editorial panel and image fallbacks */
.coverage-panel{padding:clamp(40px,6vw,76px) 0;background:#f5f5f7;}
.coverage-panel .container{max-width:900px;}
.coverage-panel .eyebrow{margin-bottom:20px;}
.coverage-panel h2{font-size:clamp(26px,4vw,42px);font-weight:300;letter-spacing:-.035em;margin:0 0 16px;}
.coverage-panel p{font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:#44454b;margin:0 0 22px;}
.coverage-panel .coverage-link{font-size:14px;color:#222;text-decoration:underline;text-underline-offset:4px;}
.asset-unavailable{min-height:180px;background:#f5f5f7;}
.asset-unavailable__image{visibility:hidden;}

/* Portrait between homepage intro and background text */
.home-portrait-section {background:#fff;padding:12px 0 86px}
.home-portrait-frame {width:min(460px,100%);margin:0 auto}
.home-portrait-frame .portrait {overflow:hidden;border-radius:24px}
.home-portrait-frame .portrait img {display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 34%}
.home-about {display:block;max-width:850px;margin-inline:auto;padding-top:70px;padding-bottom:90px}
.home-about > div {max-width:780px;margin:auto}
@media(max-width:850px){.home-portrait-section{padding:0 0 46px}.home-portrait-frame{width:min(390px,100%)}.home-about{padding-top:36px;padding-bottom:54px}}

/* 30 October: SF Pro site typography; system San Francisco on Apple devices. */
:root { --portfolio-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --portfolio-serif-quote: Baskerville, "Baskerville Old Face", "Libre Baskerville", Georgia, serif; }
body, button, input, textarea, select { font-family: var(--portfolio-sans); font-weight: 400; }
h1,h2,h3,h4,h5,h6,.brand,.big-copy,.cta h2,.case-header h1,.card h3,.logo-wall div,.scope-card strong,.expertise-item h3,.expertise-row h3,.nav,.eyebrow,.label,.value { font-family: var(--portfolio-sans); font-weight: 500; }
.quote-block.editorial-quote blockquote,.quote-block blockquote,.media-quote blockquote { font-family: var(--portfolio-serif-quote); font-style: italic; font-weight: 400; }
.liv-single-photo { padding: 0; }
.liv-single-photo figure { margin: 0; }
.liv-single-photo img { display: block; width: 100%; max-height: 720px; object-fit: cover; }

/* Final typography: SF Pro UI, Baskerville Italic for every editorial quotation. */
:root { --portfolio-serif-quote: "Baskerville", "Baskerville Old Face", "Libre Baskerville", Georgia, serif; }
.quote-block blockquote,
.quote-block.editorial-quote blockquote,
.media-quote blockquote,
blockquote {
  font-family: "Baskerville", "Baskerville Old Face", "Libre Baskerville", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-synthesis: style;
}
/* Attribution and labels remain in SF Pro. */
.quote-block .quote-mark, .quote-block .quote-source, .media-quote .source {
  font-family: var(--portfolio-sans);
  font-style: normal;
}