/* Readable standalone articles with the original dark green palette. */
@font-face{font-family:'MDI Article';src:url('/assets/fonts/Jost-MDI-Variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
.principle-page{color-scheme:dark;--rule:rgba(255,255,255,.22)}
:where(.principle-page),:where(.principle-page) *{box-sizing:border-box}
body.is-approach{margin:0}
.principle-page{min-height:100dvh;margin:0;background:linear-gradient(90deg,#010101 0%,#0b2f2a 100%);color:#fff;font:400 20px/1.6 'MDI Article',Arial,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
:where(.principle-page) a{color:inherit;text-decoration:none;text-underline-offset:4px;touch-action:manipulation}
:where(.principle-page) a:hover{text-decoration:underline}
:where(.principle-page) a:focus-visible{outline:2px solid #fff;outline-offset:4px}
:where(.principle-page) img{display:block;max-width:100%}
:where(.principle-page) :is(h1,h2,p,figure){margin:0}
.principle-shell{width:min(calc(100% - 80px),1180px);margin-inline:auto}
.principle-toolbar{display:flex;align-items:center;gap:24px;min-height:88px;padding-block:16px;font-size:14px;line-height:1.5}
.principle-brand{flex:none}.principle-brand img{display:block;width:80px;height:auto}
.principle-back{margin-left:auto;padding-block:12px}
.principle-toolbar-next{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;transition:background-color .2s,border-color .2s}
.principle-toolbar-next:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.65);text-decoration:none}
@media(max-width:760px){.principle-toolbar{column-gap:10px}.principle-toolbar-next{width:44px;height:44px}}
@media(max-width:360px){.principle-toolbar.principle-shell{width:calc(100% - 24px);gap:8px;font-size:12px}.principle-toolbar .principle-brand img{width:52px}}
.principle-toolbar>span{font-variant-numeric:tabular-nums;white-space:nowrap;color:rgba(255,255,255,.75)}
.principle-hero-photo{position:relative;margin:0}
.principle-main-image{width:100%;height:clamp(300px,36vw,580px);object-fit:cover;mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)}
.principle-hero-photo--contain .principle-main-image{mask-image:none;height:clamp(300px,36vw,520px);padding-inline:16px}
.principle-hero-photo figcaption{padding-top:20px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.75)}
.principle-content{padding-top:48px;padding-bottom:48px}
.principle-heading{padding-bottom:36px;margin-bottom:40px;border-bottom:1px solid var(--rule)}
.principle-heading h1{max-width:100%;font-size:clamp(48px,4.5vw,64px);font-weight:400;line-height:1.12;letter-spacing:-.025em;overflow-wrap:break-word}
.principle-lead{max-width:820px;margin-top:24px;font-size:26px;line-height:1.45;color:rgba(255,255,255,.9)}
.principle-groups{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:64px;align-items:start}
.principle-group{min-width:0;overflow-wrap:break-word}
.principle-group h2{margin-bottom:24px;font-size:26px;font-weight:400;line-height:1.3}
.principle-description p{color:rgba(255,255,255,.9)}
.principle-group p+p{margin-top:24px}
.principle-details{padding-left:32px;border-left:1px solid var(--rule)}
.principle-group ul{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none;font-size:18px;line-height:1.6;color:rgba(255,255,255,.88)}
.principle-group li+li{padding-top:20px;border-top:1px solid var(--rule)}
.principle-pagination{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;border-top:1px solid var(--rule);margin-top:56px;padding-top:28px}
.principle-pagination a{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-height:48px;overflow-wrap:break-word}
.principle-pagination a:last-child{align-items:flex-end;text-align:right}
.principle-pagination small{font-size:14px;line-height:1.5;color:rgba(255,255,255,.75)}
.principle-pagination span{font-size:22px;line-height:1.35}
.principle-page-footer{display:flex;justify-content:space-between;gap:24px;margin-top:36px;padding-top:24px;border-top:1px solid var(--rule);font-size:16px;line-height:1.5}
.principle-page-footer>span{color:rgba(255,255,255,.75)}
@media(max-width:1000px){.principle-groups{gap:36px;grid-template-columns:minmax(0,1.45fr) minmax(240px,1fr)}.principle-details{padding-left:24px}}
@media(max-width:760px){.principle-page{font-size:18px}.principle-shell{width:calc(100% - 40px)}.principle-toolbar{min-height:76px;gap:16px}.principle-brand img{width:64px;height:auto}.principle-content{padding-top:32px;padding-bottom:32px}.principle-heading{padding-bottom:28px;margin-bottom:32px}.principle-heading h1{font-size:clamp(34px,6vw,44px)}.principle-lead{font-size:22px;margin-top:20px}.principle-groups{grid-template-columns:minmax(0,1fr);gap:36px}.principle-group h2{font-size:24px;margin-bottom:20px}.principle-details{padding:28px 0 0;border-left:0;border-top:1px solid var(--rule)}.principle-main-image{height:320px}.principle-hero-photo--contain .principle-main-image{height:auto;max-height:420px}.principle-pagination{gap:20px;margin-top:40px}.principle-pagination span{font-size:20px}.principle-page-footer{gap:16px;flex-wrap:wrap}}
@media(max-width:380px){.principle-toolbar{gap:10px}.principle-pagination{grid-template-columns:minmax(0,1fr)}.principle-pagination a:last-child{align-items:flex-start;text-align:left}}

/* Preserve the aerial photograph as a complete frame rather than a panoramic crop. */
[data-page-principle="nature"] .principle-main-image{width:100%;height:clamp(280px,48svh,640px);max-width:none;max-height:none;margin-inline:0;object-fit:cover;object-position:50% 44%;mask-image:none}

/* Keep the water in frame; override the renderer's inline center position. */
[data-page-principle="ponds"] .principle-main-image{height:clamp(300px,48svh,680px);object-position:50% 78% !important;mask-image:linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%)}
@media(max-width:760px){[data-page-principle="ponds"] .principle-main-image{height:auto;mask-image:none}}

/* A proportional frame keeps the whole house visible even on ultrawide screens. */
[data-page-principle="style"] .principle-main-image{height:auto;aspect-ratio:3 / 1;object-position:50% 0% !important;mask-image:linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%)}
@media(max-width:760px){[data-page-principle="style"] .principle-main-image{aspect-ratio:auto;mask-image:none}}

/* Approved article copy follows its source order in one readable column. */
.principle-page--approved .principle-heading,.principle-approved-copy{max-width:900px}
.principle-page--approved .principle-lead{max-width:none;font-size:26px;line-height:1.5}
.principle-approved-copy{font-size:24px;line-height:1.6;color:rgba(255,255,255,.9);overflow-wrap:break-word}
.principle-approved-copy>*+*{margin-top:28px}
.principle-approved-copy ul{padding-left:1.2em;margin-bottom:0}
.principle-approved-copy ul:first-child{margin-top:0}
.principle-approved-copy li{padding-left:.25em}
.principle-approved-copy li+li{margin-top:16px}
@media(max-width:760px){.principle-page--approved .principle-lead{font-size:24px}.principle-approved-copy{font-size:22px;line-height:1.55}}

/* Separate catalogue return from previous/next navigation. */
.principle-toolbar.principle-shell{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);width:min(calc(100% - 80px),1180px);gap:20px}
.principle-toolbar .principle-back{margin-left:0;justify-self:start;white-space:nowrap}
.principle-toolbar-navigation{display:flex;align-items:center;justify-self:end;gap:12px}
.principle-toolbar-navigation>span{font-variant-numeric:tabular-nums;white-space:nowrap;color:rgba(255,255,255,.75);margin-right:4px}
[data-page-principle="care"] .principle-main-image{width:100%;height:clamp(360px,60svh,760px);max-height:none;padding:0;object-fit:cover !important;object-position:50% 25% !important;mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)}
[data-page-principle="perfection"] .principle-main-image{height:clamp(320px,62svh,900px);object-position:50% 55% !important;mask-image:linear-gradient(to bottom,#000 0%,#000 92%,transparent 100%)}
@media(max-width:760px){[data-page-principle="perfection"] .principle-main-image{height:auto;mask-image:none}}
[data-page-principle="boutique"] .principle-main-image{height:clamp(320px,62svh,900px);object-position:50% 70% !important;mask-image:linear-gradient(to bottom,#000 0%,#000 92%,transparent 100%)}
@media(max-width:760px){[data-page-principle="boutique"] .principle-main-image{height:auto;mask-image:none}}
[data-page-principle="integrated"] .principle-main-image{width:100%;height:auto;max-height:none;aspect-ratio:2.6;padding:0;object-fit:cover !important;object-position:50% 85% !important;mask-image:linear-gradient(to bottom,#000 0%,#000 97%,transparent 100%)}
@media(max-width:760px){[data-page-principle="integrated"] .principle-main-image{aspect-ratio:2;mask-image:none}}
[data-page-principle="developer"] .principle-main-image{height:auto;aspect-ratio:2.6;object-position:50% 48% !important;mask-image:linear-gradient(to bottom,#000 0%,#000 94%,transparent 100%)}
@media(max-width:760px){[data-page-principle="developer"] .principle-main-image{aspect-ratio:auto;mask-image:none}}
[data-page-principle="recognition"] .principle-main-image{width:100%;height:auto;max-height:none;padding:0;object-fit:contain;mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.25) 4%,rgba(0,0,0,.8) 12%,#000 21%,#000 87%,rgba(0,0,0,.92) 90%,rgba(0,0,0,.45) 95%,transparent 100%)}
[data-page-principle="recognition"] .principle-hero-photo figcaption{padding-top:8px}
[data-page-principle="care"] .principle-hero-photo figcaption{padding-top:8px}
[data-page-principle="care"] .principle-content{padding-top:32px}
@media(max-width:760px){[data-page-principle="care"] .principle-main-image{height:auto;aspect-ratio:1.5;mask-image:none}[data-page-principle="care"] .principle-hero-photo figcaption{padding-top:20px}}
@media(max-width:760px){.principle-toolbar.principle-shell{width:calc(100% - 40px);grid-template-columns:1fr auto;gap:8px 12px}.principle-toolbar .principle-brand{grid-column:1 / -1;grid-row:1;justify-self:center}.principle-toolbar .principle-back{grid-row:2}.principle-toolbar-navigation{grid-row:2;gap:8px}.principle-toolbar-navigation>span{margin-right:0}}

/* Blend article photographs into the page without changing their chosen framing. */
article[data-page-principle]{--photo-fade-top:12%;--photo-fade-bottom:92%}
article[data-page-principle="style"]{--photo-fade-top:4%;--photo-fade-bottom:96%}
article[data-page-principle="care"]{--photo-fade-top:7%;--photo-fade-bottom:90%}
article[data-page-principle="boutique"]{--photo-fade-top:5%;--photo-fade-bottom:94%}
article[data-page-principle="integrated"]{--photo-fade-top:7%;--photo-fade-bottom:97%}
article[data-page-principle="goal"]{--photo-fade-top:7%;--photo-fade-bottom:95%}
article[data-page-principle]:not([data-page-principle="recognition"]) .principle-main-image{
  mask-image:linear-gradient(to bottom,transparent 0%,#000 var(--photo-fade-top),#000 var(--photo-fade-bottom),transparent 100%);
}
article[data-page-principle] .principle-hero-photo figcaption{padding-top:8px}
article[data-page-principle="goal"] .principle-main-image{width:100%;height:auto;max-height:none;padding:0}


/* A footer-like opening: title over a generous image fading into the article. */
.principle-hero-stage{position:relative;isolation:isolate;height:min(68svh,960px)}
article[data-page-principle] .principle-hero-media{
  position:absolute;inset:0;overflow:hidden;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 84%,transparent 100%);
}
article[data-page-principle] .principle-hero-media .principle-main-image{
  width:100%;height:100%;max-height:none;aspect-ratio:auto;padding:0;
  object-fit:cover;mask-image:none;
}
/* Complete subjects stay intact; the surrounding page gradient stays quiet. */
article[data-page-principle] .principle-hero-media--full-frame .principle-main-image{
  width:auto;max-width:100%;margin-inline:auto;
  object-fit:contain !important;object-position:center !important;
  mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
}
.principle-hero-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(2,15,12,.72),rgba(2,15,12,.34) 18%,transparent 42%);
}
article[data-page-principle] .principle-hero-stage .principle-heading{
  position:relative;z-index:1;padding-top:clamp(30px,5svh,72px);padding-bottom:0;
  margin-bottom:0;border:0;max-width:1180px;
}
.principle-hero-stage h1{max-width:980px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
article[data-page-principle] .principle-content{padding-top:16px}
.principle-introduction{max-width:900px;padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--rule)}
.principle-introduction .principle-lead{margin-top:0}
@media(max-width:760px){
  .principle-hero-stage{height:56svh;min-height:350px}
  article[data-page-principle] .principle-hero-stage .principle-heading{padding-top:24px}
  /* Space above a complete landscape frame keeps the title clear of faces. */
  .principle-hero-photo--contain .principle-hero-stage{height:auto;min-height:0;display:flex;flex-direction:column}
  article[data-page-principle] .principle-hero-photo--contain .principle-heading{order:-1;padding-bottom:20px}
  article[data-page-principle] .principle-hero-media--full-frame{position:relative;height:66.667vw;flex:none}
  article[data-page-principle="recognition"] .principle-hero-media--full-frame{height:56.28vw}
  .principle-hero-photo--contain .principle-hero-stage::after{display:none}
  article[data-page-principle] .principle-content{padding-top:16px}
}

/* The expanded care photograph fills the stage without a framed inset. */
article[data-page-principle="care"] .principle-hero-media--full-frame .principle-main-image{width:100%;max-width:none;object-fit:cover !important;object-position:50% 100% !important;mask-image:none !important}

/* Expanded team panorama keeps the group whole in the edge-to-edge hero. */
article[data-page-principle="integrated"] .principle-hero-media--full-frame .principle-main-image{width:100%;max-width:none;object-fit:cover !important;object-position:50% 85% !important;mask-image:none !important}
@media(max-width:760px){article[data-page-principle="integrated"] .principle-hero-media--full-frame{height:50vw}}

/* Panoramic awards photograph: all six trophies remain in the frame. */
article[data-page-principle="recognition"] .principle-hero-media--full-frame .principle-main-image{width:100%;max-width:none;object-fit:cover !important;object-position:50% 65% !important;mask-image:none !important}
@media(max-width:760px){article[data-page-principle="recognition"] .principle-hero-media--full-frame{height:44vw}}

/* A quiet editorial portrait index, scoped to the club article. */
[data-page-principle="club"] .club-portraits{margin-top:52px}
.club-portraits h2{max-width:620px;margin:0 0 32px;font-size:clamp(28px,3vw,36px);font-weight:400;line-height:1.25;letter-spacing:-.015em}
.principle-approved-copy .club-portraits-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:0;padding:0;list-style:none}
.principle-approved-copy .club-portrait{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:start;gap:20px;margin:0;padding:28px 0;border-top:1px solid var(--rule)}
.club-portrait-image{width:110px;height:145px;object-fit:cover;filter:grayscale(1);background:rgba(255,255,255,.06)}
.club-portrait-copy{min-width:0}
.club-portrait-copy h3{margin:0 0 10px;font-size:23px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:#fff}
.club-portrait-copy p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.76)}
.club-portrait-sources{padding-top:20px;border-top:1px solid var(--rule);font-size:14px;line-height:1.5;color:rgba(255,255,255,.65)}
.club-portrait-sources summary{width:fit-content;cursor:pointer;padding-block:10px}
.club-portrait-sources summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
.club-portrait-sources p{padding-block:8px 12px}
.club-portrait-sources a{text-decoration:underline}
@media(max-width:760px){
  [data-page-principle="club"] .club-portraits{margin-top:40px}
  .club-portraits h2{margin-bottom:24px}
  .principle-approved-copy .club-portraits-grid{grid-template-columns:minmax(0,1fr)}
  .principle-approved-copy .club-portrait{padding-block:24px}
}
@media(max-width:380px){
  .principle-approved-copy .club-portrait{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .club-portrait-image{width:88px;height:116px}
  .club-portrait-copy h3{font-size:21px}
}

/* Expanded model photograph blends across the full article width. */
article[data-page-principle="goal"] .principle-hero-media--full-frame .principle-main-image{width:100%;max-width:none;object-fit:cover !important;object-position:50% 50% !important;mask-image:none !important}
@media(max-width:760px){article[data-page-principle="goal"] .principle-hero-media--full-frame{height:50vw}}

/* Semantic editorial hierarchy; short principles keep their compact form. */
.principle-approved-copy>h2{font-size:clamp(25px,2.4vw,33px);font-weight:400;line-height:1.25;letter-spacing:-.02em;color:#fff;margin-top:48px}
.principle-approved-copy>h2:first-child{margin-top:0}
.principle-approved-copy>h2+*{margin-top:18px}
.principle-sources{padding-top:28px;border-top:1px solid var(--rule);font-size:16px;line-height:1.6}
.principle-sources h2{font-size:20px;line-height:1.35;font-weight:400;margin-bottom:18px}
.principle-sources ul{list-style:none;padding:0;margin:0}
.principle-sources a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.principle-sources a:hover{text-decoration:none}
@media(max-width:760px){.principle-approved-copy>h2{margin-top:36px}.principle-sources{font-size:15px}}

/* Narrow phones: let the back link wrap beside the full-size paging controls. */
@media(max-width:380px){
  .principle-toolbar.principle-shell{grid-template-columns:minmax(0,1fr) auto}
  .principle-toolbar .principle-back{min-width:0;max-width:100%;white-space:normal;line-height:1.35}
}